Quiero crear un diagrama con Chart.js donde el eje x es el tiempo.
Quiero que el diagrama muestre un día completo (de 0 am a 24 pm).
Dado que mis datos no comienzan a las 0 a. m. y no terminan a las 24 p. m., quería establecer un valor mínimo y máximo para los ejes. Probé algunas variaciones pero nada realmente funcionó.
índice.html:
<!DOCTYPE html> <html lang="en"> <head> <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>Document</title> <link rel="stylesheet" href="main.css"> </head> <body> <div class="chart-container"> <canvas id="myChart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script> <script src="my-chart.js"></script> </body> </html>mi-chart.js:
// setup block const data = { datasets: [{ label: 'Sales', data: [ {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} ], 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 );¿Hay un error en mi código o por qué no cambia nada?
Está intentando usar la configuración v2 y v3 al mismo tiempo, esto no funcionará. Debe eliminar el formato de matriz y solo usar los objetos para definir escalas.
Al colocar los accesorios mínimo y máximo en la raíz del objeto x para la escala x, funciona bien, aunque el tiempo entre el mínimo y el máximo que está utilizando es solo de 1,5 minutos:
// setup block const data = { datasets: [{ label: 'Sales', data: [{ 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 } ], 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' }, min: '2021-08-08T00:00:00', max: '2021-08-08T23:59:59' }, y: { beginAtZero: true } } } }; // render / init block const myChart = new Chart( document.getElementById('myChart'), config ); <!DOCTYPE html> <html lang="en"> <head> <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>Document</title> <link rel="stylesheet" href="main.css"> </head> <body> <div class="chart-container"> <canvas id="myChart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script> <script src="my-chart.js"></script> </body> </html>