ChartJs çizgi grafiği

Question

üzerinde gezinirken glitch'i yeniden çizme ChartJS kütüphanesinden yararlanan aşağıdaki koda sahibim.

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

... her şey iyi çalışır, ancak temizlemek ve farklı veri ile aynı grafiği yeniden boyamak için aşağıdaki olay işleyicisi ekledikten sonra, bir aksaklık meydana gelir.

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

Bu kodu başarıyla yeni verilerle grafiği yeniden çizmek, ama ben üzerine geldiklerinde, onu temizlemek gerekiyordu o eski grafiğe bazı çok garip "flashback" yapar. Bu, eski olanı temizlemediğine inanmamı sağlıyor.

Answer 1

Here is an update to your fiddle. (işlev adı yazım hatası tespit dışında), birincil bir değişiklik, bu yüzden

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

.destroy() yöntemi vb olay giderici kayıt kurtulur gibi hatları önce

myChart.destroy(); 

eklemektir Grafiklerin üzerine farenizi koyduğunuzda bu tuhaf "hayalet çizelgeleri" ni görmemelisiniz.