Creazione del primo grafico JavaScript interattivo
I dati ci circondano e la sua visualizzazione è già diventata una parte essenziale delle nostre vite. Grafici, infografica, mappe e cruscotti sono molto richiesti oggi perché ci presentano le informazioni in un modo che può essere facilmente interpretato.
La cosa buona è che la creazione di grafici non richiede grandi capacità o conoscenze speciali da sviluppatori web, designer o qualcun altro. In questo articolo, mostreremo le nozioni di base e spiegheremo come gestire la visualizzazione dei dati interattivi utilizzando JavaScript e HTML5, con facilità.
Inizieremo creando un grafico a barre a serie singola in modo da poter afferrare le basi. Poi ti mostreremo un modo veloce per creare grafici a barre multi-serie e in pila. I grafici a barre sono un modo popolare di presentare i dati in questi giorni e la logica di sviluppo utilizzata può essere facilmente tradotta in altri tipi di grafici.
Il grafico finale sarà questo grafico a barre in pila al 100%:
Vedi la penna Finale (titolo). Grafico a barre in pila 100% personalizzato di Ruslan ( @ruslankorsar ) sopra CodePen .
Oggi ci sono molte librerie di grafici JavaScript ; alcuni di questi sono assolutamente gratuiti come D3 e Google Charts mentre altri richiedono pagamenti per uso commerciale. A mio parere, il più completo e robusto di loro sono amCharts , AnyChart , e Highcharts .
Per questo tutorial, ho deciso di usare AnyChart . Tuttavia, il processo è molto simile per ogni libreria, specialmente se stai facendo qualcosa di semplice. AnyChart ha esteso documentazione e Riferimento API così come una grande varietà di tipi di grafici supportati e demo sul parco giochi di codice , quindi è una buona scelta per i principianti.
Per tua comodità, tutti gli esempi illustrati nel tutorial sono disponibili in questa collezione su CodePen e può essere esplorato proprio lì o esportato in ZIP con file demo CSS / HTML / JavaScript.
JS Charting in 3 semplici passaggi
Il processo di creazione di un grafico JavaScript di base per il tuo sito web o app consiste nei seguenti tre passaggi:
- Prepara i tuoi dati;
- Collega la libreria;
- Scrivi un codice semplice.
1. Preparazione dei dati
Proprio come una grande nave vuole acque profonde, un semplice grafico vuole dati semplici. Ovviamente, se hai grandi quantità di dati o la sua struttura non è ovvia, devi prima prepararla.
Quando si costruisce la maggior parte dei tipi di grafici più comuni, sono necessari solo i campi X e Y. Tuttavia, i grafici a barre possono essere ancora più semplici perché spesso accade che viene utilizzato solo il campo Y e un indice o un numero di articolo viene preso come X. Ad esempio, quando si utilizza una matrice di dati JavaScript, ad esempio:
// 5 data points = 5 categories for a single seriesvar data = [19, 24, 30, 34, 42];// Y is these values; X is item numbers [0,1,2,3,4,5]Se si utilizza JSON / XML per trasferire dati, i dati potrebbero apparire come segue.
[{'x': 'Product A','value': 19},{'x': 'Product B','value': 24}...]In generale, ci sono molti modi di lavorare con i dati, e gli sviluppatori di software di visualizzazione solitamente ne descrivono tutti o molti in documenti. Con questo in mente, ti consiglio di controllare il sezione pertinente della documentazione della libreria del tuo grafico.
2. Ottenere una libreria di grafici
La biblioteca che usi è ovviamente un ingrediente vitale qui. Se hai intenzione di utilizzare i grafici a livello locale, dovrebbe essere ragionevole Scaricare il pacchetto binario e tenerlo vicino.
Tuttavia, se hai bisogno di grafici per un'app Web o una pagina su un sito Web, a CDN potrebbe essere un'opzione migliore. Caricherà i file dal server più vicino al tuo client, offrendoti un carico di pagina più veloce e prestazioni migliori.
3. Scrivere un semplice codice HTML / JavaScript
Quando i nostri dati e la libreria sono pronti, possiamo iniziare a scrivere il codice per disegnare effettivamente il nostro grafico.
a) Per prima cosa, dobbiamo creare un contenitore di grafici sulla pagina. Il modo migliore è usare a
b) Dopodiché, includiamo i nostri dati:
var data = [{x: 'DVD player', y: 19},{x: 'Home theater system', y: 24},{x: 'Karaoke player', y: 30},{x: 'Projector', y: 34},{x: 'TV receiver', y: 42}];c) Quindi, specifichiamo il tipo di grafico che vogliamo chiamando la funzione di costruzione pertinente:
var chart = anychart.bar();d) Per rendere le cose più chiare agli spettatori, voglio dare un titolo al grafico:
chart.title('Product Sales');e) Ora, creiamo una serie:
chart.addSeries(data);// or we can specify a simple dataset within the method:chart.addSeries([19, 24, 30, 34, 42]);f) Il nostro grafico deve essere messo in un contenitore, quindi stiamo specificando quello che abbiamo appena creato:
chart.container('container');g) Tutto sembra a posto, quindi possiamo disegnare il nostro grafico ora:
chart.draw();Ecco come appare il risultato:
Quanto segue è l'intero codice per comodità dell'utente:
Sembra piuttosto semplice, vero? E ora possiamo comodamente confrontare le vendite totali per categoria.
Creazione di grafici a barre multi-serie e in pila
Ora che abbiamo imparato le basi della creazione di grafici con JavaScript, possiamo procedere alla creazione di un grafico leggermente più complesso che visualizza più informazioni. Come ho detto prima, ti mostrerò un modo semplice per creare un grafico a barre multi-serie e poi uno in pila.
Fondamentalmente, le procedure sono abbastanza simili. Come sempre, tutto inizia con i dati.
Dati da una tabella
Nel contesto del grafico a barre in alto, avevamo una variabile (le serie di dati sulle vendite del prodotto) e diverse categorie (tipi di prodotto). Per visualizzare ulteriormente la composizione di ciascun valore, che è l'essenza dei grafici a barre in pila, abbiamo bisogno di dati più dettagliati.
Per questo, possiamo usare i dati che sono già visualizzati sulla pagina. Ad esempio, se hai già una tabella HTML, puoi facilmente creare un grafico basato su di esso. Se usi AnyChart's Modulo adattatore dati tutto ciò che serve è specificare quella tabella come origine dati.
1) Ottieni l'adattatore dati:
2) Preparare i dati dalla tabella:
var tableData = anychart.data.parseHtmlTable('#tableWithData');3) Creare un grafico e specificare l'origine dati:
var chart = anychart.bar();chart.data(tableData);Il risultato immediato è un grafico a barre multi-serie che ci consente, ad esempio, di confrontare rapidamente le prestazioni di ogni prodotto all'interno di ogni singola categoria.
Modifica del tipo di serie
Tutti i dettagli necessari, inclusi i dati, sono già specificati. Ora possiamo cambiare il tipo di serie e ottenere un grafico a barre sovrapposto rispetto a quello convenzionale multi-serie. Non è affatto difficile in quanto è necessaria una sola riga di codice per impilare i valori:
chart.yScale().stackMode('values');Ecco!
Abbiamo appena creato un grafico a barre in pila al volo senza modificare effettivamente la configurazione di quella multi serie. Di conseguenza, non solo siamo pronti ora a confrontare le vendite totali per categoria come con il grafico a barre a serie singola fin dall'inizio dell'articolo, ma possiamo anche identificare quale prodotto è responsabile di rendere una categoria totale più piccola o più grande di altre .
Poiché abbiamo concordato in anticipo che il nostro obiettivo finale è un grafico a barre in pila al 100%, cambiamo semplicemente la modalità per ottenerla:
chart.yScale().stackMode('percent');
Si tratta di un grafico a barre in pila al 100%, che consente di evidenziare relazioni part-to-whole e valutare il contributo di ciascun prodotto al totale della categoria.
Personalizzazione del design
Il design è molto importante nella visualizzazione dei dati, per attirare l'attenzione, migliorare la chiarezza e mantenere l'integrità visiva all'interno del progetto web. Facilmente con questa libreria di grafici, la personalizzazione è abbastanza semplice.
Aggiungere testo
Per maggiore chiarezza, puoi fornire la visualizzazione con testi aggiuntivi. Ad esempio, assegnerò all'asse verticale un titolo e aggiungerò temporaneamente un'etichetta del grafico:
chart.xAxis().title('Products');chart.label({text: 'Classified!'});
Impostazioni colore
È possibile aggiungere il colore attraverso una tavolozza ( chart.palette () ) e modificare le impostazioni dello sfondo ( chart.background () ) tra le altre cose. Oppure puoi usare un tema:
Quindi dobbiamo specificarlo nelle impostazioni del grafico:
anychart.theme(anychart.themes.wines);
Interattività cartografica
Fare un grafico JavaScript almeno un po 'interattivo non è un grosso problema.
Probabilmente l'approccio più semplice consiste nell'abilitare lo stato di hover sui punti dati, per farli cambiare colore e aggiungere o modificare marker. Lo stato di selezione determina come ciascun punto appare dopo essere stato cliccato.
Alcune semplici interazioni hover e select based sono incluse di default quindi adesso non aggiungeremo nulla all'esempio sopra. Si prega di tornare ad esso per esplorare l'interattività di base, se vuoi.
Vale la pena parlare dell'elemento tooltip, che può fluttuare quando si passa sopra un punto. Cerco sempre di fare buon uso dei tooltip facendoli visualizzare alcune utili informazioni su a quali serie un punto appartiene, quale valore rappresenta e così via. Puoi facilmente mettere a punto i tuoi suggerimenti per mostrare qualsiasi cosa. Stiamo introducendo il tooltip e specificando cosa mostrare in esso:
var tooltip = chart.tooltip();tooltip.displayMode('union');tooltip.textFormatter('{%SeriesName}: {%Value} ({%YPercentOfCategory}%)');Ecco il risultato:
Questo è solo un breve sguardo alle opzioni di personalizzazione, per entrare nei dettagli sarebbe un intero articolo da solo. Per ora, ti suggerisco di leggere il sezione di interattività della documentazione per maggiori informazioni.
Conclusione
Come vedi, non è difficile creare grafici interattivi con JavaScript. Inoltre, puoi trovare tutti gli esempi del tutorial nel mio raccolta su CodePen e usali facilmente nel tuo lavoro. Basta copiare il codice, cambiare i miei dati con i tuoi e far funzionare il tuo progetto molto rapidamente.
Ricordati sempre di controllare la documentazione e / o il riferimento API e di prestare attenzione alle demo della libreria che stai utilizzando, ad esempio questa galleria di AnyChart . Di solito, non è complicato vedere se c'è qualcosa vicino a ciò di cui hai bisogno, trovare un esempio che si adatta meglio, fare alcune semplici modifiche e poi usarlo nel modo che ti serve.