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

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中添加指定的高度/宽度来创建图形;将“动画”持续时间设置为0，将“悬停动画”持续时间设置为0，将“响应动画”持续时间设置为0;我确保将Responsive设置为true，并保持Maintain Aspect Ratio为真，改变了工具提示模式......我已经尝试了所有这些，以及其他似乎没有什么影响的小事。

我很难过！

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