Libreria di grafici JavaScript

Qualcuno consiglierebbe una particolare libreria di grafici JavaScript, in particolare una che non usa il flash?

C’è un numero crescente di soluzioni Open Source e commerciali per la creazione di grafici JavaScript puri che non richiedono Flash. In questa risposta presenterò solo le opzioni Open Source.

Esistono 2 classi principali di soluzioni JavaScript per la grafica che non richiedono Flash:

  • Basato su canvas, reso in IE usando ExplorerCanvas che a sua volta si basa su VML
  • SVG su browser basati su standard, resi come VML in IE

Ci sono pro e contro di entrambi gli approcci, ma per una libreria di diagrammi consiglierei la versione successiva perché è ben integrata con DOM, permettendo di manipolare gli elementi dei grafici con il DOM e, soprattutto, impostare gli eventi DOM. Al contrario, le librerie cartografiche su canvas devono reinventare la rotella DOM per gestire gli eventi. Quindi, a meno che non si intenda build grafici statici senza gestione degli eventi, le soluzioni SVG / VML dovrebbero essere migliori.

Per le soluzioni SVG / VML ci sono molte opzioni, tra cui:

  • Dojox Charting , bravo se usi già il toolkit Dojo
  • Soluzioni basate su Raffaele

Raphael è una libreria grafica molto triggers, ben gestita e matura, open source con un ottimo supporto per browser incrociati, inclusi IE 6 – 8, Firefox, Opera, Safari, Chrome e Konqueror. Raphael non dipende da alcun framework JavaScript e quindi può essere utilizzato con Prototype, jQuery, Dojo, Mootools, ecc …

Esistono numerose librerie di diagrammi basate su Raphael, inclusi (ma non limitati a):

  • gRaphael , un’estensione della biblioteca grafica di Raffaello
  • Ico , con un’API intuitiva basata su una singola chiamata di funzione per creare grafici complessi

Divulgazione: sono lo sviluppatore di una delle forcelle Ico su github .

Se stai usando jQuery, ho trovato che flot è molto buono – prova gli esempi per vedere se soddisfano le tue esigenze, ma ho trovato che fanno la maggior parte di ciò che mi serve per il mio progetto attuale.

Inoltre ExtJS 4.0 ha introdotto un grande set di grafici – molto potente, ed è progettato per funzionare con dati live.

Controlla http://www.highcharts.com !

Highcharts è una libreria di diagrammi scritta in puro JavaScript, che offre un modo semplice per aggiungere grafici interattivi al tuo sito web o applicazione web. Gli Highcharts attualmente supportano tipi di linee, spline, aree, areepline, colonne, barre, pie e dispersioni.

Forse non è esattamente quello che stai cercando, ma
L’API grafico di Google è abbastanza interessante e facile da usare.

C’è un’altra libreria javascript basata su SVG. Si chiama Protovis e proviene da Stanford Visualization Group

Permette anche di creare grafici e visualizzazioni interattive.

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

Anche se è solo per i moderni browser web

AGGIORNAMENTO: il team di protovis si è spostato in un’altra libreria denominata d3.js (Data Driven Documents) come hanno detto:

“Il team di Protovis sta ora sviluppando una nuova libreria di visualizzazione, D3.js, con supporto migliorato per l’animazione e l’interazione.D3 si basa su molti concetti di Protovis”

La nuova libreria può ora essere trovata in:

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

AGGIORNAMENTO 2:

“Rickshaw” è un toolkit JavaScript per la creazione di grafici di serie temporali interattive. Basato su d3.js che semplifica molto il lavoro con d3.js sebbene sia un po ‘meno potente.

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

Recentemente stavo cercando una libreria di grafici javascript e ho valutato un intero gruppo prima di stabilirmi su jqplot che si adattava perfettamente alle mie esigenze. Come ha detto la risposta di Jean Vincent, in realtà stai scegliendo tra una soluzione basata su canvas e una basata su svg.

A mio parere, i principali pro e contro erano i seguenti. Le soluzioni basate su SVG come Raphael (e propaggini) sono grandi se vuoi build grafici altamente dinamici / interattivi. Oppure se i requisiti per la creazione di grafici sono decisamente al di fuori della norma (ad esempio, vuoi creare una sorta di grafico ibrido o hai trovato una nuova visualizzazione che nessun altro ha ancora pensato). Lo svantaggio è la curva di apprendimento e la quantità di codice che dovrai scrivere. Non sbatterete fuori grafici in pochi minuti, preparatevi a investire del tempo di apprendimento reale e poi a scrivere una buona quantità di codice per produrre un grafico relativamente semplice.

Se i requisiti per la creazione di grafici sono ragionevolmente standard, ad esempio se desideri alcune linee o grafici a barre o forse un grafico a torta o due, con interattività limitata, allora vale la pena esaminare le soluzioni basate su canvas. Non ci sarà praticamente alcuna curva di apprendimento, sarete in grado di ottenere grafici base entro pochi minuti, non avrete bisogno di scrivere molto codice, poche righe di javascript / jquery di base saranno tutto ciò di cui avete bisogno. Ovviamente sarai in grado di produrre solo i tipi specifici di grafici supportati dalla libreria, in genere limitati a vari gusti di linea, barra, torta. Le scelte di interattività saranno estremamente limitate, vale a dire inesistenti per molte delle librerie là fuori, anche se alcuni effetti hover limitati sono possibili con quelli migliori.

