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

IT技术 javascript html charts chart.js
2021-03-07 00:14:37

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

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

6个回答

我在这方面遇到了很大的问题

首先我尝试.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);
};
好的！谢谢！我刚刚添加了 $('#results-graph').remove(); $('#graph-container').append('<canvas id="results-graph"><canvas>'); 在图表创建之前。
2021-04-19 00:14:37
像冠军一样工作。如果有人知道 Chart.js 版本 2 是否解决了这个问题，请在此处发布。我想知道销毁是否已损坏，或者我们是否使用不当。
2021-05-02 00:14:37
.destroy() 应该可以正常工作。如果没有，在调用 .destroy() 绘制新图表后，使用 setTimeout()
2021-05-10 00:14:37
这是唯一对我有用的解决方案，非常感谢，但是对于宽度和高度，如果您已经将它们设置为固定，您应该在重置功能中将它们重置为相同的值
2021-05-16 00:14:37
destroy() 使用 chartjs 2.8.0 对我来说失败了，但您的解决方案奏效了！就我而言，我只$('#results-graph').remove(); $('#graph-container').append('<canvas id="results-graph"><canvas>');在new Chart(document.getElementById("myCanvas")
2021-05-16 00:14:37

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

“.clear()”方法实际上清除了画布，但（显然）它使对象保持活跃和react。

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

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

它实际上做到了它声称的那样并且对我来说效果很好，我建议您尝试一下。

(<ChartInstance> this.chart).destroy();
2021-04-28 00:14:37
这是正确的答案。有关未来的参考，请参阅：stackoverflow.com/questions/40056555/...
2021-04-29 00:14:37
你能举个例子吗？我曾多次尝试使用阻塞，但它从未奏效。我总是收到该方法不存在的错误。
2021-04-30 00:14:37 
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});
}
不错的。谢谢
2021-05-02 00:14:37
这是最好的选择
2021-05-06 00:14:37

这是唯一对我有用的东西： 

document.getElementById("chartContainer").innerHTML = '&nbsp;';
document.getElementById("chartContainer").innerHTML = '<canvas id="myCanvas"></canvas>';
var ctx = document.getElementById("myCanvas").getContext("2d");

我在这里遇到了同样的问题......我尝试使用 destroy() 和 clear() 方法，但没有成功。

我用下一个方法解决了它：

HTML：

<div id="pieChartContent">
    <canvas id="pieChart" width="300" height="300"></canvas>
</div>

Javascript：

var pieChartContent = document.getElementById('pieChartContent');
pieChartContent.innerHTML = '&nbsp;';
$('#pieChartContent').append('<canvas id="pieChart" width="300" height="300"><canvas>');

ctx = $("#pieChart").get(0).getContext("2d");        
var myPieChart = new Chart(ctx).Pie(data, options);

它对我来说很完美......我希望它有帮助。

其它你可能感兴趣的问题
上一篇从Javascript中的数字中删除前导零 下一篇有没有一种正确的方法可以在 vuejs 中重置组件的初始数据？