J'ai créé un graphique à barres de base en utilisant chartjs et cela fonctionne très bien. Maintenant, je veux mettre à jour les valeurs sur un intervalle de temps. Mon problème est qu'après avoir créé le graphique, je ne sais pas comment mettre à jour correctement ses valeurs ...
Mon code:
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);dans le code de test, je mets à jour les valeurs avec datasets[0].data- est-ce la bonne façon de procéder? Le problème avec ceci est que chaque fois que j'appelle chart.Bar(), les valeurs sont réinitialisées à 0 puis animées à la valeur aléatoire (comme je recrée le graphique). De cette façon, toutes les animations vont toujours de 0 à une valeur qui semble étrange. Je m'attendrais à ce que si je mette à jour une valeur de 50 à 10, la barre descendrait à 10 de 50 et ne serait pas réglée à 0 puis animée à 10.
Je n'ai rien trouvé dans la documentation à ce sujet ... est-ce que je fais quelque chose de mal ou est-ce impossible avec cette bibliothèque?
la source
Réponses:
Mise à jour: il semble que chartjs ait été mis à jour (voir le commentaire ci-dessous). Il y a quelques exemples qui semblent très beaux:
Message original
Depuis novembre 2013, il semble y avoir très peu d'options pour mettre à jour les graphiques.
Voici un bon exemple (reproduit ci-dessous) d'ajout de nouveaux points à un graphique en courbes. Encore un peu nerveux mais pas trop mal. Cependant, je pense que l'effet dépend probablement du graphique que vous utilisez.
Il semble que ce soit quelque part dans le pipeline de développement. Cependant, je ne vois pas encore d'indication de date de sortie: https://github.com/nnnick/Chart.js/issues/13 [Fermé le 26 juillet 2014]
JS
HTML
la source
Le
update()déclenche une mise à jour du graphique. chart.update ()update()peut être appelé en toute sécurité après la mise à jour des valeurs d'un ou plusieurs points existants dans l'objet de données, rendant les modifications dans une boucle de rendu animée.la source
Voici comment procéder dans la dernière version de ChartJs:
Regardez cette vidéo claire
ou testez-le dans jsfiddle
la source
chart.update()s'anime à partir de la position précédente des points comme le souhaitait l'OP.Vous pouvez également utiliser la fonction destroy (). Comme ça
la source
Il vous suffit de changer la
chartObject.data.datasetsvaleur et d'appelerupdate()comme ceci:la source
Supprimez le dom de toile et ajoutez-le à nouveau.
la source
Je pense que le moyen le plus simple est d'écrire une fonction pour mettre à jour votre graphique, y compris la
chart.update()méthode. Consultez cet exemple simple que j'ai écrit dans jsfiddle pour un graphique à barres.J'espère que cela t'aides.
la source
Je ne pense pas que ce soit possible maintenant.
Cependant, c'est une fonctionnalité qui devrait bientôt arriver, comme l'auteur l'a laissé entendre ici: https://github.com/nnnick/Chart.js/issues/161#issuecomment-20487775
la source
Si destroy () et clear () ne fonctionnent pas (comme ce que j'ai vécu), vous pouvez utiliser jquery pour supprimer le canevas et l'ajouter à nouveau.
la source
Le moyen le plus simple est de remplacer l'élément canvas, puis d'appeler à nouveau le nouveau Chart ():
Bien entendu, vous devez remplacer yourChartData, yourChartType et yourChartOptions par les valeurs correctes requises pour initialiser Chart.js. Consultez la documentation Chart.js .
Vous pouvez appeler la fonction reloadMyChart sur un clic de bouton ou tout autre événement dont vous avez besoin. Vous allez probablement ajouter des paramètres à cette fonction et les utiliser pour effectuer un appel REST pour mettre à jour dynamiquement votre graphique, comme ceci:
J'espère que ça aide! =)
la source
Affichage du graphique de mise à jour en temps réel
code complet, vous pouvez télécharger dans le lien de description
la source
Il y a au moins 2 façons de le résoudre:
1)
chart.update()2) Supprimez le graphique existant à l'aide de chart.destroy () et créez un nouvel objet graphique.
la source
Vous pouvez vérifier l'instance de
Charten utilisantChart.instances. Cela vous donnera toutes les instances de graphiques. Vous pouvez maintenant itérer sur ces instances et modifier les données, qui sont présentes dans config. supposons que vous n'ayez qu'un seul graphique dans votre page.la source
Si simple, remplacez simplement l'élément de canevas du graphique.
la source