Diagramma a linee di ChartJs ridisegnare il glitch mentre si passa il mouse su

Question

Ho il seguente codice che sfrutta la libreria ChartJS.

/*assume the tags in the right place */ 

<canvas id="graph1" width="300" height="300"></canvas> 

var ctx = $("#graph1").get(0).getContext("2d"); 
var myChart = new Chart(ctx).Line(graph1Generator("day")); 

... tutto funziona bene, ma dopo aver aggiunto il seguente gestore di eventi per cancellare e ridisegnare la stessa tabella con dati diversi, si verifica un problema tecnico.

weekButton.addEventListener("click", function(){ 
    ctx.clearRect (0, 0, 300, 300); 
    ctx.canvas.width = 300; 
    ctx.canvas.height = 300; 
    myChart = new Chart(ctx).Line(graph1Generator("week")); 

Questo codice non ridisegna correttamente il grafico con i nuovi dati, ma quando mi passa il mouse su di esso, lo fa alcuni molto strani "flashback" per il vecchio grafico che avrebbe dovuto cancellare. Questo mi fa credere che non ha cancellato il vecchio.

Answer 1

Here is an update to your fiddle. Il cambiamento primario (diverso da quello che fissa il nome di errore di battitura di funzione) è quello di aggiungere

myChart.destroy(); 

prima linea come

myChart = new Chart(ctx).Line(...); 

Il metodo .destroy() si sbarazza delle registrazioni del gestore di eventi, ecc, in modo da non dovresti vedere quegli strani "grafici fantasma" quando passi il mouse sopra la grafica.