Construyo un gráfico de líneas de ejemplo con chart.js. Aquí está mi código html y js. Veo que se dibuja un gráfico con mi conjunto de datos.
Pero cuando trato de habilitar la escala de tiempo en mi eje x agregando esto en options ,
const config = { type: 'line', data: data, options: { responsive: true, scales: { x: { type: 'time', } } } };no se dibuja ningún gráfico. Y no veo ningún error en la consola del navegador. ¿Puedes decirme qué me estoy perdiendo?
Trabajar html y js sin habilitar el eje de tiempo.
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chart.js Integration</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <canvas id="line-chart" width="800" height="450"></canvas> <script> const data = { datasets: [{ label: 'my first dataset', borderColor: 'rgb(255, 99, 132)', data: [{ x: "2016-12-25", y: 3 }, { x: "2016-12-28", y: 10 }, { x: "2016-12-29", y: 5 }, { x: "2016-12-30", y: 2 }, { x: "2017-1-3", y: 20 }, { x: "2017-1-5", y: 30 }, { x: "2017-1-8", y: 45 }], } , { label: 'My Second dataset', borderColor: 'rgb(99, 255, 132)', data: [{ x: "2016-12-25", y: 20 }, { x: "2016-12-27", y: 62 }, { x: "2016-12-26", y: 15 }, { x: "2016-12-31", y: 172 }, { x: "2017-1-1", y: 30 }, { x: "2017-1-5", y: 50 }, { x: "2017-1-6", y: 25 }], } ] }; const config = { type: 'line', data: data, options: { responsive: true, } }; const myChart = new Chart( document.getElementById('line-chart'), config ); </script>Pero
La razón por la que su eje de tiempo no funciona es porque desde chart.js V3 necesitará incluir su propio adaptador de fecha, chart.js ya no se envía con un adaptador de fecha predeterminado. Para más información ver la documentación
const data = { datasets: [{ label: 'my first dataset', borderColor: 'rgb(255, 99, 132)', data: [{ x: "2016-12-25", y: 3 }, { x: "2016-12-28", y: 10 }, { x: "2016-12-29", y: 5 }, { x: "2016-12-30", y: 2 }, { x: "2017-01-03", y: 20 }, { x: "2017-01-05", y: 30 }, { x: "2017-01-08", y: 45 }], }, { label: 'My Second dataset', borderColor: 'rgb(99, 255, 132)', data: [{ x: "2016-12-25", y: 20 }, { x: "2016-12-27", y: 62 }, { x: "2016-12-26", y: 15 }, { x: "2016-12-31", y: 172 }, { x: "2017-01-01", y: 30 }, { x: "2017-01-05", y: 50 }, { x: "2017-01-06", y: 25 }], } ] }; const config = { type: 'line', data: data, options: { responsive: true, scales: { x: { type: 'time', } } }, }; const myChart = new Chart( document.getElementById('line-chart'), config ); <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chart.js Integration</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!--Line below added, added date adapter for time scale --> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script> </head> <body> <canvas id="line-chart" width="800" height="450"></canvas> </body> </html>