0
347
Vistas¿Cómo puedo formatear el eje x usando una marca de tiempo a través de chart.js?
Quiero mostrar las lecturas de temperatura de una base de datos en un gráfico. Sin embargo, en este momento, el eje x muestra valores incorrectos que no se corresponden con mi conjunto de datos de prueba.
El eje x está destinado a estar en el dominio del tiempo usando marcas de tiempo, en cambio, el gráfico usa cada carácter de la etiqueta 'Reddd' como un valor para el eje x.
El eje y es correcto y corresponde a los puntos de datos de prueba.
La siguiente función incluye el código javascript para construir el gráfico.
function makeGraph() { const ctx = document.getElementById('canvas').getContext('2d'); const myChart = new Chart(ctx, { type: 'line', data: { labels: 'Reddd', datasets: [{ label: 'Temperature', data: [{"x": 1647281788963, "y": 22.9}, {"x": 1647281994496, "y": 26.9}, {"x": 1647282200029, "y": 21.9}, {"x": 1647282405562, "y": 24.9}, {"x": 1647282611094, "y": 28.9}], backgroundColor: 'transparent', borderColor: 'red', borderWidth: 2 }] }, options: { scales: { x: { type: 'time', time: { // Luxon format string tooltipFormat: 'DD T' }, title: { display: true, text: 'Date' } }, y: { title: { display: true, text: 'value' } } } } }); } Esta es la salida del gráfico: 
Si no incluyo una cadena después de las labels: declaración, el gráfico se verá así: 
1 Respuestas
Responde la pregunta0
Primero, no debe definir data.labels .
Además, el eje x podría definirse de la siguiente manera:
x: { type: 'time', time: { unit: 'minute', displayFormats: { minute: 'DD T' }, tooltipFormat: 'DD T' }, ...Eche un vistazo a su código modificado y ejecutable a continuación y vea cómo funciona.
new Chart('canvas', { type: 'line', data: { datasets: [{ label: 'Temperature', data: [ {"x": 1647281788963, "y": 22.9}, {"x": 1647281994496, "y": 26.9}, {"x": 1647282200029, "y": 21.9}, {"x": 1647282405562, "y": 24.9}, {"x": 1647282611094, "y": 28.9} ], backgroundColor: 'transparent', borderColor: 'red', borderWidth: 2, tension: 0.5 }] }, options: { scales: { x: { type: 'time', time: { unit: 'minute', displayFormats: { minute: 'DD T' }, tooltipFormat: 'DD T' }, title: { display: true, text: 'Date' } }, y: { title: { display: true, text: 'value' } } } } }); <script src="https://cdn.jsdelivr.net/npm/chart.js@^3"></script> <script src="https://cdn.jsdelivr.net/npm/luxon@^2"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1"></script> <canvas id="canvas" height="120"></canvas>