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

Question

首先，I have made a short video to show exactly what I'm running into。

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

为了修复它，我在此处引用了许多其他线程以及 Chart.js 文档。在我的解决方案中：我已经指出要将指定的 Height/Width 添加到 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 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 2

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

当数据点靠近图表顶部时，图表会尝试根据 div 调整大小。由于图表位于较大的 canvas 中，将其放入自己的 div 中解决了这个问题。

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

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

Answer 3

我看到已经有一段时间没有人对此写过回复了 post。我通过应用两个东西解决了我的闪烁问题。

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

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

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

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

其次

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

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

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

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

Chart.js - Mouseover causes graphs to flicker and resize

javascript

jquery

chart.js2