Question

我这里有一个简单的chartjs条形图 - https://jsfiddle.net/e8n4xd4z/1037/

我使用onComplete函数在条形图中显示金额。

当我将鼠标悬停在栏上时，数字会闪烁。

任何人都可以看到或知道为什么会这样吗？

<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

Answer 1

将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);
};

条形图上的Chartjs数字在悬停时闪烁

1 个答案: