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

我有一个使用

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

            });

        }
            });

---

所以请引导我。我哪里出了问题，或者有没有办法解决这个问题。谢谢

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

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

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

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

---

注意：确保

barGraph1

变量是全局可访问的

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

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

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

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

---

注意：确保

barGraph1

变量是全局可访问的

如果发送ajax请求，请制作一个工作小提琴。每次用户选择一个选项时？是的，我在用户选择这些按钮时发送了一个ajax请求我遇到的同一问题我通过在请求之前破坏图表并在响应之后重新创建图表来解决它回答您的问题？如果您发送ajax请求，请制作一个工作小提琴。每次用户选择一个选项时？是的，我在用户选择这些按钮时发送了一个ajax请求我遇到的同一问题我通过在请求之前破坏图表并在响应之后重新创建图表来解决它回答您的问题？它不是工作的兄弟。在初始化新图形之前，我已放置了您的代码。。！他们只有一张画布，在1、2个月内始终根据用户选择显示图形。默认情况下，它会显示所有时间数据，而不是它的工作兄弟。在初始化新图形之前，我已放置了您的代码。。！他们只有一张画布，在1、2个月内始终根据用户选择显示图形。默认情况下，它显示所有时间数据