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

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

Answer 1

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

myChart.destroy();

在

这样的行之前

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

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

ChartJs 折线图在悬停时重新绘制故障

ChartJs line chart repaint glitch while hovering over

javascript

jquery

charts

chart.js