ChartJs 折线图在悬停时重新绘制故障 [英] ChartJs line chart repaint glitch while hovering over

问题描述

我有以下利用 ChartJS 库的代码.

I have the following code leveraging the ChartJS library.

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

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

... everything works fine, but after adding the following event handler to clear and repaint the same chart with different data, a glitch occurs.

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

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

This code does successfully redraw the chart with the new data, but when I hover over it, it does some very strange "flashbacks" to the old chart that it was supposed to clear. This makes me believe that it didn't clear the old one.

推荐答案

这是您的小提琴的更新. 主要变化(除了修复函数名称错别字)是添加

Here is an update to your fiddle. The primary change (other than fixing the function name typo) is to add

myChart.destroy();

像之前的行

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

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

The .destroy() method gets rid of the event handler registrations etc, so you shouldn't see those weird "ghost charts" when you mouse over the graphics.

这篇关于ChartJs 折线图在悬停时重新绘制故障的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！