我正在使用Chart.js库绘制条形图，它工作正常，但现在我想销毁条形图并在同一画布中制作折线图。我已经尝试过这两种方法来清除画布：
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 我调用这个使用相同画布的函数。
为了能够在同一画布上绘制另一个图表，正确的使用方法是.destroy(). 您必须在先前创建的图表对象上调用它。您也可以对两个图表使用相同的变量。
var grapharea = document.getElementById("barChart").getContext("2d");
var myChart = new Chart(grapharea, { type: 'bar', data: barData, options: barOptions });
myChart.destroy();
myChart = new Chart(grapharea, { type: 'radar', data: barData, options: barOptions });
直接来自文档（在原型方法下）：
。破坏（）
使用它来销毁创建的任何图表实例。这将清除 Chart.js 中存储到图表对象的所有引用，以及 Chart.js 附加的任何关联事件侦听器。这必须在画布重新用于新图表之前调用。
// Example from the docs
var myLineChart = new Chart(ctx, config);
// Destroys a specific chart instance
myLineChart.destroy();
它明确指出必须先调用此方法，然后才能将画布重新用于新图表。
.clear()稍后在同一部分中也提到了“将清除图表画布的功能。在动画帧之间广泛使用，但您可能会发现它很有用。” 调用此方法后，图表将保持良好状态，因此如果您想将画布重用于全新的图表，则不应调用此方法。
不过，老实说，在像您这样的情况下，我经常使用容器div来包装我的canvas图表，每当我需要创建新图表时，我都会canvas在此div. 然后我将这个新创建的canvas用于新图表。如果您遇到过奇怪的行为，可能与图表在当前图表之前占据画布有关，也请记住这种方法。
每次图表调用后删除画布，这对我有用
$("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, { .... });
对于ChartJS v2.x，您可以使用update()更新图表数据，而无需显式销毁和创建画布。
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();
});
也许有更好的方法，但没有适合我的答案。
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>
2020 年的简单编辑：
这对我有用。通过使其拥有窗口来将图表更改为全局（将声明从 更改var myChart为window myChart）
检查图表变量是否已经初始化为图表，如果是，则销毁它并创建一个新的，即使您可以创建另一个同名的。下面是代码：
if(window.myChart instanceof Chart)
{
window.myChart.destroy();
}
var ctx = document.getElementById('myChart').getContext("2d");
希望它有效！