Entonces, estoy tratando de hacer una función JS que use ChartJS , la variable/datos que obtiene la función, es un objeto JSON. La razón por la que uso try/catch es porque las dos líneas debajo de aquí:
let labels = json_data.data.map(e => e.StartTime); let data = json_data.data.map(e => e.StatusId);No siempre está configurado si hay algún dato que estén configurados, pero si no es el único conjunto
let data = json_data.message.map(e => e.message);A menos que se cargue la página, entonces no se establece nada.
El objeto JSON cambia cuando se cambia un menú desplegable <Select> , y si hay datos en uno, entonces se carga el canvas , pero si el usuario selecciona uno sin datos, quiero que el injerto esté vacío/destruido, pero no puedo haga esto porque estoy en una captura de prueba, y si lo defino también en la captura, entonces dice que la ID ya está en uso. ¿Qué tengo que hacer para "reset/destroy" en la captura?
function chartJSLoad(json_data) { try { let labels = json_data.data.map(e => e.StartTime); let data = json_data.data.map(e => e.StatusId); console.log(labels); console.log(data); var ctx = document.getElementById('canvaschartjs').getContext('2d'); var myChart = new Chart(ctx, { data: { datasets: [{ type: 'bar', label: 'Bar Dataset', data: data, backgroundColor: 'rgba(0, 150, 90)', borderColor: 'rgba(0, 255, 90)', order: 2 }, { type: 'line', label: 'Line Dataset', data: data, backgroundColor: 'rgba(150, 0, 90)', borderColor: 'rgba(255, 0, 90)', order: 1 }], labels: labels }, options: { maintainAspectRatio: false, responsive: true, scales: { x: { stacked: true, }, y: { stacked: true } } } }); } catch (error) { if (typeof json_data !== 'undefined') { myChart.destroy(); alert(json_data.message); } } }Puede usar el método estático getChart para verificar si ya existe un gráfico con ese contexto, si lo hace, obtiene esa instancia de gráfico que puede destruir:
catch (error) { if (typeof json_data !== 'undefined') { let chart = Chart.getChart('canvaschartjs'); if (typeof chart !== 'undefined') { chart.destroy() } alert(json_data.message); } }Ejemplo en vivo:
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'pink' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderColor: 'orange' } ] }, options: {} } var ctx = document.getElementById('chartJSContainer').getContext('2d'); let myChart = new Chart(ctx, options); let chart = Chart.getChart('chartJSContainer'); if (typeof chart !== 'undefined') { chart.destroy() // Does not show anything because of this line, comment it out to show again } <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script> </body>