ChartJs线图在盘旋时重新出现故障

Question

我有以下代码利用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"));

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

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

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

Answer 1

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

myChart.destroy();

在线之前

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

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