Destruya el gráfico de barras chart.js para volver a dibujar otro gráfico en el mismo

Esta es la respuesta más acertada que te podemos dar, pero obsérvala detenidamente y analiza si se puede adaptar a tu proyecto.

Solución:

El método correcto a utilizar, para poder dibujar otro gráfico en el mismo lienzo, es .destroy(). Debe llamarlo en el objeto de gráfico creado anteriormente. 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 (en Prototype Methods):

.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 los detectores de eventos asociados adjuntos por Chart.js. Esto debe llamarse antes de que el lienzo se reutilice 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 como la función que “borrará el lienzo del gráfico. Se usa ampliamente internamente entre cuadros de animación, pero puede resultarle ú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 gráfico nuevo.

Sin embargo, para ser honesto, en casos como el suyo, a menudo he usado un contenedor div para envolver mi canvas y, cada vez que necesitaba crear un nuevo gráfico, colocaba un nuevo canvas elemento en este div. Luego usé este recién creado canvas para el nuevo gráfico. Si alguna vez se encuentra con un comportamiento extraño, posiblemente relacionado con los gráficos que ocupan el lienzo antes del gráfico actual, tenga en cuenta también este enfoque.

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

$("canvas#chartreport").remove();
$("div.chartreport").append('');
var ctx = document.getElementById("chartreport").getContext("2d");
chartreport= new Chart(ctx,  .... );

Para ChartJS v2.x puedes usar actualizar() para actualizar los datos del gráfico sin destruir y crear explícitamente el lienzo.

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

valoraciones y reseñas

---

---

Utiliza Nuestro Buscador