Линия ChartJs график Глюк перекрасить при наведении

у меня есть следующий код, использующий библиотеку 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"));

этот код успешно перерисовывает диаграмму с новыми данными, но когда я нависаю над ней, он делает некоторые очень странные "флешбэки" к старой диаграмме, которую он должен был очистить. Это заставляет меня поверить, что это не очистило старое. один.

1 ответов


вот обновление для вашей скрипки. основным изменением (кроме исправления опечатки имени функции) является добавление

myChart.destroy();

до строки

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

на .destroy() метод избавляется от регистраций обработчиков событий и т. д., Поэтому вы не должны видеть эти странные "призрачные диаграммы" при наведении мыши на графику.