我有一个包含条形和折线的图表。折线数据正确,但似乎聚合了折线值 放置折线图时在同一类别中出现了问题。我以为是因为y轴stacked=true,但我无法将此属性设置为false。由于条形图的原因,y轴必须stacked=true。如何解决此问题?
const barData = {
labels: lblList,
datasets: [
{
label: 'GP Hedef',
backgroundColor: 'rgb(12,0,0)',
type: 'line',
borderDash: [10],
data: mList,
fill: false,
borderWidth: 2,
borderColor: 'rgb(12,0,0)',
spanGaps: true,
fullWidth: false
},
{
label: 'MOM Hedef',
backgroundColor: 'rgba(122, 17, 17, 1)',
type: 'line',
borderDash: [10],
data: hList,
fill: false,
borderWidth: 2,
borderColor: 'rgba(122, 17, 17, 1)',
spanGaps: true,
fullWidth: false
},
{
categoryPercentage:0.2,
data: gList,
backgroundColor: cGList,
maxBarThickness: 12,
borderWidth: 1,
label: 'GP',
stack: 1
},
{
label: 'Process',
data: pList,
backgroundColor: cPList,
borderWidth: 1,
maxBarThickness: 25,
stack:2
},
{
label: 'Waiting',
data: wList,
backgroundColor: cWList,
borderWidth: 1,
maxBarThickness: 25,
stack:2
},
{
data: tList
}
]
}
new Chart(ctx0, {
type: 'bar',
data: barData,
options: {
tooltips: {
displayColors: false,
backgroundColor: 'rgb(150, 50, 0)',
titleFontColor: 'rgb(255, 255, 255)',
bodyFontColor: 'rgb(255, 255, 255)',
callbacks: {
title: function (tooltipItem, data) {
return;
},
label: function (tooltipItem, data) {
const label = data.datasets[tooltipItem.datasetIndex].label;
const cycle = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return label + ': ' + cycle + ' sn';
}
}
},
legend: {
display: false
},
title: {
display: true,
text: 'İstasyon Çevrim Süreleri',
fontSize: 20
},
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});
enter image description here
在这种情况下,黑线正确地放置在y轴上,但另一条线必须放置在y轴上的23处。看起来像棕色线放置在y轴上的41处,即23+18。
我需要将棕色线放置在23中(当然在这种情况下,位置会根据数据的内容而改变)。
2条答案
按热度按时间roqulrg31#
这是因为您堆叠了Y轴,所以数据堆叠在其他数据的顶部,从而按照您所注意到的那样添加。要获得您想要的行为,您需要删除配置的这一部分:
lsmepo6l2#
我解决了这个问题,方法是为我希望在y轴堆叠的条形图提供堆叠ID(不要为我不希望堆叠的折线图给予ID),并删除“yAxes:[{堆叠:false}]“。以下是代码: