Schwebendes Liniendiagramm zeigt altes Diagrammdatenproblem in chart.js

Question

Ich habe ein Liniendiagramm mit chart.js. Hier habe ich 3 Möglichkeiten, um ihre Daten anzuzeigen: Alle Zeit, 3 Monate, 1 Monat. die gut funktionieren. Aber das Problem ist, wenn der Benutzer ein Monat oder ein 3-Monats-Diagramm auswählt und den Mauszeiger über die Linien des Graphen bewegt, dann zeigt er alte Daten an (All time).

Erwartetes Ergebnis: Das Diagramm enthält keine Spuren von Originaldaten mehr, sondern zeigt neue Daten an und der Benutzer kann ohne Probleme mit ihm interagieren.

Tatsächliches Ergebnis: Diagramm zeigt neue Daten, aber wenn ein Benutzer über das Diagramm schwebt, flackert es zwischen ursprünglichen und neuen Daten hin und her.

Hier ist mein Code:

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

      }); 

     } 
      }); 

Also bitte mich leiten. wo ich falsch liege oder gibt es irgendeine Möglichkeit, dieses Problem zu beheben. Danke

Answer 1

Da initialisieren Sie eine neue Instanz des Diagramms jedes Mal, wenn der Benutzer eine Option auswählt, daher müssen Sie die vorherige Instanz des Diagramms vor dem Initialisieren eines neuen Diagramms zerstören.

so zu erreichen, fügen Sie die folgenden Informationen, bevor Ihr Diagramm ...

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

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

note Initialisierung: stellen Sie sicher, barGraph1 Variable global zugänglich ist