ChartJS标签的多个子标签
ChartJS标签的多个子标签
提问于 2020-04-21 20:20:58
我希望在chart.js中一个标签有多个子标签，这是可能的吗？
Stack Overflow用户
回答已采纳
发布于 2020-04-23 02:51:46
您需要定义一个只包含堆叠条形图的labels的附加yAxis。我们将向每个数据集添加yAxisID属性。这必须与标准category轴的缩放属性scales.yAxes.id匹配。
yAxes: [{
labels: ['A', 'B', 'C', 'A', 'B', 'C', 'A', 'B', 'C']
},
{
id: 'yAxis1',
type: 'category',
offset: true,
gridLines: {
offsetGridLines: true
}
}
]请看一下下面的可运行代码。
var barChartData = {
labels: ["January", "February", "March"],
datasets: [{
label: "Dataset 1",
yAxisID: 'yAxis1',
backgroundColor: "#FF0000",
categoryPercentage: 1,
barPercentage: 0.8,
stack: "Stack 0",
data: [1, 2, 3],
},
{
label: "Dataset 2",
yAxisID: 'yAxis1',
backgroundColor: "#0000FF",
categoryPercentage: 1,
barPercentage: 0.8,
stack: "Stack 0",
data: [5, 4, 3],
},
{
label: "Dataset 3",
yAxisID: 'yAxis1',
backgroundColor: "#00CC00",
categoryPercentage: 1,
barPercentage: 0.8,
stack: "Stack 1",
data: [6, 5, 4],
},
{
label: "Dataset 4",
yAxisID: 'yAxis1',
backgroundColor: "#000000",
categoryPercentage: 1,
barPercentage: 0.8,
stack: "Stack 2",
data: [6, 5, 4],
}
]
};
new Chart('chart', {
type: "horizontalBar",
data: barChartData,
options: {
scales: {
yAxes: [{
labels: ['A', 'B', 'C', 'A', 'B', 'C', 'A', 'B', 'C']
},
{
id: 'yAxis1',
type: 'category',
offset: true,
gridLines: {
offsetGridLines: true
}
}
]
},
title: {
display: true,
text: "Chart.js Bar Chart - Stacked",
},
tooltips: {
mode: "index",
intersect: false,
},
responsive: true,
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61343438
复制相关文章
相似问题
腾讯云开发者
