javascript - ChartJs line chart repaint glitch while hovering over - Stack Overflow

admin管理员组

文章数量:1287887

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.

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.

• javascript
• jquery
• charts
• chart.js

Share Improve this question Follow asked May 5, 2015 at 16:26 ApathyBearApathyBear 9,6151515 gold badges5959 silver badges9090 bronze badges 9

• I think it'll work if you just re-use the old chart object instead of creating a new one in the event handler. You can also call myChart.destroy(); right before you create a new one, as an alternative. – Pointy Commented May 5, 2015 at 16:39
• How would I reuse the old chart object with new data? While the charts are the same, they have different types of data. Also, myChar.destroy(); seems to be duplicating my chart size after every event. Why is that happening? – ApathyBear Commented May 5, 2015 at 16:47
• I think just myChart.Line(graph1generator("week")); (or whatever you need to do for the new data). And instead of clearing the canvas with your code, let Chart do it: myChart.clear();. (That might work better than .destroy(); I'm not sure.) – Pointy Commented May 5, 2015 at 16:49
• While myChart.clear() doesn't duplicate the size, it still doesn't solve the glitch. Also, when change the object like myChart.Line(graph1generator("week"));, I get a ReferenceError: Can't find variable: graph1generator . That is strange since its a function defined 1 scope above (global scope). – ApathyBear Commented May 5, 2015 at 17:01
• Without seeing more code it's hard to know what's going on. Have you tried duplicating the issue in jsfiddle or CodePen or something? – Pointy Commented May 5, 2015 at 17:05

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 11

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.

本文标签： javascriptChartJs line chart repaint glitch while hovering overStack Overflow