Luego de de esta larga compilación de información resolvimos esta impedimento que presentan muchos los lectores. Te ofrecemos la solución y deseamos serte de gran apoyo.
Solución:
Tienes que mover tus datos dentro de un dataset. Si echa un vistazo al manual de uso, un datasets array se utiliza. El “insinuación” para los conjuntos de datos dentro de los documentos, el tiempo tampoco es tan obvio (ver título).
Vea el fragmento a continuación:
Acabo de copiar el ejemplo de uso básico e inserté los datos de su primer intento (+ agregué algunas etiquetas)
ACTUALIZACIÓN 18.03.2020
Actualicé el fragmento para usar Chart.js 2.8.0 y agregó el siguiente código, como se sugiere en el comentario de @Erik
options:
scales:
xAxes: [
type: 'time'
]
ACTUALIZACIÓN 16.02.2021
Como señaló @habib, la versión 2.9.4 arrojaba un par de errores. Supongo que esos fueron causados por la falta de dependencia (moment.js). Ver:
Nota: a partir de la versión 2.8, Moment.js es una dependencia opcional para Chart.js y Chart.min.js. Para usar la escala de tiempo con Moment.js, debe asegurarse de que Moment.js esté completamente cargado antes de requerir Chart.js. Puedes usar una cuña
Fuente
Por lo tanto, cambié las siguientes cosas:
- Chart.js actualizado a 2.9.4
- Se agregó moment.js (2.29.1) como dependencia
- Se ajustó el formato de hora para que sea compatible con ISO8601 (según lo sugerido por soiboi)
var ctx = document.getElementById("examChart").getContext("2d");
var myChart = new Chart(ctx,
type: 'line',
options:
scales:
xAxes: [
type: 'time',
]
,
data:
labels: ["2015-03-15T13:03:00Z", "2015-03-25T13:02:00Z", "2015-04-25T14:12:00Z"],
datasets: [
label: 'Demo',
data: [
t: '2015-03-15T13:03:00Z',
y: 12
,
t: '2015-03-25T13:02:00Z',
y: 21
,
t: '2015-04-25T14:12:00Z',
y: 32
],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
]
);
Sobre la base de lo que @RamizWachtler ha respondido, puede agregar a la sección de opciones del gráfico para escalar los tiempos correctamente. Notaré que esto no parece funcionar con Charts.js 2.3. Se agregó un fragmento de trabajo que usa la última versión de Charts.js a partir de abril de 2019.
Además, cambié el formato de hora para que sea compatible con ISO8601.
var chart = new Chart(ctx,
type: 'line',
data: data,
options:
scales:
xAxes: [
type: 'time',
distribution: 'linear'
]
);
Fuente: https://www.chartjs.org/docs/latest/axes/cartesian/time.html
var ctx = document.getElementById("examChart").getContext("2d");
var myChart = new Chart(ctx,
type: 'line',
data:
labels: ["2015-03-15T13:03:00Z", "2015-03-25T13:02:00Z", "2015-04-25T14:12:00Z"],
datasets: [
label: 'Demo',
data: [
t: "2015-03-15T13:03:00Z",
y: 12
,
t: "2015-03-25T13:02:00Z",
y: 21
,
t: "2015-04-25T14:12:00Z",
y: 32
],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
]
,
options:
scales:
xAxes: [
type: 'time',
distribution: 'linear'
]
);
Te mostramos las comentarios y valoraciones de los lectores
Si haces scroll puedes encontrar las observaciones de otros creadores, tú además tienes el poder dejar el tuyo si te gusta.