销毁chart.js条形图以重绘同一中的其他图形

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

Answer 1

对于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();
});

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

Answer 3

为了能够在同一画布上绘制另一张图表，正确的方法是.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对象的任何引用，以及chart.js附加的任何关联事件侦听器。必须在画布重新用于新图表之前调用此函数。

// Example from the docs
var myLineChart = new Chart(ctx, config);
// Destroys a specific chart instance
myLineChart.destroy();

它明确指出，必须调用此方法，才能将画布重新用于新图表。

.clear（）在后面的同一节中还提到了函数“将清除图表画布。在动画帧之间广泛使用，但您可能会发现它很有用。”调用此方法后，图表将处于活动状态，因此这不是要调用的方法，如果您想为一个全新的图表重复使用画布。

不过，老实说，在像您这样的情况下，我经常使用容器div来包装我的canvas，每当我需要创建新图表时，我都会在div中放置一个新的canvas元素。然后，我将这个新创建的画布用于新图表。如果您曾经遇到过奇怪的行为，可能与在当前图表之前占据画布的图表有关，也要记住这种方法。