我在角6中使用chart.js创建了3个堆叠的垂直条形图,它上面有3个图例,当我单击一个图例时,将显示另外2个堆叠的条形图,其中一个会隐藏,但是问题是,下一个条形图的值将与上一个条形图重叠。可能是什么问题?请帮助我
public barChartOptions: any = {
animationEasing: 'easeInCirc',
animationSteps: 80,
scaleShowVerticalLines: false,
responsive: true,
maintainAspectRatio: false,
showTooltips: true,
legend: {
position: 'bottom'
},
showInlineValues : true,
scales: {
xAxes: [{
stacked: true,
ticks: {
autoSkip: false,
beginAtZero: true,
callback: function(t) {
var maxLabelLength = 15;
if (t.length > maxLabelLength) return t.substr(0, maxLabelLength) + '...';
else return t;
}
},
gridLines: {
display:false,
}
}],
yAxes: [{
stacked: true,
gridLines: {
display:false,
right:'17%'
}, ticks: {
display: false,
beginAtZero: true,
min: 0,
max:15,
stepSize: 1
}
},
]
},
tooltips: {
callbacks: {
title: function(t, d) {
return d.labels[t[0].index];
}
},
mode: 'index',
intersect: false
},
hover: {
animationDuration: 0,
mode: 'index',
intersect: false
},
animation: {
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fontColor = "#fff";
ctx.fillStyle = "#fff";
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
if (chartInstance.data.datasets[i].data[index] !== 0) {
ctx.save();
ctx.fillText(data, bar._model.x, bar._model.y + 16);
ctx.fillText(dataset.data[index], 0, 0);
ctx.restore();
}
});
});
}
}
};