如何清除canvas中的图表，以便hover事件不会被触发？

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

// get line chart canvas var targetCanvas = document.getElementById('chartCanvas').getContext('2d'); // draw line chart var chart = new Chart(targetCanvas).Line(chartData); 

但是，当我尝试更改图表的数据时发生问题。 我通过用新的数据点创build图表的新实例来更新图表，并因此重新初始化canvas。

这工作正常。 但是，当我将鼠标hover在新图表上时，如果碰巧遇到与旧图表上显示的点相对应的特定位置，hover/标签仍会被触发，并且突然显示旧图表。 当我的鼠标在这个位置时它仍然可见，当离开那个点时消失。 我不希望旧的图表显示。 我想完全删除它。

我已经尝试清除canvas和现有的图表之前加载新的。 喜欢：

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

和

 chart.clear(); 

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

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

Answer 2

几个小时前我也面临同样的问题。

“.clear（）”方法实际上清除了canvas，但是（显然）它使对象保持活动和被动。

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

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

它实际上做它所声称的，它为我工作得很好，我build议你试试看。

Answer 3

 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 4

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

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

Answer 5

我在这里有同样的问题…我试图使用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); 

它对我来说是完美的…我希望它有帮助。

Answer 6

这对我来说工作得很好

  var ctx = $("#mycanvas"); var LineGraph = new Chart(ctx, { type: 'line', data: chartdata}); LineGraph.destroy(); 

使用.destroy这个来销毁任何创build的图表实例。 这将清除Chart.js中存储到chart对象的所有引用，以及由Chart.js附加的任何关联的事件侦听器。 这必须在canvas重新用于新图表之前调用。

Answer 7

使用CanvasJS，这对清除图表和其他所有东西都起作用，可能也适用于你，在每次处理其他地方之前，允许你完全设置你的canvas/图表。

 var myDiv= document.getElementById("my_chart_container{0}"; myDiv.innerHTML = ""; 

Answer 8

当您创build一个新的chart.jscanvas时，这将生成一个新的隐藏的iframe，您需要删除canvas和旧的iframe。

 $('#canvasChart').remove(); $('iframe.chartjs-hidden-iframe').remove(); $('#graph-container').append('<canvas id="canvasChart"><canvas>'); var ctx = document.getElementById("canvasChart"); var myChart = new Chart(ctx, { blablabla }); 

参考： https ： //github.com/zebus3d/javascript/blob/master/chartJS_filtering_with_checkboxs.html

Answer 9

我们可以在Chart.js V2.0中更新图表数据，如下所示：

 var myChart = new Chart(ctx, data); myChart.config.data = new_data; myChart.update(); 

Answer 10

对我来说，这工作：

  var in_canvas = document.getElementById('chart_holder'); //remove canvas if present while (in_canvas.hasChildNodes()) { in_canvas.removeChild(in_canvas.lastChild); } //insert canvas var newDiv = document.createElement('canvas'); in_canvas.appendChild(newDiv); newDiv.id = "myChart"; 

Answer 11

我无法让.destroy（）工作，所以这就是我正在做的。 chart_parent div是我希望canvas显示的位置。 我需要canvas来调整每一次，所以这个答案是上面的一个扩展。

HTML：

<div class="main_section" > <div id="chart_parent"></div> <div id="legend"></div> </div>

JQuery的：

  $('#chart').remove(); // this is my <canvas> element $('#chart_parent').append('<label for = "chart">Total<br /><canvas class="chart" id="chart" width='+$('#chart_parent').width()+'><canvas></label>'); 

Answer 12

Chart.js有一个bug： Chart.controller(instance)在全局属性Chart.instances[]注册任何新图表，并从.destroy()上的这个属性中删除它。

但在图表创buildChart.js也写入._meta属性到数据集variables：

 var meta = dataset._meta[me.id]; if (!meta) { meta = dataset._meta[me.id] = { type: null, data: [], dataset: null, controller: null, hidden: null, // See isDatasetVisible() comment xAxisID: null, yAxisID: null }; 

并且它不会删除destroy()上的这个属性。

如果您在不删除._meta property情况下使用旧的数据集对象，则Chart.js会将新数据集添加到._meta而不删除以前的数据。 因此，在每个图表重新初始化时，您的数据集对象会累积所有以前的数据。

为了避免这种情况，请在调用Chart.destroy()之后销毁数据集对象。