Bibliothèque de graphiques JavaScript
Quelqu'un recommanderait-il une bibliothèque de graphiques JavaScript particulière, en particulier une bibliothèque qui n'utilise pas du tout le flash?
Il existe un nombre croissant de solutions Open Source et commerciales pour la création de graphiques JavaScript pur qui ne nécessitent pas Flash. Dans cette réponse, je ne présenterai que les options Open Source.
Il existe 2 classes principales de solutions JavaScript pour les graphiques ne nécessitant pas Flash:
- Basé sur la toile, rendu dans IE à l'aide de ExplorerCanvas qui s'appuie à son tour sur VML
- SVG sur les navigateurs standard, rendu sous forme de VML dans IE
Il existe des avantages et des inconvénients des deux approches, mais pour une bibliothèque de graphiques, je recommanderais cette dernière solution car elle est bien intégrée au DOM, ce qui permet de manipuler des éléments de graphiques avec le DOM et, plus important encore, de définir des événements DOM. En revanche, les bibliothèques de cartographie Canvas doivent réinventer la molette DOM pour gérer les événements. Donc, à moins que vous n'ayez l'intention de créer des graphiques statiques sans traitement des événements, les solutions SVG/VML devraient être meilleures.
Pour les solutions SVG/VML, il existe de nombreuses options, notamment:
- Dojox Charting , bon si vous utilisez déjà le Dojo Toolkit
- Raphael - solutions basées
Raphael est une bibliothèque graphique open source très active, bien entretenue et mature, dotée d'un très bon support multi-navigateurs, notamment IE 6 à 8, Firefox, Opera, Safari, Chrome. et Konqueror. Raphael ne dépend d'aucun framework JavaScript et peut donc être utilisé avec Prototype, jQuery, Dojo, Mootools, etc.
Il existe un certain nombre de bibliothèques de graphiques basées sur Raphael, notamment (sans toutefois s'y limiter):
- gRaphael , une extension de la bibliothèque graphique Raphael
- Ico , avec une API intuitive basée sur un appel de fonction unique pour créer des graphiques complexes
Divulgation: Je suis le développeur de ne des fourchettes Ico sur github .
Si vous utilisez jQuery, j'ai trouvé flot très bon - essayez les exemples pour voir s'ils répondent à vos besoins, mais je les ai trouvés à faire la plupart de ce dont j'ai besoin pour mon projet actuel.
De plus, ExtJS 4. a introduit un ensemble de graphiques très puissant, conçu pour fonctionner avec des données en temps réel.
Départ http://www.highcharts.com !
Highcharts est une bibliothèque de graphiques écrite en JavaScript pur, offrant un moyen simple d’ajouter des graphiques interactifs à votre site Web ou à votre application Web. Les Highcharts prennent actuellement en charge les types de graphiques à lignes, à splines, à secteurs, à secteurs, à colonnes, à barres, à secteurs et à nuages de points.
Ce n’est peut-être pas exactement ce que vous recherchez, mais
l'API graphique de Google est plutôt cool et facile à utiliser.
Il existe une autre bibliothèque javascript basée sur SVG. Il s’appelle Protovis et provient du groupe de visualisation de Stanford
Il permet également de réaliser de jolis graphismes et visualisations interactifs.
http://vis.stanford.edu/protovis/ex/
Bien que ce ne soit que pour les navigateurs modernes
UPDATE: L’équipe de protovis a été transférée dans une autre bibliothèque appelée d3.js (Data Driven Documents), comme elle l’avait dit:
"L’équipe de Protovis développe actuellement une nouvelle bibliothèque de visualisation, D3.js, offrant une prise en charge améliorée de l’animation et des interactions. D3 s’appuie sur de nombreux concepts de Protovis"
La nouvelle bibliothèque se trouve maintenant dans:
http://mbostock.github.com/d3/
UPDATE 2:
"Rickshaw" est une boîte à outils JavaScript permettant de créer des graphiques interactifs de séries chronologiques. Basé sur d3.js, cela simplifie beaucoup le travail avec d3.js, bien qu’il soit un peu moins puissant.
jqPlot c'est génial. Si vos exigences sont assez "normales" et que vous voulez juste dessiner des graphiques, vous êtes probablement submergé par la quantité d’options graphiques js. En supposant que vous ne vouliez pas faire des heures de recherche, utilisez simplement jqPlot car c'est probablement votre meilleur pari. Il couvre bien la plupart des cas d'utilisation pour la plupart des gens. Certaines des alternatives sont spécialisées sur un certain type de graphique ou construites avec un certain cas d'utilisation à l'esprit.
Récemment, je cherchais une bibliothèque de graphiques javascript et j’en ai évalué de nombreux avant de me décider enfin jqplot , ce qui correspond très bien à mes besoins. Comme Jean Vincent l'a indiqué dans sa réponse, vous choisissez vraiment entre une solution basée sur une toile et une solution basée sur un svg.
À mon avis, les principaux avantages et inconvénients étaient les suivants. Les solutions basées sur SVG telles que Raphael (et ses ramifications) sont excellentes si vous souhaitez construire des graphiques hautement dynamiques/interactifs. Vous pouvez également créer des graphiques hybrides ou créer une nouvelle visualisation à laquelle personne d’autre n’a encore pensé. Vous pouvez également créer des graphiques hybrides ou créer une nouvelle visualisation à laquelle personne n’a encore pensé. L'inconvénient est la courbe d'apprentissage et la quantité de code que vous devrez écrire. Vous n'aurez pas besoin de créer des diagrammes dans quelques minutes, d’être prêt à passer du temps à apprendre, puis à écrire une bonne quantité de code pour produire un diagramme relativement simple.
Si vos exigences en matière de cartographie sont raisonnablement standard, par exemple, vous voulez des courbes ou des graphiques à barres, ou peut-être un graphique à secteurs, avec une interactivité limitée, alors il vaut la peine de regarder les solutions basées sur des zones de travail. Il n’y aura pratiquement aucune courbe d’apprentissage, vous pourrez obtenir des graphiques de base en quelques minutes, vous n’aurez pas besoin d’écrire beaucoup de code, quelques lignes de base en javascript/jquery suffiront. Bien sûr, vous ne pourrez produire que les types de graphiques spécifiques pris en charge par la bibliothèque, généralement limités à différentes versions de lignes, barres et secteurs. Les choix d’interactivité seront extrêmement limités, c’est-à-dire inexistants pour la plupart des bibliothèques existantes, bien que certains effets de survol limités soient possibles avec les meilleures.
JQplot est une solution basée sur la toile, car je n’avais besoin que de quelques types de graphiques standard. Après des recherches et une utilisation variée des divers choix, je l’ai trouvé assez complet (si l’on se limite aux tableaux standards) et extrêmement facile à utiliser. Je le recommanderais donc si vos exigences sont similaires.
Pour résumer, simple et voulez des graphiques maintenant, alors allez avec JQplot. Complexe/différent et pas pressé par le temps, alors allez-y avec Raphaël et ses amis.
En guise de réponse tardive, essayez d3.js
http://mbostock.github.com/d3/
C'est la suite de protovis.
La grande différence avec flot réside dans le nombre de fonctionnalités prises en charge.
Bien que la tâche simple soit plus simple, d3.js est nettement plus puissant.
Essayez PlotKit
Une autre est RGraph: graphiques Javascript et bibliothèque de graphes:
Basé sur la toile, donc c'est rapide et il existe environ 20 types de graphiques différents. C'est gratuit pour une utilisation non commerciale aussi!
- un framework: http://www.simile-widgets.org/
une base: http://www.filamentgroup.com/examples/charting_v2/index_2.php
Départ API de visualisation Google , qui est une sorte de généralisation du plus simple API de graphique
Nous venons d'acheter une licence de TechOctave Charts Suite pour notre nouvelle startup. Je les recommande fortement. La licence est simple. Les graphiques ont fière allure! Il était facile de commencer et possède une API puissante pour quand nous en avons besoin. J'ai été choqué de voir à quel point le code est propre et extensible. Vraiment content de notre choix.
Mon favori (flot) a déjà été mentionné.
Mais assurez-vous d’enquêter Ortho . C'est excellent pour les arbres et les échéanciers.
Il y a beaucoup d'activité dans la bibliothèque de cartographie du dojo, et ce qui est génial, je l'utilise sans problème dans une application AIR, assez cool! Voir par exemple là http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
http://code.google.com/apis/visualization/documentation/gallery.html
A des options interactives très cool, y compris des cartes, des jauges et des graphiques.
Essayez le MIT simile timeline qui pourrait être transformé en graphique - http://simile.mit.edu/timeline/
ou le dernier, http://code.google.com/p/gchart/
Protochart est tout ce dont vous avez besoin
Pour les graphiques plus inhabituels: http://thejit.org/
Sencha a acquis Raphael et leurs graphiques sont maintenant en javascript pur à partir de la version 4. Emprise et HighCharts mentionnés ci-dessus sont mes deux favoris.
Jetez un oeil à Bluff . C'est un portage JavaScript de la bibliothèque graphique Gruff pour Ruby.
Ce n'est pas une bibliothèque Javascript, mais cela peut constituer une alternative appropriée - consultez Google Charts où vous pouvez générer des graphiques en transmettant des données de chaîne de requête à leur service Web.
Découvrez ZingChart HTML5 Canvas, SVG, VML et Flash Charts . Bibliothèque très puissante et compatible. Je fais partie de l'équipe Zing - mentionnez-nous sur Twitter @ zingchart ou envoyez des questions à [email protected].
Dans le cas où vous avez besoin, c'est uniquement un diagramme à barres. J'ai publié du code que j'ai utilisé dans un ancien projet. Quelqu'un m'a dit que l'implémentation de VML était brisée sur les versions récentes d'IE, mais que le SVG devrait fonctionner correctement. Peut-être reviendrons-nous au projet et publierons certains rendus de serveurs que j'ai déjà et peut-être une couche de rendu WebGL. Il y a un lien: http://blog.conquex.com/?p=64
Probablement pas ce que recherche le PO, mais depuis que cette question est devenue une liste des options de la bibliothèque de cartographie JS: jQuery Sparklines est vraiment cool.
Fusion charts a une nouvelle bibliothèque javascript/jquery qui semble prometteuse.
Je peux recommander ArcadiaCharts . Une toute nouvelle bibliothèque de cartographie professionnelle pour JavaScript et GWT. Fonctionne dans tous les navigateurs sans plugins. Facile et rapide à utiliser: crée de superbes graphiques avec seulement quelques lignes de code. Gratuit pour un usage non commercial.