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

Question

首先，我制作了一个简短的视频，以准确显示我所遇到的问题。

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

为了解决此问题，我在SO和Chart.js文档中引用了许多其他线程。在我的解决方案中：我已经指出要在Divs＆Canvas中添加指定的高度/宽度来创建图表；将动画持续时间设置为0，将悬停动画持续时间设置为0，将响应动画持续时间设置为0；我已经确保将Responsive设置为true，并保持“保持纵横比”为true，更改了工具提示模式...我已经尝试了所有这些方法，以及其他似乎几乎没有效果的小事情。

我很沮丧！

这是我的图表代码之一（不包括我如何获取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('chart').getContext('2d'); window.chart = new Chart(ctx, {}) ...

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

这样，我们确保将图表附加到窗口中。宾语。

其次

在绘制新图之前（例如，用于数据更新），我们需要确保先前的画布已被破坏。我们可以使用以下代码进行检查：

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

Answer 2

这实际上是一个非常简单且奇怪的解决方案。

当数据点接近图表顶部时，图表将尝试根据 div 调整大小。由于图表位于更大的画布中，因此将其放入自己的 div 中解决了这个问题。

<div>
    <canvas id="chart"></canvas>
</div>

像这样格式化它就是解决方案=）