Te damos la bienvenida a nuestra web, en este sitio vas a hallar la resolución de lo que andabas buscando.
Solución:
Yo también tuve una batalla con esto hoy. Necesita ser un poco más específico con su conjunto de datos. En un gráfico de líneas, “conjuntos de datos” es un array con cada elemento del array que representa una línea en su gráfico. Chart.js es realmente muy flexible aquí una vez que lo resuelves. Puede vincular una línea (un elemento del conjunto de datos) a un eje x y/o un eje y, cada uno de los cuales puede especificar en detalle.
En su caso, si nos limitamos a una sola línea en el gráfico y desea que la parte de “tiempo” de la entrada esté en la parte inferior (el eje x), entonces todos sus tiempos podrían ir a las “etiquetas”. array y su “número” estaría señalado en el eje y. Para mantenerlo simple sin especificar nuestras propias escalas con ejes x e y y dados estos datos:
var MyData = [time:"10:00", number: "127",
time:"11:00", number: "140",
time:"12:00", number: "135",
time:"13:00", number: "122"];
Puede configurar la propiedad “datos” de su gráfico para que sea:
var data =
labels: ["10:00", "11:00", "12:00", "13:00"],
datasets: [
label: "My First dataset",
// Insert styling, colors etc here
data: [x: "10:00", y: 127,
x: "11:00", y: 140,
x: "12:00", y: 135,
x: "13:00", y: 122]
];
Tenga en cuenta que los datos array ahora es un poco más específico con cada elemento de datos que se traza en el eje x al hacer referencia a una de las etiquetas en lugar de ser solo un número sin procesar. Ahora puede poner otro objeto de conjunto de datos en los conjuntos de datos array siguiendo este patrón y tiene dos líneas, obviamente dé a sus líneas diferentes colores y nombres (“etiqueta”).
Espero que esto ayude.
Encontré una muy buena solución aquí: https://github.com/chartjs/Chart.js/issues/3953
Básicamente, puede agregar su propia propiedad de ‘etiquetas’ a cada conjunto de datos y aprovecharla en las devoluciones de llamada para las etiquetas xAxes, información sobre herramientas o lo que desee.
var ctx = $("#myChart");
var myChart = new Chart(ctx,
type: 'doughnut',
data:
datasets: [
data: [1, 2, 3, 4, 5],
backgroundColor: [
'green',
'yellow',
'red',
'purple',
'blue',
],
labels: [
'green',
'yellow',
'red',
'purple',
'blue',
]
,
data: [6, 7, 8],
backgroundColor: [
'black',
'grey',
'lightgrey'
],
labels: [
'black',
'grey',
'lightgrey'
],
,]
,
options:
responsive: true,
legend:
display: false,
,
tooltips:
callbacks:
label: function(tooltipItem, data)
var dataset = data.datasets[tooltipItem.datasetIndex];
var index = tooltipItem.index;
return dataset.labels[index] + ': ' + dataset.data[index];
);
Lo importante aquí es esta pieza:
tooltips:
callbacks:
label: function(tooltipItem, data)
var dataset = data.datasets[tooltipItem.datasetIndex];
var index = tooltipItem.index;
return dataset.labels[index] + ': ' + dataset.data[index];
Dado que hay una serie de preguntas en su publicación, intentaré ayudar con al menos algunas de ellas. En el caso de tu modelo Entry con un número y una hora deberás crear un gráfico disperso. Aquí define objetos de datos con valores x e y como se muestra en mi ejemplo a continuación. Requiere que cada entrada x tenga una y correspondiente. Echa un vistazo al gráfico de dispersión. http://www.chartjs.org/docs/#line-chart-scatter-line-charts
var d = new Date();
var scatterChart = new Chart(ctx,
type: 'line',
data:
datasets: [
label: 'Scatter Dataset',
data: [
x: new Date().setDate(d.getDate()-5),
y: 0
,
x: new Date(),
y: 10
,
x: new Date().setDate(d.getDate()5),
y: 5
]
]
,
options:
scales:
xAxes: [
type: "time",
time:
format: "HH:mm",
unit: 'hour',
unitStepSize: 2,
displayFormats:
'minute': 'HH:mm',
'hour': 'HH:mm'
,
tooltipFormat: 'HH:mm'
,
gridLines:
display: false
],
);