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

I am using the Chart.js library to draw a bar graph, it is working fine, but now I want to destroy the bar graph and make a line graph in the same canvas. I have tried these two ways to clear the canvas:

我使用Chart.js库绘制条形图，它工作正常，但现在我想破坏条形图并在同一画布中制作折线图。我试过这两种方法来清除画布：

var grapharea = document.getElementById("barChart").getContext("2d");

grapharea.destroy();

var myNewChart = new Chart(grapharea, { type: 'radar', data: barData, options: barOptions });

second way:

第二种方式：

var grapharea = document.getElementById("barChart").getContext("2d");

grapharea.clear();

var myNewChart = new Chart(grapharea, { type: 'radar', data: barData, options: barOptions });

Am I calling it right? OnButtonClick I call this function which uses the same canvas.

我称之为正确吗？ OnButtonClick我调用这个使用相同画布的函数。

3 个解决方案

#1

The correct method to use, in order to be able to draw another chart on the same canvas, is .destroy(). You must call it on the previously created chart object. You may also use the same variable for both charts.

为了能够在同一画布上绘制另一个图表，正确的方法是.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 });

Straight from the docs (under Prototype Methods):

直接来自文档（在原型方法下）：

.destroy()

。破坏（）

Use this to destroy any chart instances that are created. This will clean up any references stored to the chart object within Chart.js, along with any associated event listeners attached by Chart.js. This must be called before the canvas is reused for a new chart.

使用此选项可以销毁所创建的任何图表实例。这将清除Chart.js中存储到图表对象的任何引用，以及Chart.js附加的任何关联事件侦听器。必须在将画布重新用于新图表之前调用此方法。

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

It explicitly states that this method must be called before the canvas can be reused for a new chart.

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

.clear() is also mentioned later in the same section as the function that "will clear the chart canvas. Used extensively internally between animation frames, but you might find it useful." The chart will be alive and well after calling this method, so this is not the method to call, if you want to reuse the canvas for a brand new chart.

.clear（）在后面的部分中也会提到“将清除图表画布的功能。在动画帧之间广泛使用，但你可能会发现它很有用。”调用此方法后，图表将处于活动状态，因此，如果要将画布重新用于全新的图表，则不需要调用此方法。

To be honest, though, in cases like yours, I have often used a container div to wrap my canvas and, whenever I needed to create a new chart, I placed a new canvas element in this div. I then used this newly created canvas for the new chart. If you ever come across strange behavior, possibly related to charts occupying the canvas before the current chart, have this approach in mind too.

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

#2

Remove the canvas after every chart call, this worked for me

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

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

#3

For ChartJS v2.x you can use update() to update the chart data without explicitly destroying and creating the canvas.

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

#1