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时长为0，Hover Animation时长为0，Responsive Animation时长为0；我确保 Responsive 设置为 true，并保持保持 Aspect Ratio 为 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>

像这样格式化是解决方案 =)

Answer 3

试试这个：

   var myLineChart = null;

           function createChart() {
               var ctx1 = document.getElementById("barcanvas").getContext("2d");
               myLineChart = new Chart(ctx1, {
                   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:
                       {
                           scales: {
                               xAxes: [{
                                   ticks: {
                                       callback: function (tick) {
                                           var characterLimit = 20;
                                           if (tick.length >= characterLimit) {
                                               return tick.slice(0, tick.length).substring(0, characterLimit - 1).trim() + '...';
                                           }
                                           return tick;
                                       }
                                   }
                               }]
                           },

                           tooltips: {
                               callbacks: {
                                   // We'll edit the `title` string
                                   title: function (tooltipItem) {
                                       // `tooltipItem` is an object containing properties such as
                                       // the dataset and the index of the current item

                                       // Here, `this` is the char instance

                                       // The following returns the full string
                                       return this._data.labels[tooltipItem[0].index];
                                   }
                               }
                           },

                           title:
                           {
                               display: true,
                               text: "Your Chart Title"
                           },
                           responsive: true,
                           maintainAspectRatio: true
                       }
               });
           }

Answer 4

我的 Angular 应用程序（angular v6 和 chartjs 2.9.4）也遇到了同样的问题。 在重绘图表之前添加延迟并销毁图表实例后解决了我的问题。

public redraw() {
    setTimeout(() => {
      if (this.chart && this.chart != null) {
        this.chart.destroy()
      }
      this.chart = new Chart(this.chartId, this.chartConfig);
    }, 500);
  }