Creé un gráfico de barras básico usando chartjs y funciona bien. Ahora quiero actualizar los valores en un intervalo de tiempo. Mi problema es que después de crear el gráfico, no sé cómo actualizar sus valores correctamente ...
Mi código:
var ctx = $("#myChart").get(0).getContext("2d");
var dts = [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [0, 0, 0, 0, 0]
}
];
var data = {
labels: ["Core#1", "Core#2", "Core#3", "Core#4", "Total"],
datasets: dts
};
var chart = new Chart(ctx);
chart.Bar(data);
//test code
setInterval( function () {
data.datasets[0].data = [random(), random(), random(), random(), random()];
chart.Bar(data);
},2000);
en el código de prueba, estoy actualizando los valores con datasets[0].data
: ¿es esta la forma correcta de hacerlo? El problema con esto es que cada vez que llamo chart.Bar()
, los valores se restablecen a 0 y luego se animan al valor aleatorio (como si estuviera recreando el gráfico). De esta manera, todas las animaciones son siempre de 0 a valor, lo que parece extraño. Esperaría que si actualizo un valor de 50 a 10, la barra se reducirá a 10 de 50 y no se establecerá en 0 y luego se animará a 10.
No encontré nada en los documentos sobre esto ... ¿Estoy haciendo algo mal o esto es imposible con esta biblioteca?
fuente
Respuestas:
Actualización: Parece que chartjs ha sido actualizado (ver comentario más abajo). Hay algunos ejemplos que se ven muy bien:
Publicación original
A partir de noviembre de 2013, parece haber muy pocas opciones para actualizar los gráficos.
Aquí hay un buen ejemplo (duplicado a continuación) de agregar nuevos puntos a un gráfico de líneas. Todavía un poco nervioso, pero no está mal. Sin embargo, creo que el efecto probablemente depende de la tabla que está utilizando.
Parece que esto está en algún lugar de la tubería de desarrollo. Sin embargo, todavía no veo ninguna indicación de una fecha de lanzamiento: https://github.com/nnnick/Chart.js/issues/13 [Cerrado a partir del 26 de julio de 2014]
JS
HTML
fuente
El
update()
desencadena una actualización del gráfico. chart.update ()update()
se puede llamar de forma segura después de actualizar los valores de uno o más puntos existentes dentro del objeto de datos, representando los cambios en un bucle de representación animado.fuente
Aquí está cómo hacerlo en la última versión de ChartJs:
Mira este video claro
o probarlo en jsfiddle
fuente
chart.update()
Anima desde la posición anterior de los puntos como quería el OP.También puede usar la función destroy (). Me gusta esto
fuente
Solo necesita cambiar el
chartObject.data.datasets
valor y llamarupdate()
así:fuente
Retire el dom de lienzo y agregue nuevamente.
fuente
Creo que la forma más fácil es escribir una función para actualizar su gráfico, incluido el
chart.update()
método. Mira este sencillo ejemplo que escribí en jsfiddle para un gráfico de barras.Espero que esto ayude.
fuente
No creo que sea posible en este momento.
Sin embargo, esa es una característica que debería aparecer pronto, como el autor insinuó aquí: https://github.com/nnnick/Chart.js/issues/161#issuecomment-20487775
fuente
Si destroy () y clear () no funciona (al igual que lo que tenía experiencia), puede usar jquery para eliminar el lienzo y agregarlo nuevamente.
fuente
La forma más simple es reemplazar el elemento de lienzo y luego llamar a nuevo Chart () nuevamente:
Por supuesto, debe reemplazar yourChartData, yourChartType y yourChartOptions con los valores correctos necesarios para inicializar Chart.js. Ver Docs Chart.js .
Puede llamar a la función reloadMyChart con un clic de botón o cualquier otro evento que necesite. Probablemente agregará parámetros a esta función y los usará para hacer una llamada REST para actualizar dinámicamente su gráfico, de esta manera:
¡Espero eso ayude! =)
fuente
Mostrando tabla de actualización en tiempo real JS
código completo, puede descargar en el enlace de descripción
fuente
Hay al menos 2 formas de resolverlo:
1)
chart.update()
2) Eliminar el gráfico existente usando chart.destroy () y crear un nuevo objeto de gráfico.
fuente
Puede verificar la instancia
Chart
medianteChart.instances
. Esto le dará todas las instancias de gráficos. Ahora puede iterar en esas instancias y cambiar los datos, que están presentes dentro de la configuración. supongamos que solo tiene un gráfico en su página.fuente
Tan simple, simplemente reemplace el elemento del lienzo del gráfico.
fuente