Estoy usando chart.js por primera vez y tengo un problema al dibujar un gráfico. Cuando ejecuto este código, solo se muestran los ejes del gráfico, pero las barras no se muestran hasta que minimice o cambie el tamaño de la ventana del navegador. Esto está sucediendo cada vez. Tal vez esto tenga que ver con la capacidad de respuesta. Cualquier ayuda sobre lo que estoy haciendo mal aquí. Estoy usando Visual Studio y Chrome para renderizar gráficos.
let labels=[] let duration=[] let file="assets/duration.csv"; d3.csv(file).then( function (loaddata) { for (let i = 0; i < loaddata.length; i++) { //console.log(loaddata.hours) if (loaddata[i].hours != 0) { duration.push(loaddata[i].hours) labels.push(loaddata[i].Trend) } } //console.log(labels) //console.log(duration) } ); let options={ type: 'bar', responsive: true, title: { display:true, text:'Duration of Trending Tweets' }, data: { labels:labels, datasets:[{ data: duration, label: 'Hours', backgroundColor:["#3e95cd"] }] } }; let chart=new Chart(document.getElementById('canvas'),options); <!DOCTYPE html> <html lang="en"> <head> <script src="chart.min.js"></script> <script src ="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"> </script> <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My first website</title> </head> <body> <h1>Hello world</h1> <div> <canvas id="canvas" style="position: relative; height:40vh; width:80vw"> </canvas> </div> <script src="index.js"> </script> </body> </html>El problema es que crea el gráfico antes de que se carguen los datos CSV . Tenga en cuenta que la solicitud d3.csv se procesa de forma asíncrona.
Esto se puede resolver creando el gráfico solo una vez que los datos CSV estén completamente cargados (al final y dentro de d3.csv(file).then( ... ).
En esta respuesta se describe un enfoque alternativo.