我已经在互联网上搜索过这个问题,但我没有看到解决方案。我正在尝试实现一个分层的组图。基本上,1 个条形图有 2 个或更多数据(或颜色)。
我也试过这个链接 https://www.chartjs.org/docs/latest/charts/mixed.html , 但它只是混合图表类型。请参阅下图,了解我想要实现的示例输出。
所以上图一共有3种颜色,蓝色,还有黄色和橙色的混合色。有什么想法吗?
最佳答案
在 chart.js 中有一个创建堆叠分组图表的选项,您可以在其中根据分组需要指定堆叠属性。请参阅下面的代码或 fiddle -> http://jsfiddle.net/4h6dm2ny/
希望对您有所帮助!
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["13Aug", "14Aug", "15Aug"],
datasets: [{
label: 'Blue',
stack: 'Stack 0',
data: [240, 270, 1320],
backgroundColor: 'blue',
},
{
label: 'Orange',
stack: 'Stack 1',
data: [0, 300, 1520],
backgroundColor: 'orange',
},
{
label: 'Yellow',
data: [1500, 700, 200],
stack: 'Stack 1',
backgroundColor: 'yellow',
}
]
},
options: {
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
关于javascript - ChartJS 中具有多层的组图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53001149/