javascript - Chart.js - 鼠标悬停导致图形闪烁和调整大小

Question

开始，I have made a short video to show exactly what I'm running into .

总结视频:在使用 Chart.js (2.6.0) 时，我可以毫无问题地创建图表；但是当我将鼠标悬停在条形/点上时，图表将调整其元素的大小并闪烁。奇怪的是它完全不一致。有时当我刷新时，它根本没有这种行为；但是如果我将鼠标悬停在某个东西上并且它开始执行它，它不会停止，直到我再次刷新或关闭选项卡(这也与此不一致)。发生这种情况时，我不会更改代码中的任何内容，它会自行完成这一切。

为了修复它，我在此处引用了许多关于 SO 的其他线程以及 Chart.js 文档。在我的解决方案中:我已经指出要在创建图形的 Divs 和 Canvas 中添加指定的高度/宽度；设置Animation duration为0，Hover Animation duration为0，Responsive Animation duration为0；我确保响应设置为真，并保持纵横比保持为真，更改了工具提示模式……我已经尝试了所有这些，以及其他似乎几乎没有效果的小东西。

我被难住了!

这是我的图表代码之一(没有我如何获取 JSON 数据等，只是图表):

new Chart($("#runwayChart"), {
    type: "horizontalBar",
    data: {
        labels: runwayLabels,
        datasets: [{
            label: "Months Left", fill: true,
            backgroundColor: "#3333ff",
            borderColor: "#3333ff",
            data: score
        }, {
            label: "Expenses",
            fill: true,
            backgroundColor: "#aa2222",
            borderColor: "#aa2222",
            data: expenses
        }, {
            label: "Revenue",
            fill: true,
            backgroundColor: "#2222aa",
            borderColor: "#2222aa",
            data: revenues
        }]
    },
    options: {
        tooltips: {
            mode: 'index'
        },
        responsive: true,
        maintainAspectRatio: true,
        animation: {
            duration: 0,
        },
        hover: {
            animationDuration: 0,
        },
        responsiveAnimationDuration: 0
    }
});

如果你们能提供任何帮助，我将不胜感激!

谢谢 =)

Answer 1

我看到已经有一段时间没有人回答这个帖子了。我通过应用两件事解决了我的闪烁问题。

第一个 当我声明我使用的图表时:

var ctx = document.getElementById('图表').getContext('2d'); window.chart = new Chart(ctx, {}) ...

而不是 var chart = new Chart(ctx, {})..

通过这种方式，我们确保图表已附加到窗口中。对象。

其次

在绘制新图之前(例如数据更新)我们需要确保之前的 Canvas 已经被销毁。我们可以使用以下代码进行检查:

if(window.chart && window.chart !== null){ window.chart.destroy(); }