如何从画布中清除图表，以便无法触发悬停事件？

javascript html charts chart.js

2022-08-30 04:21:49

我正在使用Chartjs来显示折线图，这工作正常：

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

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

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

这工作正常。但是，当我将鼠标悬停在新图表上时，如果我碰巧越过与旧图表上显示的点相对应的特定位置，则仍会触发悬停/标签，并且突然可以看到旧图表。当我的鼠标位于此位置时，它仍然可见，并在移出该点时消失。我不希望显示旧图表。我想完全删除它。

在加载新图表之前，我已尝试清除画布和现有图表。喜欢：

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

和

chart.clear();

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

答案 1

我对此有很大的问题

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

最终为我解决了这个问题：删除元素，然后将新元素重新附加到父容器中<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);
};

答案 2

几个小时前，我遇到了同样的问题。

“.clear（）”方法实际上清除了画布，但是（显然）它使对象保持活动状态和反应性。

仔细阅读官方文档，在“高级用法”部分中，我注意到方法“.destroy（）”，描述如下：

“使用它来销毁创建的任何图表实例。这将清理存储在 Chart.js 中的图表对象的任何引用，以及 Chart.js 附加的任何关联事件侦听器。

它实际上做到了它所声称的，它对我来说效果很好，我建议你试一试。