Estoy tratando de actualizar periódicamente un gráfico. Los datos se están convirtiendo en el conjunto de datos, pero no puedo hacer que dibujen el gráfico. ¿Qué estoy haciendo mal?
const ctx = document.querySelector('#apichart canvas').getContext('2d'); const apichart = new Chart(ctx, { type: 'line', data: {datasets:[{ label:'Pressure', data: [1025,1000], fill:false, borderColor: 'rgb(75, 192, 192)', tension:0.1 }]}, options: { scales: { y: { beginAtZero: true } } } }); setInterval(function run(){ apichart.data.datasets[0].data.push(1025 * Math.random()); apichart.update(); }, 10000); #apichart{background:#777; position:absolute; top:0; right:0; bottom:0; left:0;} <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script> <div id="apichart"> <canvas></canvas> </div>Creo que este problema está relacionado con las etiquetas, así que agregué una matriz de etiquetas y las actualicé en setInterval cada vez y funciona.
const ctx = document.querySelector('#apichart canvas').getContext('2d'); const apichart = new Chart(ctx, { type: 'line', data: {labels: [1, 2], datasets:[{ label:'Pressure', data: [1025,1000], fill:false, borderColor: 'rgb(75, 192, 192)', tension:0.1 }]}, options: { scales: { y: { beginAtZero: true } } } }); setInterval(function run(){ apichart.data.labels.push(Math.random()); apichart.data.datasets[0].data.push(1025 * Math.random()); apichart.update(); }, 1000); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script> <div id="apichart"> <canvas></canvas> </div>