销毁chart.js条形图以在同一<canvas>中重新绘制其他图形
销毁chart.js条形图以在同一<canvas>中重新绘制其他图形
提问于 2016-10-15 15:53:54
我正在使用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我调用这个函数，它使用相同的画布。
回答 20
Stack Overflow用户
发布于 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, { .... });Stack Overflow用户
发布于 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();
});Stack Overflow用户
发布于 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40056555
复制相关文章
相似问题