Estoy tratando de construir una página web que tiene un video y 2 gráficos. Cuando trato de mostrar 2 gráficos, recibo el siguiente mensaje: "Error: el lienzo ya está en uso. El gráfico con ID '0' debe destruirse antes de que el lienzo pueda reutilizarse..." No entiendo por qué necesito destruya el lienzo si estoy usando diferentes lienzos para diferentes gráficos en la misma página. mi código es:
<div class='FisrtChat'> <canvas id="chart" width="300" height="50"></canvas> </div> <div class='SecondChart'> <canvas id="chart_Multi" width="300" height="50"></canvas> </div> <script src="final_graph.js"></script> <script src="final_graph.js"></script>mi archivo final_grapg.js contiene:
async function chartIt() { const data = await getData(); const ctx = document.getElementById('chart').getContext('2d'); const myChart = new Chart(ctx, { type: 'line', data: { labels: data.xs, datasets: [{ label: 'Finall Q_value throw time', data: data.ys, backgroundColor: ['rgba(255, 99, 132, 0.2)', ], borderColor: ['rgba(255, 99, 132, 1)', ], borderWidth: 1 }] }, });} mi archivo multi_head.js contiene:
async function chartIt() { const data = await getData(); const ctx = document.getElementById('chart_MULTI').getContext('2d'); const myChart_H1 = new Chart(ctx, { datasets: [{ label: 'Head 1', data: data.ys1, borderColor: 'red' }] }, });Gracias de antemano Yael
Debe agregar el siguiente bloque de código si su gráfico se crea más de una vez.
let chartStatus = Chart.getChart("chart_MULTI"); if (chartStatus != undefined) { chartStatus.destroy(); }Código completo - (puede hacer lo mismo para otro gráfico)
async function chartIt() { const data = await getData(); const ctx = document.getElementById('chart_MULTI').getContext('2d'); let chartStatus = Chart.getChart("chart_MULTI"); if (chartStatus != undefined) { chartStatus.destroy(); } const myChart_H1 = new Chart(ctx, { datasets: [{ label: 'Head 1', data: data.ys1, borderColor: 'red' }] }, });