Destroy chart.js wykres słupkowy, aby przerysować inny wykres w samym <canvas>

Question

Używam Chart.js bibliotekę narysować wykres bar, to działa dobrze, ale teraz chcę zniszczyć wykres bar i wykonaj wykres liniowy w tym samym kanale . Próbowałem te dwa sposoby, aby usunąć płótnie:

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

grapharea.destroy(); 

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

drugi sposób:

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

grapharea.clear(); 

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

jestem wzywającą to dobrze? OnButtonClick Nazywam tę funkcję, która używa tego samego płótna.

Answer 1

Poprawną metodą użycia, aby móc narysować inny wykres na tym samym kanwie, jest .destroy(). Musisz wywołać go na wcześniej utworzonym obiekcie wykresu. Możesz także użyć tej samej zmiennej dla obu wykresów.

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 }); 

Prosto z docs (under Prototype Methods):

.destroy()

Użyj tego, aby zniszczyć wszystkie wystąpienia wykresów, które są tworzone. Spowoduje to wyczyszczenie wszystkich referencji przechowywanych w obiekcie wykresu w Chart.js, wraz z wszelkimi powiązanymi detektorami zdarzeń dołączonymi przez Chart.js. To musi zostać wywołane, zanim płótno zostanie ponownie wykorzystane do nowego wykresu.

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

To wyraźnie wskazuje, że ta metoda musi być wywołana przed płótno może być ponownie użyty do nowej tabeli.

.clear() jest również wymieniony w dalszej części tego samego rozdziału co funkcja, która "wyczyści płótno wykresu." Używana szeroko wewnątrz klatek animacji, ale może się okazać przydatna. " Wykres będzie żywy i długo po wywołaniu tej metody, więc nie jest to metoda wywoływania, jeśli chcesz ponownie użyć kanwy dla zupełnie nowego wykresu.

Aby być uczciwym, choć w przypadkach takich jak Twoja, mam często używany kontener div zawinąć mój canvas i ilekroć potrzebne, aby utworzyć nową tabelę, umieściłem nową canvas element tej div. Następnie użyłem nowo utworzonego canvas dla nowego wykresu. Jeśli kiedykolwiek spotkasz się z dziwnym zachowaniem, być może związanym z wykresami zajmującymi płótno przed aktualną tabelą, również miej to na uwadze.

Answer 2

Usuń płótna po każdym wywołaniu wykresu, to pracował dla mnie

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