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

13 回答

• 23

  我有很大的问题

  首先我尝试了 .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);
  };
  

  回复于 2024-05-06T00:42:54+08:00
• 100

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

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

  仔细阅读the official documentation，在"Advanced usage"部分，我注意到方法".destroy()"，描述如下：

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

  它实际上做了它声称的，它对我来说很好，我建议你尝试一下 .

  回复于 2024-05-06T00:42:54+08:00
• 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});
  }
  

  回复于 2024-05-06T00:42:54+08:00
• 31

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

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

  回复于 2024-05-06T00:42:54+08:00
• 0

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

  我在下一个方面解决了它：

  HTML：

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

  使用Javascript：

  var pieChartContent = document.getElementById('pieChartContent');
  pieChartContent.innerHTML = ' ';
  $('#pieChartContent').append('<canvas id="pieChart" width="300" height="300"><canvas>');
  
  ctx = $("#pieChart").get(0).getContext("2d");        
  var myPieChart = new Chart(ctx).Pie(data, options);
  

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

  回复于 2024-05-06T00:42:54+08:00
• 0

  This worked very well for me

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

  使用 .destroy this来销毁创建的任何图表实例 . 这将清除Chart.js中存储到图表对象的任何引用，以及Chart.js附加的任何关联事件侦听器 . 必须在将画布重新用于新图表之前调用此方法 .

  回复于 2024-05-06T00:42:54+08:00
• 1

  使用CanvasJS，这适用于清除图表和其他所有内容，也适用于您，允许您在其他地方处理前完全设置画布/图表：

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

  回复于 2024-05-06T00:42:54+08:00
• 4

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

  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
  <canvas class="chart" id="chart" width='+$('#chart_parent').width()+'><canvas></label>');
  

  回复于 2024-05-06T00:42:54+08:00
• 1

  当您创建一个新的chart.js画布时，会生成一个隐藏的新iframe，您需要删除画布和旧的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

  回复于 2024-05-06T00:42:54+08:00
• 9

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

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

  回复于 2024-05-06T00:42:54+08:00
• 1

  对我来说，这工作：

  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";
  

  回复于 2024-05-06T00:42:54+08:00
• 4

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

  但是在图表创建时，Chart.js还会将 ._meta 属性写入数据集变量：

  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() 之后销毁数据集对象 .

  回复于 2024-05-06T00:42:54+08:00
• 0

  这对我有用 . 在updateChart（）的顶部添加对clearChart的调用

  `function clearChart() {
      event.preventDefault();
      var parent = document.getElementById('parent-canvas');
      var child = document.getElementById('myChart');          
      parent.removeChild(child);            
      parent.innerHTML ='<canvas id="myChart" width="350" height="99" ></canvas>';             
      return;
  }`
  

  回复于 2024-05-06T00:42:54+08:00