Question

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

总结视频：使用Chart.js（2.6.0）时，我可以毫无问题地创建我的图表;但当我将鼠标悬停在条形/点上时，图表将调整其元素的大小并闪烁。奇怪的是，它完全不一致。有时当我刷新时，它根本就没有这种行为;但如果我将鼠标悬停在某个东西上并开始这样做，它就会停止，直到我再次刷新或关闭标签（这也与此不一致）。

，当发生这种情况时，我不会改变代码中的任何内容。

为了解决这个问题，我在SO上引用了许多其他线程，以及Chart.js文档。在我的解决方案中：我已经指出了为Divs＆amp;添加指定的高度/宽度。画布创建图形;将“动画”持续时间设置为0，将“悬停动画”持续时间设置为0，将“响应动画”持续时间设置为0;我已经确保将响应设置为真，并保持纵横比保持为真，改变了工具提示模式...我已经尝试了所有这些，以及其他似乎没有什么的小事情。 - 没效果。

我很难过！

这是我的一张图表＆＃39;代码（没有我如何抓取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);
  }

Chart.js - Mouseover导致图形闪烁并调整大小

4 个答案: