Bibliothèque de graphiques JavaScript

223

Quelqu'un recommanderait-il une bibliothèque de graphiques JavaScript particulière - en particulier une qui n'utilise pas du tout Flash?

javascript charts Steve M
la source

Réponses:

160

Il existe un nombre croissant de solutions Open Source et commerciales pour la cartographie JavaScript pure 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 qui ne nécessitent pas Flash:

  • Basé sur un canevas, rendu dans IE en utilisant ExplorerCanvas qui à son tour s'appuie sur VML
  • SVG sur les navigateurs standard, rendu en VML dans IE

Il y a des avantages et des inconvénients des deux approches, mais pour une bibliothèque de graphiques, je recommanderais la dernière car elle est bien intégrée au DOM, ce qui permet de manipuler les éléments des graphiques avec le DOM et, surtout, de définir les événements du DOM. En revanche, les bibliothèques de graphiques Canvas doivent réinventer la roue DOM pour gérer les événements. Donc, à moins que vous n'ayez l'intention de créer des graphiques statiques sans gestion d'événements, les solutions SVG / VML devraient être meilleures.

Pour les solutions SVG / VML, il existe de nombreuses options, notamment:

Raphael est une bibliothèque graphique open source très active, bien entretenue et mature avec une très bonne prise en charge multi-navigateur, 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 (mais sans s'y limiter):

  • gRaphael , une extension de la bibliothèque graphique Raphael
  • Ico , avec une API intuitive basée sur un seul appel de fonction pour créer des graphiques complexes

Divulgation: Je suis le développeur d' une des fourches Ico sur github .

Jean Vincent
la source
5
Grafico et Ico sont deux fourches incompatibles de l'Ico initial d'Alex Young. Il n'est donc pas exact d'affirmer qu'Ico est devenu Grafico. Grafico n'est qu'une des fourches.
Jean Vincent
Il est à noter que Raphaël ne semble plus entretenu. Le dernier commit date de juillet 2010 environ.
Alastair Pitts
1
Je viens de télécharger des graphiques raphael, j'aime beaucoup mais pas de documentation, juste pour vous en avertir.
Orbite
@Alastair: Raphael est maintenant sponsorisé et développé par Sencha ... du moins c'est ce qu'ils disent :)
Roy Tinker
1
SVG n'est pas pris en charge dans Android pré-Honeycomb. Si la possibilité d'afficher les graphiques sur une large gamme d'appareils Android actuels est une exigence, vous devez choisir une solution basée sur Canvas. Cet article sur les graphiques Sencha Touch donne plus de détails sur les graphiques mobiles en général et explique pourquoi Sencha Touch a choisi la toile.
Pallavi Anderson
70

Si vous utilisez jQuery, j'ai trouvé que flot était très bon - essayez les exemples pour voir s'ils répondent à vos besoins, mais je les ai trouvés pour faire la plupart de ce dont j'ai besoin pour mon projet actuel.

De plus, ExtJS 4.0 a introduit un grand ensemble de graphiques - très puissant, et est conçu pour fonctionner avec des données en direct.

Bittercoder
la source
2
Il s'agit de la même bibliothèque que Geoff Dalgas a utilisée pour créer le graphique de réputation ici sur StackOverflow. C'est vraiment un joli petit kit.
Charles Roper
Ma seule vraie plainte à propos de Flot est que lors du rendu dans IE, il semble terrible à tout niveau de zoom autre que 100% (c'est-à-dire que toutes les lignes / blocs ne sont pas mis à l'échelle ensemble - c'est certainement un problème pour ceux d'entre nous avec des écrans haute résolution).
Bittercoder
2
Il semble que les graphiques à feuilles flottantes soient plus beaux que la plupart des autres que j'ai examinés. Voici un lien vers 20 bibliothèques de graphiques JavaScript: javascript.open-libraries.com/utilities/chart/…
B Sept
J'aime aussi Flot, je l'ai utilisé plusieurs fois sur différentes applications Web auparavant.
fedmich
1
J'aime flot en général, mais il veut que toutes les données soient des nombres, donc si vous voulez tracer quelque chose comme les ventes par client (par nom) ou par produit, cela ne fonctionnera pas
Zachary K
60

Consultez 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. Highcharts prend actuellement en charge les types de ligne, spline, zone, areapline, colonne, barre, camembert et nuage de points.

Torstein Hønsi
la source
12
Il convient de souligner que cette bibliothèque est gratuite pour un usage non commercial, mais coûte de l'argent pour les sites uniques et les sites multiples. Cela semble cependant être un prix assez raisonnable.
Nick Spacek
Au début, c'est un plug sans vergogne mais ils ont l'air vraiment génial !! Il n'est cependant pas gratuit pour une utilisation commerciale, je n'ai aucune référence si le prix est raisonnable ou non, mais ils ont l'air correct en un coup d'œil!
Trufa
Il s'agit de la même bibliothèque de graphiques utilisée dans CloudFlare.com, et elle a l'air vraiment géniale. J'étais sur le point d'utiliser la bibliothèque de graphiques DevExpress, qui est ASP.NET et rend et l'image dans le serveur lorsque je suis tombé sur la bibliothèque highcharts. J'ai tout de suite été convaincu que c'était la voie à suivre. Quand j'ai découvert que CloudFlare, qui possède l'un des tableaux de bord / analyses les plus accrocheurs que j'ai vus, l'utilise aussi, j'ai été vendu! Je suis en train de l'expérimenter et cela a fonctionné lors de ma première tentative d'intégration d'un graphique dans ma page Web ... il semble donc facile à utiliser aussi!
Loudenvier
1
Un vote de plus pour Highcharts. Je l'utilise actuellement et c'est génial. Prend en charge jQuery, Mootools et Prototype, et il est très facile à configurer et à utiliser.
gnclmorais
1
Stackoverflow lui-même utilise des highcharts stackoverflow.com/users/22656/jon-skeet?tab=reputation
Scott
36

Ce n'est peut-être pas exactement ce que vous recherchez, mais
l'API Chart de Google est assez cool et facile à utiliser.

Jan Gressmann
la source
16
ce n'est pas javascript
user102008
5
rappelez-vous juste, Google Chart nécessite une connexion Internet et a également quelques limites sur le nombre de demandes de clients autorisées
fedmich
@ user102008: c'est maintenant :) (Vous pouvez toujours accéder à l'ancienne API basée sur l'image si vous le souhaitez)
Spycho
L'API Google Chart ne peut pas être utilisée hors ligne, ce qui est mauvais pour le développement mobile.
oldwizard
Je dois faire un chandelier de type horizontal, quelqu'un sait-il si c'est possible avec Google Chart API?
Tom Stickel
15

Il existe une autre bibliothèque javascript basée sur SVG. Il s'appelle Protovis et il vient du Stanford Visualization Group

Il permet également de créer de jolis graphiques et visualisations interactifs.

http://vis.stanford.edu/protovis/ex/

Bien que ce soit uniquement pour les navigateurs Web modernes

MISE À JOUR: L'équipe de protovis a déménagé dans une autre bibliothèque appelée d3.js (Data Driven Documents) comme ils l'ont dit:

"L'équipe Protovis développe actuellement une nouvelle bibliothèque de visualisation, D3.js, avec un support amélioré pour l'animation et l'interaction. D3 s'appuie sur de nombreux concepts de Protovis"

La nouvelle bibliothèque se trouve désormais dans:

http://mbostock.github.com/d3/

MISE À JOUR 2:

"Rickshaw" est une boîte à outils JavaScript pour créer des graphiques de séries chronologiques interactifs. Basé sur d3.js qui simplifie beaucoup le travail avec d3.js bien qu'il soit un peu moins puissant.

http://code.shutterstock.com/rickshaw/

Fgblanch
la source
Sur la base d'un aperçu rapide, je ne pense pas que D3 "remplace" Protovis. Je dirais que l'équipe a "évolué" car ils la voient comme plus intéressante et avant-gardiste.
David J.
14

Je cherchais récemment une bibliothèque de cartographie javascript et j'ai évalué tout un tas avant de finalement m'installer sur jqplot qui correspondait très bien à mes besoins. Comme l'a mentionné la réponse de Jean Vincent, vous choisissez vraiment entre une solution basée sur toile et basée sur svg.

À mon avis, les principaux avantages et inconvénients étaient les suivants. Les solutions basées sur SVG comme Raphael (et les ramifications) sont excellentes si vous voulez construire des graphiques hautement dynamiques / interactifs. Ou si vos exigences graphiques sont très en dehors de la norme (par exemple, vous voulez créer une sorte de graphique hybride ou vous avez trouvé une nouvelle visualisation à laquelle personne d'autre n'a encore pensé). L'inconvénient est la courbe d'apprentissage et la quantité de code que vous devrez écrire. Vous ne frapperez pas les graphiques en quelques minutes, préparez-vous à investir du temps d'apprentissage réel, puis à écrire une bonne quantité de code pour produire un graphique relativement simple.

Si vos exigences graphiques sont raisonnablement standard, par exemple si vous voulez des graphiques à barres ou à barres ou peut-être un graphique à secteurs ou deux, avec une interactivité limitée, alors il vaut la peine de chercher des solutions basées sur le canevas. 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 javascript / jquery de base seront tout ce dont vous avez besoin. 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 saveurs de ligne, de barre, de tarte. Les choix d'interactivité seront extrêmement limités, c'est-à-dire inexistants pour de nombreuses bibliothèques, bien que certains effets de survol limités soient possibles avec les meilleurs.

