我这里有一个简单的 ChartJS 条形图 - https://jsfiddle.net/e8n4xd4z/1037/
我使用 onComplete 函数在条形图中显示金额。
当我将鼠标悬停在栏上时，数字会闪烁。
任何人都可以看到或知道为什么会发生这种情况吗？
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
最佳答案
将 onComplete 更改为 onProgress 似乎可以解决此问题。
animation: {
onProgress: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.fillStyle = "white";
ctx.font = "600 30px Helvetica";
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach((dataset) => {
for (var i = 0; i < dataset.data.length; i++) {
for(var key in dataset._meta)
{
var model = dataset._meta[key].data[i]._model;
ctx.fillText(dataset.data[i], model.x, model.y + 50);
}
}
});
至于数字消失，图表上的文本似乎在调整大小时没有被重新绘制。因此，您需要在调整窗口大小时重新渲染它。
可以通过使用窗口的 onresize 事件并再次渲染图表来修复此问题。
window.onresize = function(event) {
new Chart(ctx, options);
};
关于javascript - 条形图上的 Chartjs 数字在悬停时闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46565747/