Tengo un gráfico de anillos que me gustaría actualizar con un nuevo conjunto de datos cada vez que selecciono una opción diferente en mi menú desplegable, pero debido a que mi código está en una función draw() , el gráfico intenta dibujarse a sí mismo constantemente una y otra vez. es por eso que sigo recibiendo el mensaje de error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID 'myChart' can be reused.
¿Cómo podría arreglar esto? La variable llamada stats es con lo que estoy tratando de actualizar los datos de mi gráfico.
var config = { type: 'doughnut', data: { labels: legend, datasets: [{ backgroundColor: ['rgb(204,0,0)', 'rgb(241,194,50)', 'rgb(41,134,204)', 'rgb(106,168,79)', 'rgb(255,62,153)'], data: stats, }] }, plugins: [hoverLabel], options: { radius: this.radius, hoverOffset: 30, responsive: true, maintainAspectRatio: false, plugins: { title: { display: true, text: "Top 5 causes of death in " + country, color: 'rgb(0,0,0)', align: 'center', padding: 15, font: { size: 25 } }, legend: { position: 'right', title: { display: true, color: 'rgb(0,0,0)', text: 'Legend', font: { weight: 'bold', size: 20 }, }, labels: { color: 'rgb(0,0,0)', usePointStyle: true, padding: 15, font: { size: 15, weight: 'bold' } } } } } }; let mychart = new Chart('myChart', config);Tiene 2 opciones, ya sea recrear completamente el gráfico destruyéndolo primero:
const config = {}; // Fill with your config opbject let chart = Chart.getChart('myChart'); // Pass the canvas ID if (chart) { chart.destroy(); } chart = new Chart('myChart', config);o actualizando la instancia del gráfico actual:
const config = {}; // Fill with your config opbject let chart = Chart.getChart('myChart'); // Pass the canvas ID if (chart) { chart.data.labels = legend; chart.data.datasets[0].data = stats; chart.update(); } else { new Chart('myChart', config) }