Je suis allé avec JQplot qui est une solution basée sur un canevas car je n'avais vraiment besoin que de certains types de graphiques standard. D'après mes recherches et en jouant avec les différents choix, j'ai trouvé qu'il était raisonnablement complet (si vous ne recherchez que les graphiques standard) et extrêmement facile à utiliser, donc je le recommanderais si vos besoins 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 avec Raphael et ses amis.

skorks
la source
14

jqPlot est super. Si vos besoins sont assez «normaux» et que vous souhaitez simplement dessiner des graphiques, vous êtes probablement submergé par la quantité d'options de cartographie js. En supposant que vous ne voulez pas faire des heures de recherche, optez simplement pour 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 conçues avec un certain cas d'utilisation à l'esprit.

Fletch
la source
Je pense que oui aussi après avoir fait quelques recherches. À l'heure actuelle, il ressemble à l'une des meilleures bibliothèques de graphiques JS gratuites disponibles.
jturcotte
4

Comme une sorte 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 flot soit plus simple, d3.js est définitivement plus puissant.

Stefan Steiger
la source
3

Flotr est une autre bibliothèque de graphiques Javascript pure basée sur Prototype et inspirée de Flot

Argelbargel
la source
3

Essayez PlotKit

Jason Bunting
la source
3

Je recommanderais gRaphaël pour les graphiques JavaScript purs avec la bibliothèque de graphiques vectoriels JavaScript sur laquelle il est construit ( Raphaël ).

gRaphaël prend actuellement en charge Firefox 3.0+, Safari 3.0+, Opera 9.5+ et Internet Explorer 6.0+.

Peter McG
la source
1
je veux juste donner la tête qu'il n'y a pas de documentation pour cette bibliothèque, bien que ce soit très agréable.
Orbite
3

Un autre est RGraph: tableaux et bibliothèque de graphiques Javascript:

http://www.rgraph.net

Basé sur Canvas, il est donc rapide et il existe environ 20 types de graphiques différents. C'est également gratuit pour une utilisation non commerciale!

Richard
la source
2

Mon préféré (flot) a déjà été mentionné.

Mais assurez-vous d'enquêter sur Ortho . Il est excellent pour les arbres et les chronologies.

Rui Vieira
la source
2

Nous venons d'acheter une licence de TechOctave Charts Suite pour notre nouvelle startup. Je les recommande vivement. 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é par la netteté et l'extensibilité du code. Vraiment content de notre choix.

Aaron Reis
la source
1

Ce n'est pas une bibliothèque Javascript, mais cela peut être une alternative appropriée - consultez Google Charts où vous pouvez générer des graphiques en transmettant des données de requête à leur service Web.

Luke Bennett
la source
1

Jetez un oeil à Bluff . Il s'agit d'un port JavaScript de la bibliothèque graphique Gruff pour Ruby.

John Topley
la source
1

Protochart est tout ce dont vous avez besoin

Vince Panuccio
la source
1

Sencha a acquis Raphael et maintenant leurs graphiques sont en javascript pur à partir de la version 4. Emprise et HighCharts mentionnés ci-dessus sont mes deux favoris.

http://www.sencha.com/

Justin Thomas
la source
0

Je peux recommander ArcadiaCharts . Une toute nouvelle bibliothèque de graphiques professionnels 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.

Hoang-Tran Vo
la source
Je jouais avec ça, et j'ai remarqué qu'il n'y avait aucun moyen d'obtenir une licence commerciale sur le site Web. En fait, le site Web ne sait pas si c'est gratuit ou non.
zumalifeguard
Vous avez raison. Le site Web a été mis à jour, de sorte que vous pouvez maintenant facilement déterminer quelle licence commerciale correspond à vos besoins: ArcadiaCharts .
Hoang-Tran Vo
0

Au cas où vous auriez besoin d'un graphique à barres uniquement. J'ai publié du code que j'utilisais dans un ancien projet. Quelqu'un m'a dit que l'implémentation de VML est cassée sur les versions récentes d'IE, mais le SVG devrait très bien fonctionner. Peut-être revenir au projet et libérer certains moteurs de rendu côté serveur que j'ai déjà et peut-être une couche de rendu WebGL. Il y a un lien: http://blog.conquex.com/?p=64

Ivan Mishonov
la source
0

Probablement pas ce que l'OP recherche, mais puisque cette question est devenue une liste d'options de bibliothèque de création de graphiques JS: jQuery Sparklines est vraiment cool.

Fletch
la source