尝试在每个条形图的顶部绘制值。为什么每次鼠标悬停在不同的栏上时文本都在 Flink ?我该怎么做才能消除这个问题?
https://jsfiddle.net/wbpxemnh/
const ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
data: {
labels: ['21Q1','21Q2','21Q3','21Q4','22Q1','22Q2','22Q3','22Q4',],
datasets: [
{
type: 'bar',
label: 'Y Value',
data: [2,3,4,4,5,7,5,4,],
borderWidth: 1,
backgroundColor: '#1E77E5',
},
],
},
options: {
responsive: true,
animation: {
onComplete: function ({chart}) {
const ctx = chart.ctx;
ctx.textAlign = 'center';
ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.textBaseline = 'bottom';
ctx.fillStyle = "#ffffff";
// Loop through each data in the datasets
this.data.datasets.forEach(function (dataset, i) {
var meta = chart.getDatasetMeta(i);
if(meta.hidden == null)
{
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar.x, bar.y - 5);
});
}
});
}
},
}
});
1条答案
按热度按时间t3psigkw1#
这是因为它仅在动画完成后运行。要实现你想要的,你需要使用一个自定义插件。
已经有一个定制的插件,您可以用途:https://chartjs-plugin-datalabels.netlify.app/