Quiero leer un archivo .json y usar sus datos para el atributo de datos de un diagrama chart.js.
Mi código es el siguiente:
const test = [] fetch("./load.json") .then(response => { return response.json(); }) .then(data => { // console.log(data) for (i = 0; i < data.length; i++) { // console.log(data[i]) test.push(data[i]) } }); console.log(test) // setup block const data = { datasets: [{ label: 'Sales', data: test, borderColor: 'rgba(234,124,234,0.4)', backgroundColor: 'rgba(34,14,24,0.4)' }] }; // config block const config = { type: 'line', data, options: { scales: { x: { type: 'time', time: { unit: 'second' } }, y: { beginAtZero: true }, xAxes: [{ type: "time", time: { min: 1628373600, max: 1628460000 } }] } } }; // render / init block const myChart = new Chart( document.getElementById('myChart'), config );Mi archivo .json:
[{"x": "2021-08-08T13:12:23", "y":3}, {"x": "2021-08-08T13:12:45", "y":5}, {"x": "2021-08-08T13:12:46", "y":6}, {"x": "2021-08-08T13:13:11", "y":3}, {"x": "2021-08-08T13:14:23", "y":9}, {"x": "2021-08-08T13:16:45", "y":1}]Intenté analizar los datos del archivo .json y en la consola aparece, pero creo que el atributo de datos de chart.js no puede leer los datos en la variable de prueba.
¿Alguien sabe cómo hacer esto?
Parece que el gráfico se está creando antes de que los datos estén listos, ya que cargar el json es un proceso asíncrono, puede crear una instancia del gráfico en su segundo .then cuando los datos estén disponibles o crear el gráfico como lo hace y luego en el segundo .then actualice los datos en el gráfico y llame al método de update