javascript - 如何从 Canvas 中清除图表以便无法触发悬停事件？

Question

我正在使用 Chartjs 显示折线图，效果很好:

// get line chart canvas
var targetCanvas = document.getElementById('chartCanvas').getContext('2d');

// draw line chart
var chart = new Chart(targetCanvas).Line(chartData);

但是当我尝试更改图表的数据时出现问题。我通过使用新数据点创建图表的新实例来更新图表，从而重新初始化 Canvas 。

这很好用。但是，当我将鼠标悬停在新图表上时，如果我碰巧经过与旧图表上显示的点相对应的特定位置，悬停/标签仍然会被触发，并且突然可以看到旧图表。当我的鼠标位于该位置时，它仍然可见，离开该点时它会消失。我不想显示旧图表。我想完全删除它。

在加载新图表之前，我尝试清除 Canvas 和现有图表。喜欢:

targetCanvas.clearRect(0,0, targetCanvas.canvas.width, targetCanvas.canvas.height);

和

chart.clear();

但到目前为止，这些都没有奏效。关于如何阻止这种情况发生的任何想法？

Answer 1

我遇到了很大的问题

首先我尝试了 .clear()然后我试了.destroy()我尝试将我的图表引用设置为 null

最终为我解决了问题:删除 <canvas>元素，然后重新附加一个新的 <canvas>到父容器

---

我的具体代码(显然有一百万种方法可以做到这一点):

var resetCanvas = function(){
  $('#results-graph').remove(); // this is my <canvas> element
  $('#graph-container').append('<canvas id="results-graph"><canvas>');
  canvas = document.querySelector('#results-graph');
  ctx = canvas.getContext('2d');
  ctx.canvas.width = $('#graph').width(); // resize to parent width
  ctx.canvas.height = $('#graph').height(); // resize to parent height
  var x = canvas.width/2;
  var y = canvas.height/2;
  ctx.font = '10pt Verdana';
  ctx.textAlign = 'center';
  ctx.fillText('This text is centered on the canvas', x, y);
};