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

Question

我使用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();

但到目前为止，这些都没有奏效。有什么办法能阻止这一切发生吗？

Answer 1

var myPieChart=null;

function drawChart(objChart,data){
    if(myPieChart!=null){
        myPieChart.destroy();
    }
    // Get the context of the canvas element we want to select
    var ctx = objChart.getContext("2d");
    myPieChart = new Chart(ctx).Pie(data, {animateScale: true});
}

Answer 2

几个小时前我也遇到过同样的问题。

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

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

msgstr"使用这个来销毁创建的任何图表实例。这将清除存储到Chart.js中图表对象的任何引用，以及由C附加的任何关联事件侦听器hart.js.”

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

Answer 3

我对此有很大的问题

首先我尝试了.clear（），然后我尝试了.destroy（），并尝试将图表引用设置为空

是什么最终解决了我的问题：删除

我的特定代码（显然有一百万种方法可以做到这一点）：

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