[英]Chart.js remove stacking
我有一个堆积条形图和两个折线图。 第二个折线图堆叠在第一个折线图的顶部,但我不想要这种行为。
我试过的是显式设置堆栈模式为false,但是这个选项没有被执行。
...
type: 'line',
label: 'lineChart1',
data: lineData1,
borderWidth: 1,
fill: false,
options: {
legend: {
display: false
},
scales: {
xAxes: [{
stacked: false,
}],
yAxes: [{
stacked: false
}]
}
}
}
...
下面是一个配置带有2个堆叠条和2个未堆叠线的图表的示例。 我认为您在折线图上堆叠的原因是因为您没有在条形图中设置stacked
选项以给它们一个堆栈ID。
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
type: 'line',
label: 'Dataset 1',
borderColor: window.chartColors.green,
borderWidth: 2,
fill: false,
data: [5, 3, 4, 10, 8, 9, 2]
}, {
type: 'line',
label: 'Dataset 2',
borderColor: window.chartColors.orange,
borderWidth: 2,
fill: false,
data: [8, 5, 2, 8, 7, 2, 6]
}, {
type: 'bar',
label: 'Dataset 3',
backgroundColor: window.chartColors.red,
stack: 'Stack 0',
data: [2, 4, 1, 3, 7, 3, 6],
borderColor: 'white',
borderWidth: 2
}, {
type: 'bar',
label: 'Dataset 4',
backgroundColor: window.chartColors.blue,
stack: 'Stack 0',
data: [7, 2, 4, 5, 6, 4, 2]
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Stacked Bar and Unstacked Line Combo Chart'
},
tooltips: {
mode: 'index',
intersect: true
},
scales: {
xAxes: [{
stacked: true,
}]
}
}
});
这是一个代码示例 ,显示它的外观。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.