Grafico a torta con jQuery

Voglio creare un grafico a torta in JavaScript. Durante la ricerca ho trovato l’API di Google Charts. Dal momento che stiamo usando jQuery ho scoperto che è disponibile l’ integrazione jQuery per Google Charts .

Ma il mio problema è qui che i dati effettivi vengono inviati al server di Google per creare i grafici. C’è un modo per impedire che i dati vengano inviati a Google? Sono preoccupato di inviare i miei dati a terzi.

jqPlot sembra abbastanza buono ed è open source.

Ecco un link agli esempi di jqPlot più impressionanti e aggiornati.

flot

Limitazioni: linee, punti, aree piene, barre, torta e combinazioni di questi

Da una prospettiva di interazione, Flot di gran lunga ti avvicina il più ansible al grafico in Flash, come puoi ottenere con jQuery . Anche se l’output del grafico è piuttosto fluido e di aspetto eccezionale, puoi anche interagire con i punti dati. Ciò che intendo con questo è che puoi avere la possibilità di passare con il mouse su un punto dati e ottenere un feedback visivo sul valore di quel punto nel grafico.

La versione trunk di flot supporta i grafici a torta.

Flot Zoom.

Oltre a questo, hai anche la possibilità di selezionare un blocco del grafico per recuperare i dati per una particolare “zona”. Come caratteristica secondaria di questa “suddivisione in zone”, puoi anche selezionare un’area su un grafico e ingrandire per vedere i punti dati un po ‘più da vicino. Molto bello


Sparklines

Limitazioni: torta, linea, barra, combinazione

Sparklines è il mio strumento di mini grafica preferito là fuori. Davvero eccezionale per i grafici in stile dashboard (pensa al pannello di Google Analytics la prossima volta che accedi). Perché sono così piccoli, possono essere inclusi in linea (come nell’esempio sopra). Un’altra bella idea che può essere utilizzata in tutti i plugin grafici è la capacità di auto-aggiornamento. La loro demo Mouse-Speed ​​ti mostra la potenza del live charting al suo meglio.


Tabella delle query 0.21

Limitazioni: Area, Linea, Barra e combinazioni di questi

jQuery Chart 0.21 non è il plugin per grafici più bello in circolazione. È piuttosto semplice in termini di funzionalità quando si tratta di grafici che può gestire, tuttavia può essere flessibile se è ansible impiegare un po ‘di tempo e sforzi.

L’aggiunta di valori in un grafico è relativamente semplice:

 .chartAdd({ "label" : "Leads", "type" : "Line", "color" : "#008800", "values" : ["100","124","222","44","123","23","99"] }); 

jQchart

Limitazioni: bar, linea

jQchart è uno strano, hanno incorporato transistioni di animazione e funzionalità di trascinamento / rilascio nel grafico, tuttavia è un po ‘goffo – e apparentemente inutile. Genera grafici di bell’aspetto se si ottiene la configurazione CSS giusta, ma ci sono migliori là fuori.


TufteGraph

Limitazioni: barra e barra impilata

Tuftegraph si vende da “graziosi grafici a barre che mostreresti a tua madre”. Si avvicina, Flot è più carina, ma Tufte si presta ad essere molto leggero. Sebbene con questo arrivino delle restrizioni, ci sono poche opzioni tra cui scegliere, così ottieni ciò che ti viene dato. Controllalo per un veloce grafico a barre di vincita.

C’è un nuovo giocatore nel campo, che offre avanzati grafici interattivi HTMl5:

http://datavisualizationsoftwarelab.com/en/products/pie-chart/

Esempio di grafici:

grafico a torta interattivo

Documentazione: http://developers.dvsl.co/en/pie-chart/

Cosa c’è di bello in questa lib:

  • Gli altri slice possono essere espansi
  • Pie offre drill down per strutture gerarchiche (vedi esempio)
  • scrivi facilmente il tuo controller di origine dati o fornisci un semplice file json
  • esportare immagini ad alta risoluzione fuori dalla scatola
  • supporto touch completo, funziona senza problemi su iPad, iPhone, Android, ecc.

inserisci la descrizione dell'immagine qui

I grafici sono gratuiti per uso non commerciale, sono disponibili anche licenze commerciali e supporto tecnico.

Anche grafici temporali interattivi e grafici Net sono a tua disposizione. inserisci la descrizione dell'immagine qui

inserisci la descrizione dell'immagine qui

I grafici sono dotati di API e impostazioni estese, in modo da poter controllare ogni aspetto dei grafici.

Un sacco di ottimi suggerimenti qui, solo andando a mettere ZingChart in pila per buona misura. Recentemente abbiamo rilasciato un wrapper jQuery per la libreria che rende ancora più semplice la creazione e la personalizzazione dei grafici. I collegamenti CDN sono nella demo di seguito.

Sono nel team di ZingChart e siamo qui per rispondere a qualsiasi domanda che qualcuno di voi potrebbe avere!

 $('#pie-chart').zingchart({ "data": { "type": "pie", "legend": {}, "series": [{ "values": [5] }, { "values": [10] }, { "values": [15] }] } }); 
    

Alcuni altri che non sono stati menzionati:

Per mini torte, linee e barre, Peity è brillante, semplice, piccolo, veloce, utilizza un markup davvero elegante.

Non sono sicuro del suo rapporto con Flot (dato il suo nome), ma Flotr2 è abbastanza buono, certamente fa torte migliori di Flot.

Bluff produce grafici lineari dall’aspetto piacevole, ma ho avuto un po ‘di problemi con le sue torte.

Non è quello che cercavo, ma un altro prodotto commerciale (molto simile a Highcharts) è TeeChart .

Chart.js è abbastanza utile, supportando numerosi altri tipi di grafici.

Può essere utilizzato sia con jQuery che senza.

Controlla TeeChart per Javascript

  • Gratuito per uso non commerciale.

  • Include plugin per jQuery , Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript, ecc …

  • Dimostrazioni interattive qui e qui .

  • Alcuni screenshot di alcune delle demo:

TeeChart Javascript - Bar

TeeChart Javascript - Pie

TeeChart Javascript - Punti