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

回答(13)

2 years ago

我有很大的问题

首先我尝试了 .clear() 然后我尝试了 .destroy() 并尝试将我的图表引用设置为null

最后为我解决了什么问题：删除 元素，然后将新的 重新上传到父容器

我的具体代码(显然有一百万种方法可以做到这一点)：

var resetCanvas = function(){

$('#results-graph').remove(); // this is my element

$('#graph-container').append('');

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

};

2 years ago

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

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

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

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

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

2 years ago

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

}

2 years ago

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

document.getElementById("chartContainer").innerHTML = ' ';

document.getElementById("chartContainer").innerHTML = '';

var ctx = document.getElementById("myCanvas").getContext("2d");

2 years ago

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

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

HTML：

使用Javascript：

var pieChartContent = document.getElementById('pieChartContent');

pieChartContent.innerHTML = ' ';

$('#pieChartContent').append('');

ctx = $("#pieChart").get(0).getContext("2d");

var myPieChart = new Chart(ctx).Pie(data, options);

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

2 years ago

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附加的任何关联事件侦听器 . 必须在将画布重新用于新图表之前调用此方法 .

2 years ago

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

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

myDiv.innerHTML = "";

2 years ago

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

HTML：

JQuery的：

$('#chart').remove(); // this is my element

$('#chart_parent').append('Total

');

2 years ago

当您创建一个新的chart.js画布时，会生成一个隐藏的新iframe，您需要删除画布和旧的iframe .

$('#canvasChart').remove();

$('iframe.chartjs-hidden-iframe').remove();

$('#graph-container').append('');

var ctx = document.getElementById("canvasChart");

var myChart = new Chart(ctx, { blablabla });

2 years ago

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

var myChart = new Chart(ctx, data);

myChart.config.data = new_data;

myChart.update();

2 years ago

对我来说，这工作：

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

2 years ago

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

2 years ago

这对我有用 . 在updateChart()的顶部添加对clearChart的调用

`function clearChart() {

event.preventDefault();

var parent = document.getElementById('parent-canvas');

var child = document.getElementById('myChart');

parent.removeChild(child);

parent.innerHTML ='';

return;

}`