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（）方法消除了事件处理程序注册等，因此当您将鼠标移到图形上时，您不应该看到那些奇怪的“幻影图表”。