销毁 chart.js 条形图以在同一 <canvas> 中重绘其他图形

Question

我正在使用 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 我调用这个使用相同画布的函数。

原文由 Syed Uzair Uddin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为了能够在同一画布上绘制另一个图表，正确的使用方法是 .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 用于新图表。如果您遇到奇怪的行为，可能与图表在当前图表之前占据画布有关，请记住这种方法。

原文由 xnakos 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

每次图表调用后删除画布，这对我有用

$("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, { .... });

原文由 It0007 发布，翻译遵循 CC BY-SA 3.0 许可协议