Javascript ChartJS Aktualisierung Diagramm und Leinwand dauerhaft

Question

Ich habe ein Diagramm in ChartJS und ich möchte es mit neuen Daten basierend auf was der Benutzer wählt aus einer Dropdown-Liste, mit der gleichen Leinwand zu aktualisieren. Das Problem ist, wenn ich die Update-Funktion, das Diagramm mit den neuen Daten aktualisiert, aber es kommt immer wieder auf das ursprüngliche Diagramm nach einer Weile. Wie kann ich das lösen? Hier ist der Code, danke für jede Hilfe:

/* Original Chart */ 
var ctx3 = document.getElementById("canvas3").getContext("2d"); 

var canvas3 = new Chart(ctx3, { 
    type: 'line', 
    data: { 
     labels: stationRentalsLabels, 
     datasets: [{ 
      label: 'Wypożyczenia', 
      fillColor: "rgba(220,280,220,0.5)", 
      strokeColor: "rgba(220,220,220,1)", 
      backgroundColor: "rgba(153,255,51,0.4)", 
      data: stationRentalsData 
     }] 
    } 
}); 

/* event listener on drop-down list, when triggered, update chart */ 
select.addEventListener('change', function() { 
    updateChart() 
}); 

/* Update Chart */ 
function updateChart() { 
    var stationRentalsHoursTemp = []; 
    var stationRentalName = []; 

    var determineHour = selectNumber.options[selectNumber.selectedIndex].innerHTML; 
    for (var i = 0; i < stationRentalsHours.length; i++) { 
     if (determineHour == stationRentalsHours[i]) { 
      stationRentalsHoursTemp.push(stationRentalsData[i]) 
      stationRentalName.push(stationRentalsLabels[i]); 
     } 
    } 

    /* Updated Chart */ 
    var ctx3 = document.getElementById("canvas3").getContext("2d"); 
    var canvas3 = new Chart(ctx3, { 
     type: 'line', 
     data: { 
      labels: stationRentalName, 
      datasets: [{ 
       label: 'Wypożyczenia', 
       fillColor: "rgba(220,280,220,0.5)", 
       strokeColor: "rgba(220,220,220,1)", 
       backgroundColor: "rgba(153,255,51,0.4)", 
       data: stationRentalsHoursTemp 
      }] 
     } 
    }); 
} 

Answer 1

Sie schaffen neue Tabelle auf Update-Funktion in der gleichen div wie zuvor, aber um das zu tun, dass Sie die vorherige Instanz des Diagramms zerstören müssen durch den anruf Zerstöre die Funktion vor dem Aufruf der Funktion updateChart.

canvas3.destroy();

Ein weiterer Ansatz, Ihr Problem zu lösen, ist durch die Daten ersetzt nicht das Diagramm selbst wenn die updateChart Funktion durch Aufrufen der Update-Funktion aufgerufen wird (nicht ein neues Diagramm Initialisieren)

function updateChart() { 
    var stationRentalsHoursTemp = []; 
    var stationRentalName = []; 

    var determineHour = selectNumber.options[selectNumber.selectedIndex].innerHTML; 
    for (var i = 0; i < stationRentalsHours.length; i++) { 
     if (determineHour == stationRentalsHours[i]) { 
      stationRentalsHoursTemp.push(stationRentalsData[i]) 
      stationRentalName.push(stationRentalsLabels[i]); 
     } 
    } 
    // just update the label and dataset not the entire chart 
    canvas3.data.labels = stationRentalName; 
    canvas3.data.datasets[0].data = stationRentalsHoursTemp; 
    canvas3.update(); 

}