Share
I grafici Web creati con JavaScript sono un ottimo modo per aggiungere interattività alle tue app e ai tuoi siti, ma se preferisci lavorare in jQuery, le tue opzioni possono essere limitate. Gli sviluppatori sono spesso lasciati a scegliere tra convenienza o funzionalità. Tutte le campane e fischietti in 100 linee di codice o una versione più semplice in 30? Per risolvere questo problema, il team di ZingChart ha sviluppato un wrapper per utilizzare le API con la sintassi jQuery, consentendo agli sviluppatori di creare rapidamente grafici con la ricca interattività che desiderano.
C'è una chiamata jQuery per ogni funzione nell'API di ZingChart, tutti i 169 di essi. In questo tutorial ne tratteremo una manciata in tre dei casi d'uso più comuni:
È possibile visualizzare il riferimento completo sulla pagina Github del wrapper jQuery di ZingChart.
Se non hai una copia della libreria ZingChart o del wrapper jQuery, ci sono alcune opzioni:
Accentsconagua
bower installa zingchart-jquery)Imposta il tuo file HTML includendo la libreria ZingChart e tutti i moduli aggiuntivi necessari. Dovrai includere anche jQuery e, infine, il wrapper jQuery di ZingChart. Il wrapper è compatibile con le versioni 1.xe 2.x di jQuery.
Demo wrapper jQuery di ZingChart
Inizializzare i grafici è ora semplice con .zingchart () chiamata. Questo metodo (e tutti gli altri che accettano un oggetto come parametro) può prendere i dati del grafico direttamente o per riferimento (in questo caso dove i dati sono memorizzati in una variabile data1).
$ ("# demo-1"). zingchart (data: data1);// Grafico iniziale con dati direttamente $ ("# demo-2"). Zingchart (data: tipo: "riga", "background-color": "# eff0f0", "tooltip": "padding": " 20 20 20 20 "," font-family ":" arial "," font-color ":" # 666666 "," border-radius ": 5," shadow ": 0," scale-x ": " line-color ":" # 666666 "," tick ": " line-color ":" # 666666 "," elemento ": " font-color ":" # 666666 "," font-family ":" arial "," scale-y ": " line-color ":" # 666666 "," tick ": " line-color ":" # 666666 "," elemento ": " font-color " : "# 666666", "font-family": "arial", trama: aspetto: "spline", "hover-state": "shadow": 0, "marker": "size": 8, "border-width": 0, "background-color": "# 00ccff", "shadow": 0, serie: [valori: [3,4,10,2,6,5], " line-color ":" # 00ccff "," shadow ": 0]);La prima demo è un esempio di manipolazione DOM che utilizza uno degli ascoltatori dal wrapper, .nodeHover (). Passando il mouse su un nodo si aggiorna la tabella sottostante, particolarmente utile nelle situazioni in cui è necessario fornire ulteriori informazioni sui dati del grafico al di fuori del grafico stesso. Ci sono listener per tutti gli oggetti grafici così come alcuni eventi, come ad esempio .feedStart (), .historyBack (), e tanti altri.
// Associare un listener di eventi al nodo hover $ ("# demo-1"). NodeHover (// plotMouseOver function function () // Ottieni tutti i valori per il plot hovered var plotVals = $ (this) .getPlotValues (plotindex : this.event.plotindex); // Ottieni l'indice del nodo hover var idx = this.event.nodeindex; for (var i = 0; i Dai un'occhiata alla demo per vedere cosa ci offre.
2. Manipolazione del grafico
Il secondo grafico mostra la manipolazione del grafico inverso tramite il DOM. Usando il jQuery normale, posizioniamo gli ascoltatori di input su una serie di cursori. L'input del cursore viene lanciato su un int e passato a a .setNodeValue () chiamare il nodo corrispondente.
$ ("input [type = 'range']"). each (function (idx) // Associa eventi di input a ogni cursore $ (this) .on ("input", function () // Ottieni il valore di ogni cursore sugli eventi di input var newVal = parseInt ($ (this) .val ()); // Imposta il valore del nodo corrispondente sul nuovo valore del cursore $ ("# demo-2"). setNodeValue (plotindex: 0 , nodeindex: idx, value: newVal)););Dai un'occhiata alla demo di Codepen per vedere cosa ci offre.
3. Caricamento dati AJAX
Caricamento di nuovi dati è un gioco da ragazzi. Dopo un successo .ottenere richiesta, passare i risultati con uno dei tanti metodi di setter come .appendSeriesData (), .setSeriesValues (), .modificare(), .setData (), ecc. Nell'esempio seguente, usiamo .setSeriesValues () passare una nuova serie di valori restituiti dalla nostra chiamata AJAX.
// Associare un evento click al pulsante $ ("pulsante"). Click (function () // Emettere una richiesta get $ .get ('https://api.myjson.com/bins/530az', function ( ) ) // In caso di richiesta di ottenimento riuscita ... // (nota che non abbiamo ancora toccato l'API ZingChart) .done (function (res) // Archivia i nuovi dati in una variabile (totalmente facoltativa) var newData = res.data; // Imposta i valori della serie pari a newData $ ("# demo-3"). setSeriesValues ("values": [newData]); // Tada! Il tuo grafico ha appena usato i dati AJAX. la discoteca. ); );Ancora una volta, date un'occhiata alla demo su Codepen per vedere cosa abbiamo ora.
chaining
Il concatenamento dei metodi è una delle funzionalità più popolari di jQuery. Questo wrapper supporta il concatenamento per qualsiasi metodo o evento che restituisce un oggetto jQuery. Invece di chiamare le funzioni di manipolazione del grafico separatamente, ora puoi concatenare le chiamate su un'unica riga:
$ ( "# MyChart") set3dView ( "y-angle": 10) resizeChart ( "width": 600, "altezza": 400)..;
Il file demo completo è disponibile per il download.
Conclusione
È stata una corsa molto veloce, dimostrando come usare jQuery per ZingChart. Con queste basi sotto la cintura dovresti essere in grado di portare le tue carte molto oltre! Mostraci i tuoi esempi e sentiti libero di chiedere un feedback nei commenti.
risorse
- http://www.zingchart.com
- @ZingChart su Twitter
- zingchart su Facebook
- zingchart su LinkedIn
- zingchart su Google+
