Voglio creare un grafico a torta in JavaScript. Durante la ricerca ho trovato l'API di Google Charts. Dato che stiamo usando jQuery, ho scoperto che è disponibile l' integrazione di jQuery per i grafici di Google .

Ma il mio problema è che qui i dati effettivi vengono inviati al server di Google per la creazione dei grafici. C'è un modo per impedire che i dati vengano inviati a Google? Sono preoccupato per l'invio dei miei dati a terzi.

jqPlot sembra piuttosto buono ed è open source.

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

Flot

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

Dal punto di vista dell'interazione, Flot ti porterà di gran lunga il più vicino possibile alla rappresentazione grafica di Flash come puoi ottenere jQuery. Sebbene l'output del grafico sia piuttosto fluido e di bell'aspetto, puoi anche interagire con i punti dati. Ciò che intendo con questo è che puoi avere la possibilità di passare il mouse su un punto dati e ottenere un feedback visivo sul valore di quel punto nel grafico.

La versione tronco di flot supporta i grafici a torta.

Funzionalità Flot Zoom.

Inoltre, hai anche la possibilità di selezionare una parte del grafico per recuperare i dati per una particolare "zona". Come caratteristica secondaria a 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 .

Sparkline

Limitazioni: torta, linea, barra, combinazione

Sparklines è il mio mini strumento grafico preferito là fuori. Davvero ottimo per i grafici in stile dashboard (pensa al dashboard di Google Analytics la prossima volta che accedi). Poiché sono così piccoli, possono essere inclusi nella riga (come nell'esempio sopra). Un'altra bella idea che può essere utilizzata in tutti i plugin grafici è la capacità di autoaggiornamento. La loro demo Mouse-Speed ​​ti mostra la potenza dei grafici live al suo meglio.

Grafico delle query 0.21

Limitazioni: area, linea, barra e combinazioni di queste

jQuery Chart 0.21 non è il plug-in di creazione di grafici più bello in circolazione, va detto. È piuttosto semplice in termini di funzionalità quando si tratta di grafici che può gestire, tuttavia può essere flessibile se ci si può dedicare un po 'di tempo e impegno.

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, Line

jQchart è strano, hanno incorporato transistioni di animazione e funzionalità di trascinamento della selezione nel grafico, tuttavia è un po 'goffo e apparentemente inutile. Genera grafici dall'aspetto gradevole se si CSSimposta correttamente, ma ci sono migliori là fuori.

TufteGraph

Limitazioni: Bar e Stacked Bar

Tuftegraph si vende come "graziosi grafici a barre che mostreresti a tua madre". Ci si avvicina, Flot è più carino, ma Tufte si presta ad essere molto leggero. Anche se con ciò arrivano delle restrizioni, ci sono poche opzioni tra cui scegliere, quindi ottieni ciò che ti viene dato. Dai un'occhiata per un grafico a barre di vittoria rapida.

Tantissimi ottimi suggerimenti qui, per buona misura getterò ZingChart in pila. Di recente abbiamo rilasciato un wrapper jQuery per la libreria che semplifica ulteriormente la creazione e la personalizzazione dei grafici. I collegamenti CDN sono nella demo qui sotto.

Faccio parte del team di ZingChart e siamo qui per rispondere a qualsiasi domanda tu possa avere!

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

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script>

<div id="pie-chart"></div>

Alcuni altri che non sono stati menzionati:

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

Non sono sicuro della sua relazione con Flot (dato il nome), ma Flotr2 è abbastanza buono, sicuramente fa torte migliori di Flot.

Bluff produce grafici a linee di bell'aspetto, ma ho avuto qualche problema con le sue torte.

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

Chart.js è piuttosto utile, poiché supporta anche numerosi altri tipi di grafici.

Può essere utilizzato sia con jQuery che senza.

C'è un nuovo giocatore sul campo, che offre carte di navigazione avanzate che utilizzano Canvas per animazioni e prestazioni super fluide:

https://zoomcharts.com/

Esempio di grafici:

Documentazione: https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/

Cosa c'è di interessante in questa libreria:

• Altri slice possono essere espansi
• Pie offre il drill down per le 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.

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

Anche i grafici interattivi del tempo e i grafici netti sono disponibili per l'uso.

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

Controlla TeeChart per Javascript

• Gratuito per uso non commerciale.

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

• Demo interattive qui e qui .

• Alcuni screenshot di alcune delle demo: