Wykres linii ChartJs odmalowuje błąd podczas unoszenia się nad

Question

Mam następujący kod wykorzystujący bibliotekę 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")); 

... wszystko działa poprawnie, ale po dodaniu następujące obsługi zdarzeń, aby wyczyścić i pomalować ten sam wykres z różnymi danymi, wystąpi usterka.

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")); 

Kod ten jest z powodzeniem przerysować wykres z nowymi danymi, ale kiedy unoszą się nad nim, to jednak pewne bardzo dziwne „retrospekcje” starego wykresu, że miało to wyczyścić. To sprawia, że ​​wierzę, że nie oczyściło starego.

Answer 1

Here is an update to your fiddle. Podstawowa zmiana (inne niż ustalenia nazwa funkcji literówkę) jest dodanie

myChart.destroy(); 

przed liniami jak

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

Sposób .destroy() pozbywa się rejestracjami obsługi zdarzeń itp, więc nie powinieneś widzieć tych dziwnych "wykresów duchów" po najechaniu myszą na grafikę.