javascript - Destruye el gráfico de barras chart.js para redibujar otro gráfico en el mismo<canvas>

graph

Question

Estoy usando la biblioteca Chart.js para dibujar un gráfico de barras , está funcionando bien, pero ahora quiero destruir el gráfico de barras y hacer un gráfico de líneas en el mismo lienzo . He intentado estas dos formas de borrar el lienzo:

var grapharea = document.getElementById("barChart").getContext("2d");
grapharea.destroy();
var myNewChart = new Chart(grapharea, { type: ''radar'', data: barData, options: barOptions });

segunda forma:

var grapharea = document.getElementById("barChart").getContext("2d");
grapharea.clear();
var myNewChart = new Chart(grapharea, { type: ''radar'', data: barData, options: barOptions });

¿Lo estoy llamando correcto? OnButtonClick Llamo a esta función que usa el mismo lienzo.

Answer 1

El método correcto para usar, para poder dibujar otro gráfico en el mismo lienzo, es .destroy() . Debe invocarlo en el objeto de gráfico creado previamente. También puede usar la misma variable para ambos gráficos.

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

Directamente de los documentos (bajo Métodos de prototipo) :

.destruir()

Use esto para destruir cualquier instancia de gráfico que se cree. Esto limpiará todas las referencias almacenadas en el objeto de gráfico dentro de Chart.js, junto con cualquier detector de eventos asociado adjunto por Chart.js. Esto debe invocarse antes de volver a usar el lienzo para un nuevo gráfico.

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

Establece explícitamente que se debe llamar a este método antes de que el lienzo se pueda reutilizar para un nuevo gráfico.

.clear() también se menciona más adelante en la misma sección que la función que "borrará el lienzo del gráfico. Se usa mucho internamente entre los cuadros de animación, pero puede que le resulte útil". El gráfico estará vivo y bien después de llamar a este método, por lo que este no es el método para llamar, si desea reutilizar el lienzo para un nuevo gráfico.

Para ser sincero, en casos como el tuyo, a menudo he usado un contenedor div para envolver mi canvas y, siempre que necesitaba crear un nuevo gráfico, colocaba un nuevo elemento canvas en este div . Luego usé este canvas recién creado para el nuevo cuadro. Si alguna vez te encuentras con un comportamiento extraño, posiblemente relacionado con los cuadros que ocupan el lienzo antes del gráfico actual, ten en cuenta también este enfoque.

Answer 2

Quitar el lienzo después de cada llamada al gráfico, esto funcionó para mí

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