悬停在折线图上会显示 chart.js 中的旧图表数据问题

Question

我有一个使用chart.js 的折线图。在这里，我有 3 个选项来显示他们的数据：所有时间、3 个月、1 个月。哪些工作正常。但问题是，每当用户选择 1 个月或 3 个月的数据图表并将鼠标光标悬停在图表线上时，它就会显示旧数据（所有时间）。

预期结果：图表不再有任何原始数据的痕迹，而是显示新数据，用户可以毫无问题地与之交互。

实际结果：图表显示新数据，但如果用户将鼠标悬停在图表上，它会在原始数据和新数据之间来回闪烁。

这是我的代码：

 $.ajax({
        url: "some_url_here,
        method: "GET",
        success: function(data) {
            var month = [];
            var customers = [];
            var data = JSON.parse(data);
            var margin = [];
            for(var i in data) {
                month.push( data[i].time);
                customers.push(data[i].profit);
                margin.push(data[i].exchnage);
            }
            var chartdata1 = {
                 labels: month,         
                datasets : [
                    {
                        label: 'monthly customers for Year 2016',
                        backgroundColor: 'rgba(255, 99, 132, 0.5)',
                        borderColor: 'rgb(255, 99, 132)',

                        data: customers,
                        lineTension: 0
                    }

                ]
            }; 

            var frame = $("#"+currcanvas);
var aR = null;  //store already returned tick
var ctx = document.getElementById(currcanvas).getContext('2d');
            var barGraph1 = new Chart(frame, {
                type: 'line',               
                data: chartdata1,
                options: {

           scales: {
         xAxes: [{
            ticks: {
               autoSkip: false,
               callback: function(e) {
                        if(e.match(/(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sept|Oct|Nov|Dec).*?\d+/g)!=null){
                        var tick = e.match(/(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sept|Oct|Nov|Dec).*?\d+/g)[0];
                  if (tick != aR) {
                     aR = tick;
                     return tick;
                  }
                  }
               }
            }
         }]
      },
                          responsive: true,
                          tooltips: {
                              /* bodyFontColor: "#000000",fontColor: "#000000", //#000000

    borderColor: 'rgba(255, 99, 132, 0.5)',
    backgroundColor: '#EEEEEE',*/
                           callbacks: {
                              afterBody: function(t, d) {
                                 return 'current profit/loss: ' + margin[t[0].index];
                              }
                           }
                        }
                       }

            });

        }
            });

所以请指导我。我哪里出错了，或者有什么办法可以解决这个问题。谢谢

Answer 1

因为，每次用户选择一个选项时，您都会初始化一个新的图表实例，因此您需要在初始化一个新实例之前销毁之前的图表实例。

为此，请在初始化图表之前添加以下内容...

// destroy previous instance of chart
barGraph1 && barGraph1.chart && barGraph1.chart.destroy();

// initialize chart
barGraph1 = new Chart(frame, {
         type: 'line',
         data: chartdata1,
         ...

注意：确保barGraph1 变量可全局访问