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变量可全局访问

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

1 个答案: