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

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

我有很大的问题

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

Answer 2

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

".clear()"方法实际上清除了画布,但(显然)它使对象保持活跃和反应.

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

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

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

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 = ' ';
document.getElementById("chartContainer").innerHTML = '<canvas id="myCanvas"></canvas>';
var ctx = document.getElementById("myCanvas").getContext("2d");

Answer 5

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

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

Answer 6

我在这里遇到了同样的问题...我尝试使用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);

它对我来说很完美……我希望对您有所帮助。

Answer 7

这对我来说很好

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

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

Answer 8

最好使用 Chart.js 特定功能来初始检查现有图表实例，然后执行销毁或清除，以便重用相同的画布元素来渲染另一个图表，而不是从 JS 中处理 HTML 元素。

ChartJs 的getChart(key) - 从给定的键查找图表实例。

• 如果键是字符串，则它被解释为图表的 Canvas 元素的 ID。
• 键也可以是 CanvasRenderingContext2D 或 HTMLDOMElement。

注意：如果没有找到图表，这将返回未定义。如果找到图表的实例，则表明该图表必须是先前创建的。

// JS - Destroy exiting Chart Instance to reuse <canvas> element
let chartStatus = Chart.getChart("myChart"); // <canvas> id
if (chartStatus != undefined) {
  chartStatus.destroy();
        //(or)
 // chartStatus.clear();
}
//-- End of chart destroy   

var chartCanvas = $('#myChart'); //<canvas> id
chartInstance = new Chart(chartCanvas, {
  type: 'line',
  data: data
});

<!-- HTML -Line Graph - Chart.js -->
<div class="container-fluid" id="chartContainer">
  <canvas id="myChart" width="400" height="150">   </canvas>
</div>

这种方法可以让您免于从 JS 内部删除 - 创建 - 将 Canvas 元素附加到 DIV 中。