Estoy tratando de implementar este tutorial y no pude hacerlo. https://www.chartjs.org/docs/latest/axes/cartesian/time.html
Entrada: lista de objetos con atributos (tiempo, valor). El tiempo es un número entero que significa tiempo de Unix en segundos; el valor es Flotante.
El tutorial dice "Adaptadores de fecha. La escala de tiempo requiere que estén presentes una biblioteca de fechas y un adaptador correspondiente . Elija entre los adaptadores disponibles".
Biblioteca de fechas, fecha-fns : https://github.com/date-fns/date-fns
Pregunta 1. ¿Cómo instalar/incluir la biblioteca date-fns? La documentación dice "npm", pero creo que es solo para Node.js, pero tengo un proyecto Django, Ubuntu. Si solo descargo el zip, hay un montón de archivos dentro.
Adaptador, chartjs-adapter-date-fns https://github.com/chartjs/chartjs-adapter-date-fns .
Pregunta 2. ¿Cómo instalar el adaptador fns? La documentación dice "npm", pero tengo un proyecto Django, Ubuntu. PERO, si incluyo <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script> , siento que es suficiente.
Pregunta 3. Después de instalar el adaptador y la biblioteca de fechas, ¿cómo corregir el script a continuación para que la trama funcione (eje cartesiano de tiempo)? Creo que se trata de actualizar el point["x"] = elem.time; para convertir un tiempo de Unix a algún tipo apropiado.
HTML
<canvas id="myChart"></canvas>JS
let points = []; for(let elem of objs) { point = {}; point["x"] = elem.time; point["y"] = elem.value; points.push(point); } var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { // The type of chart we want to create type: 'line', // The data for our dataset data: points, // Configuration options go here options: { responsive: false, scales: { x: { type: 'time', } } } });La instalación de las 3 bibliotecas requeridas se puede hacer usando etiquetas de script, vea el ejemplo en vivo a continuación.
La razón por la que sus datos no se muestran es porque chart.js no espera una matriz de datos en el campo de datos. En el campo de datos, espera un objeto con al menos una clave para todos los conjuntos de datasets , que es una matriz y una matriz de etiquetas opcional, pero dado que está utilizando el formato de objeto para sus datos, la matriz de etiquetas no es necesaria.
Cada conjunto de datos tiene su propia etiqueta para la leyenda y en el objeto del conjunto de datos configura la matriz de datos en el campo de datos. Ver ejemplo en vivo:
const options = { type: 'line', data: { datasets: [{ label: '# of Votes', data: [{ x: 1632664468243, y: 5 }, { x: 1632664458143, y: 10 }], borderColor: 'pink' }] }, options: { scales: { x: { type: 'time' } } } } const ctx = document.getElementById('tt').getContext('2d'); new Chart(ctx, options); <canvas id="tt"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>