我正在使用Chart.js库绘制条形图,它工作得很好,但是现在我想销毁条形图,并在相同的代码画布<>e29>中创建一个线形图代码。我尝试了以下两种方法来清理画布:
var grapharea = document.getElementById("barChart").getContext("2d");
grapharea.destroy();
var myNewChart = new Chart(grapharea, { type: 'radar', data: barData, options: barOptions });
第二种方式:
var grapharea = document.getElementById("barChart").getContext("2d");
grapharea.clear();
var myNewChart = new Chart(grapharea, { type: 'radar', data: barData, options: barOptions });
我说得对吗?OnButtonClick我调用这个函数,它使用相同的画布。
发布于 2017-10-05 19:50:36
在每次图表调用后删除画布,这对我很有效
$("canvas#chartreport").remove();
$("div.chartreport").append('<canvas id="chartreport" class="animated fadeIn" height="150"></canvas>');
var ctx = document.getElementById("chartreport").getContext("2d");
chartreport= new Chart(ctx, { .... });
发布于 2018-05-28 18:14:27
对于ChartJS v2.x,您可以使用更新图表数据,而无需显式地销毁和创建画布。
var chart_ctx = document.getElementById("chart").getContext("2d");
var chart = new Chart(chart_ctx, {
type: "pie",
data: {},
options: {}
});
$.ajax({
...
}).done(function (response) {
chart.data = response;
chart.update();
});
发布于 2019-03-17 14:02:01
也许有更好的方法,但没有适合我的答案。
document.querySelector("#chartReport").innerHTML = '<canvas id="myChart"></canvas>';
我的HTML部分是
<div class="col-md-6 col-md-offset-3">
<div id="chartReport">
<canvas id="myChart"></canvas>
</div>
</div>
https://stackoverflow.com/questions/40056555
复制相似问题