ChartJs折线图在重叠时重新出现毛刺

我有以下代码利用ChartJS库。

/*assume the tags in the right place */  var ctx = $("#graph1").get(0).getContext("2d"); var myChart = new Chart(ctx).Line(graph1Generator("day")); 

…一切正常，但在添加以下事件处理程序以清除并重新绘制具有不同数据的相同图表后，会出现故障。

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

这段代码确实使用新数据成功地重绘了图表，但是当我将鼠标hover在它上面时，它会对它应该清除的旧图表做一些非常奇怪的“闪回”。 这让我相信它并没有清除旧的。

Answer 1

这是你的小提琴的更新。 主要更改（除了修复函数名称拼写错误）是要添加

 myChart.destroy(); 

在线之前

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

.destroy()方法摆脱了事件处理程序注册等，因此当您将鼠标hover在图形上时，不应该看到那些奇怪的“鬼图”。