Sono andato con JQplot, che è una soluzione basata su canvas poiché avevo davvero bisogno solo di alcuni tipi standard di grafici. Dalla mia ricerca e giocando con le varie scelte ho trovato che fosse ragionevolmente pieno di funzionalità (se sei solo dopo le classifiche standard) ed estremamente facile da usare, quindi lo consiglierei se le tue esigenze sono simili.

Per riassumere, semplice e vuoi grafici ora, poi vai con JQplot. Complesso / diverso e non premuto per tempo quindi vai con Raffaello e amici.

jqPlot è fantastico. Se i tuoi requisiti sono abbastanza “normali” e vuoi semplicemente disegnare alcuni grafici, probabilmente sei sopraffatto dalla quantità di opzioni di creazione di grafici js. Supponendo che tu non voglia fare ore di ricerca, vai con jqPlot perché probabilmente è la soluzione migliore. Riguarda la maggior parte dei casi d’uso per la maggior parte delle persone. Alcune delle alternative sono specializzate su un certo tipo di grafico o costruite pensando a un determinato caso d’uso.

Come una sorta di risposta in ritardo, prova d3.js
http://mbostock.github.com/d3/

È la continuazione del protovis.
La grande differenza di flot è il numero di funzionalità supportate.
Sebbene flot possa essere più semplice, d3.js è decisamente più potente.

Flotr è un’altra libreria di grafici Javascript basata su Prototype e ispirata a Flot

Prova PlotKit

Consiglierei gRaphaël per la pura creazione di grafici JavaScript insieme alla libreria grafica vettoriale JavaScript pura su cui è basata ( Raphaël ).

gRaphaël attualmente supporta Firefox 3.0+, Safari 3.0+, Opera 9.5+ e Internet Explorer 6.0+.

Un altro è RGraph: Javascript charts and graph library:

http://www.rgraph.net

Basato su canvas quindi è veloce e ci sono circa 20 diversi tipi di grafici. È gratuito anche per uso non commerciale!

Il mio preferito (flot) è già stato menzionato.

Ma assicurati di indagare su Ortho . È eccellente per grafici ad albero e linee temporali.

C’è molta attività nella libreria dei grafici dei dojo, e ciò che è bello lo sto usando all’interno di un’applicazione AIR senza problemi, davvero fantastico! Vedi ad esempio http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/

Dai un’occhiata a Google Visualization API , che è una specie di generalizzazione dell’API Chart più semplice

http://code.google.com/apis/visualization/documentation/gallery.html

Ha opzioni interattive molto interessanti tra cui mappe, indicatori e grafici.

Abbiamo appena acquistato una licenza di TechOctave Charts Suite per la nostra nuova startup. Li consiglio vivamente. La licenza è semplice. Le classifiche sono fantastiche! È stato facile iniziare e ha una potente API per quando ne abbiamo bisogno. Sono rimasto scioccato da quanto è pulito ed estensibile il codice. Davvero felice della nostra scelta.

Prova la cronologia similitudine del MIT che potrebbe essere trasformata in un grafico – http://simile.mit.edu/timeline/

o l’ultimo, http://code.google.com/p/gchart/

Non è una libreria Javascript, ma potrebbe essere un’alternativa adatta: controlla Google Charts in cui puoi generare grafici passando i dati querystring al loro servizio web.

Dai un’occhiata a Bluff . È una porta JavaScript della libreria grafica Gruff per Ruby.

Protochart è tutto ciò di cui hai bisogno

Sencha ha acquisito Raphael e ora i loro grafici sono in puro javascript a partire dalla versione 4. Emprise e HighCharts menzionati sopra sono i miei due preferiti.

http://www.sencha.com/

Per i grafici più insoliti: http://thejit.org/

Posso consigliare ArcadiaCharts . Una nuova libreria di grafici professionale per JavaScript e GWT. Funziona in tutti i browser senza plugin. Facile e veloce da usare: crea grafici di grande impatto con solo poche righe di codice. Gratuito per uso non commerciale.

I grafici di fusione hanno una nuova libreria javascript / jquery che sembra promettente.

Nel caso in cui ciò di cui hai bisogno è solo il grafico a barre. Ho pubblicato un codice che ho usato in un vecchio progetto. Qualcuno mi ha detto che l’implementazione VML è rotta sulle versioni recenti di IE, ma SVG dovrebbe funzionare bene. Potrebbe tornare al progetto e rilasciare alcuni renderer serveride che ho già e magari un livello di rendering WebGL. C’è un link: http://blog.conquex.com/?p=64

Probabilmente non è ciò che l’OP sta cercando, ma dal momento che questa domanda è diventata una lista di opzioni di librerie JS: jQuery Sparklines è davvero interessante.

Dai un’occhiata a ZingChart HTML5 Canvas, SVG, VML e grafici Flash . Libreria molto potente e compatibile. Sono nella squadra di Zing – citaci su Twitter @zingchart o spara tutte le domande a [email protected].