Versión de Chart.js: 3.8.0 (última)
Hola a todos
Perdiendo la cabeza con esto en este momento. He podido mostrar con éxito el gráfico una vez. Desde entonces, no se procesa y no tengo idea de por qué.
Creé una matriz de objetos antes (cuenta líneas en varios archivos csv) para declarar las opciones del gráfico y luego pasé esta matriz de acuerdo con los ejemplos en el sitio web chart js.
Tengo salida a la consola para asegurarme de que los datos se carguen correctamente y todo se vea bien. ¿Alguien podría echar un vistazo al código a continuación y señalar algo obvio?
const data = YTDTable; var ctx1 = document.getElementById('YTD').getContext('2d'); var myChart1 = new Chart(ctx1, { type: 'bar', data: { datasets: [{ data: data, label: "Tickets to Date" }] }, options: { parsing: { xAxisKey: 'month', yAxisKey: 'count' } }, });Esta es la salida del conjunto de datos de console.log(myChart1.data) que se ejecuta después del bloque de código anterior:
{ "datasets": [ { "data": [ { "month": "January", "count": 1629 }, { "month": "February", "count": 1832 }, { "month": "April", "count": 1626 }, { "month": "May", "count": 2034 }, { "month": "March", "count": 1802 }, { "month": "June", "count": 1585 } ], "label": "Test" } ], "labels": [] }Simplemente no entiendo por qué el código anterior no funciona. Cualquier ayuda es muy apreciada
La salida del gráfico en pantalla: imagen del gráfico: aún no se pueden incrustar imágenes...
OK ENTONCES
Me di cuenta de cuál era el problema. El código funciona. Simplemente no lo está renderizando de inmediato por alguna razón. Si cambio el tamaño de la ventana, la dibuja en la pantalla....
Oh bien. Puede arreglar eso. Gracias por mirar
ACTUALIZAR
He identificado la causa del retraso en el dibujo del gráfico y decido actualizar la respuesta en caso de que alguien tenga un problema similar.
El código de mi gráfico parecía estar ejecutándose antes de que terminaran los datos recopilados en YTDTable. Ahora he eliminado el bloque de código responsable de la recopilación de datos del archivo javascript y lo he colocado en un bloque de script en la página de índice.
Esto hace que la recopilación de datos se ejecute mucho antes de que se ejecute el código del gráfico.