我已经用ChartJS v2.8.0版本使用LwC构建了一个水平堆叠条形图,现在我想在下面的条形图上显示数据集标签,如“已完成”,“等待”,"进行中“。下面是我尝试实现的屏幕截图示例:Stacked bar chart example/expected outcome
下面是代码:
Chart.plugins.register(ChartDataLabels);
new Chart(
document.getElementById('myChart'),
{
type: 'horizontalBar',
data: {
labels: ["#count"],
datasets: [
{
label: 'Completed',
barPercentage: 0.5,
barThickness: 6,
maxBarThickness: 8,
minBarLength: 2,
backgroundColor: "blue",
data: [10],
},
{
label: 'In Progress',
barPercentage: 0.5,
barThickness: 6,
maxBarThickness: 8,
minBarLength: 2,
backgroundColor: "blue",
data: [65],
},
{
label: 'Waiting',
barPercentage: 0.5,
barThickness: 6,
maxBarThickness: 8,
minBarLength: 2,
backgroundColor: "blue",
data: [80],
},
]
},
options: {
indexAxis: 'x',
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
},
resposive:true,
plugins: {
datalabels: {
clamp: true,
color: "black",
labels: {
title: {
font: {
weight: "bold"
}
}
}
}
}
}
});
下面是我运行代码时的屏幕截图:screenshot
有人能建议我如何在条形下方显示数据集标签吗?
1条答案
按热度按时间cnwbcb6i1#
您可以利用数据标签插件的
align
、offset
和formatter
选项。此外,您可能需要定义2个标签,一个用于数字,一个用于数据集标签。第一个