Share
Les graphiques Web construits avec JavaScript sont un excellent moyen d'ajouter de l'interactivité à vos applications et à vos sites, mais si vous préférez travailler dans jQuery, vos options peuvent être limitées. Les développeurs doivent souvent choisir entre commodité et fonctionnalités. Toutes les cloches et les sifflets dans 100 lignes de code ou une version plus simple dans 30? Afin de résoudre ce problème, l'équipe de ZingChart a mis au point un wrapper pour utiliser son API avec la syntaxe jQuery, permettant aux développeurs de créer rapidement des graphiques avec la riche interactivité qu'ils souhaitent..
Il y a un appel jQuery pour chaque fonction de l'API ZingChart, toutes 169 d'entre elles. Dans ce tutoriel, nous en couvrirons une poignée dans trois des cas d'utilisation les plus courants:
Vous pouvez afficher la référence complète sur la page Github du wrapper ZingChart jQuery.
Si vous ne possédez pas de copie de la bibliothèque ZingChart ou de l'encapsuleur jQuery, il existe quelques options:
Accentsconagua
bower installer zingchart-jquery)Configurez votre fichier HTML en incluant la bibliothèque ZingChart et tous les modules supplémentaires dont vous avez besoin. Vous devrez également inclure jQuery et, enfin, le wrapper ZingChart jQuery. Le wrapper est compatible avec les versions jQuery 1.x et 2.x.
ZingChart jQuery Wrapper Demo
L’initialisation des graphiques est maintenant simple avec le .zingchart () appel. Cette méthode (et toutes les autres qui prennent un objet en tant que paramètre) peut prendre des données de graphique directement ou par référence (dans ce cas, les données sont stockées dans une variable data1).
$ ("# demo-1"). zingchart (data: data1);// Initialise le graphique avec les données directement $ ("# demo-2"). Zingchart (data: type: "line", "background-color": "# eff0f0", "tooltip": "padding": " 20 20 20 20 "," font-family ":" arial "," font-color ":" # 666666 "," border-radius ": 5," shadow ": 0," scale-x ": " line-color ":" # 666666 "," tick ": " line-color ":" # 666666 "," item ": " font-color ":" # 666666 "," font-family ":" arial "," scale-y ": " line-color ":" # 666666 "," tick ": " line-color ":" # 666666 "," item ": " font-color " : "# 666666", "font-family": "arial", intrigue: aspect: "spline", "hover-state": "shadow": 0, "marqueur": "taille": 8, "border-width": 0, "background-color": "# 00ccff", "shadow": 0, série: [valeurs: [3,4,10,2,6,5], " line-color ":" # 00ccff "," shadow ": 0);La première démo est un exemple de manipulation DOM utilisant l'un des écouteurs du wrapper, .nodeHover (). Le survol d'un nœud met à jour le tableau ci-dessous, ce qui est particulièrement utile dans les cas où vous devez fournir des informations supplémentaires sur les données de graphique en dehors du graphique lui-même. Il existe des écouteurs pour tous les objets de graphique ainsi que pour certains événements, tels que .feedStart (), .histoireRetour (), et beaucoup plus.
// Lier un écouteur d'événement au survol de noeud $ ("# demo-1"). NodeHover (// plotMouseOver function function () // Récupère toutes les valeurs du tracé survolé var plotVals = $ (this) .getPlotValues (plotindex : this.event.plotindex); // Obtenir l'index du noeud de survol var idx = this.event.nodeindex; pour (var i = 0; i Regardez la démo pour voir ce que cela nous donne.
2. Manipulation des cartes
Le deuxième graphique illustre la manipulation du graphique inversé via le DOM. En utilisant jQuery normal, nous plaçons les écouteurs d’entrée sur un ensemble de curseurs. L'entrée du curseur est convertie en un int et passé à un .setNodeValue () appeler le noeud correspondant.
$ ("input [type = 'range']"). each (function (idx) // Lie les événements d'entrée à chaque curseur $ (this) .on ("input", function () // Récupère la valeur de chaque curseur sur les événements d'entrée var newVal = parseInt ($ (this) .val ()); // Définit la valeur du noeud correspondant sur la nouvelle valeur du curseur $ ("# demo-2"). setNodeValue (plotindex: 0 , nodeindex: idx, valeur: newVal)););Regardez la démo sur Codepen pour voir ce que cela nous donne.
3. Chargement de données AJAX
Le chargement de nouvelles données est un jeu d'enfant. Sur un succès .obtenir demande, transmettez vos résultats avec l’une des nombreuses méthodes de définition telles que .appendSeriesData (), .setSeriesValues (), .modifier(), .setData (), etc. Dans l'exemple ci-dessous, nous utilisons .setSeriesValues () passer dans un nouveau tableau de valeurs renvoyées par notre appel AJAX.
// Lier un événement de clic au bouton $ ("bouton"). Click (function () // Émettre une requête get $ .get ('https://api.myjson.com/bins/530az', function ( ) ) // Après une requête get réussie… // (notez que nous n'avons même pas encore touché l'API ZingChart) .done (function (res) // Stocke les nouvelles données dans une variable (totalement facultative) var newData = res.data; // Définissez les valeurs de série sur newData $ ("# demo-3"). setSeriesValues ("values": [newData]); // Tada! Votre graphique vient d'utiliser des données AJAX. Début le disco. ); );Encore une fois, jetez un oeil à la démo sur Codepen pour voir ce que nous avons maintenant.
Chaînage
Le chaînage des méthodes est l’une des fonctionnalités les plus populaires de jQuery. Ce wrapper prend en charge le chaînage de toutes les méthodes ou événements renvoyant un objet jQuery. Au lieu d'appeler les fonctions de manipulation de graphique séparément, vous pouvez maintenant chaîner vos appels sur une seule ligne:
$ ("# myChart"). set3dView ("angle-y": 10). resizeChart ("width": 600, "height": 400);Le fichier de démonstration complet est disponible au téléchargement.
Conclusion
Ce fut une analyse très rapide, montrant comment utiliser jQuery pour ZingChart. Avec ces bases à votre portée, vous devriez être capable d'aller plus loin dans vos propres graphiques! Montrez-nous vos exemples et n'hésitez pas à demander des commentaires dans les commentaires.
Ressources
- http://www.zingchart.com
- @ZingChart sur Twitter
- zingchart sur Facebook
- zingchart sur LinkedIn
- zingchart sur Google+
