ChartJs折线图重写的毛刺，而悬停在 [英] ChartJs line chart repaint glitch while hovering over

问题描述

我有以下代码利用ChartJS库。

  / *假定标记位于正确的位置* / 
 
< canvas id =graph1 width =300height =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 （week））; 
  

此代码确实成功地重绘了新数据的图表，我把鼠标悬停在它上面，它对旧图表做了一些非常奇怪的闪回，它应该清除，这使我相信它没有清除旧的图表。

解决方案

这是您的小提琴的更新主要更改（除了修正函数名typo）是添加

  myChart.destroy（）; 
   $ b         新图表（ctx）.Line（...）; 
  

.destroy（）的事件处理程序注册等，所以你不应该看到那些古怪的鬼图，当你鼠标在图形上。

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

before lines like

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

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屋！