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

Here is an update to your fiddle.主要的变化（除了修复函数名拼写错误）是添加

myChart.destroy();

在行之前

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

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