Share
Google Chart Tools offre diversi modi per aggiungere facilmente grafici a qualsiasi pagina web. I grafici possono essere statici o interattivi e in questo tutorial impareremo come utilizzarli entrambi.
Esistono due diversi tipi di grafici che possono essere generati da Strumenti grafico: grafici di immagine (grafici statici) e grafici interattivi.
I grafici immagine sono abbastanza facili da usare, tuttavia i grafici interattivi sono molto più flessibili, perché possono attivare eventi che possiamo usare per interagire con altri elementi nella pagina.
Sì, c'è un modo super facile per includere un grafico nella tua pagina - facile come scrivere un URL come questo:
images_27_3 / facile-grafici-con-google-chart-tools.jpg
se copi e incolla questo URL nel tuo browser, vedrai quanto segue:
Puoi posizionare l'immagine ovunque nella tua pagina usando l'URL come src attributo di un tag immagine:
Questa è l'API di Google Charts. Le richieste vengono inviate come URL GET o POST e il server dei grafici di Google restituisce un'immagine PNG in risposta. Il tipo di grafico, dati e opzioni sono tutti specificati all'interno della query quer dell'URL. L'API definisce come farlo. Rivediamo le diverse opzioni.
http://chart.apis.google.com/chart?
Questo è l'URL di base; lo useremo per tutte le richieste del grafico immagine. Il resto sono parametri nella forma nome = valore separato da &.
Ci sono solo tre parametri obbligatori: cht, chs e chd. Il resto è facoltativo.
cht = p3
Questo è il tipo di grafico. Stiamo usando un grafico a torta 3D che è p3. Puoi visitare la galleria di grafici per tutti i tipi di grafici disponibili.
CHS = 450x200
Questa è la dimensione del grafico in pixel (larghezza x altezza).
CHD = t: 2,4,3,1
Questi sono i dati da visualizzare nel grafico. La prima lettera (t) indica il formato dei dati. In questo caso, utilizziamo il formato di testo di base che è un elenco di valori separati da virgola.
Ogni tipo di grafico ha alcuni parametri opzionali per configurare alcuni aspetti del tuo grafico: titolo, etichette, tipi di carattere, colori, sfumature, ecc. Questo è ciò che abbiamo incluso:
CHL = Cellulari | Computer | Servizi | Altri
Etichette del grafico per ogni fetta di torta.
CHTT = Società% 20Sales
Titolo del grafico.
CHCO = ff0000
Colore del grafico in formato esadecimale rrggbb.
Se si specifica un solo colore, le sezioni avranno diverse gradazioni. Puoi anche specificare un gradiente con due colori (chco = ff0000,00ff00) o un colore per ogni sezione (chco = ff0000 | 3355aa | 8322c2 | 112233).
Questo è per grafici di immagine. Non c'è molto da fare! Esistono molti tipi di grafici diversi e, se giochi con i parametri, puoi ottenere risultati davvero interessanti. Google Live Chart Playground è uno strumento eccellente per farlo. Giochi con i parametri e vedi i cambiamenti nell'immagine generata - un modo semplice per mettere a punto l'url per il tuo grafico!
Per includere grafici interattivi nelle tue pagine web, devi utilizzare una API diversa: la API di visualizzazione di Google. In questo caso, l'interfaccia non è un URL. Dovrai utilizzare una libreria JavaScript e scrivere alcune righe di codice, ma niente di difficile.
C'è una galleria di visualizzazioni pronte (grafici) che puoi usare. Puoi anche creare e condividere il tuo grafico, ma le visualizzazioni nella galleria probabilmente copriranno la maggior parte delle tue esigenze di visualizzazione dei dati.
Il livello di interattività dipende dalle visualizzazioni particolari che utilizzi. Di solito, il grafico reagisce in un determinato modo quando viene cliccato (mostrando un suggerimento o animazione), ma la funzione davvero potente è che possono attivare eventi e puoi registrare i callback per eseguire qualsiasi azione correlata a quell'evento. Esempi di eventi possono essere selezionare una barra o una fetta di torta, mouseOver, mouseOut, ecc.
Useremo i dati locali per alimentare le visualizzazioni nei nostri esempi, ma puoi ottenere i tuoi dati in qualsiasi altro modo. Un'opzione comune sarebbe quella di recuperare i dati da un database usando AJAX. Puoi persino usare il API di visualizzazione; definisce anche un modo per richiedere e offrire (per i server) i dati in un formato che può essere immediatamente utilizzato in qualsiasi visualizzazione, ma non lo riguarderemo qui.
Non importa come otteniamo i nostri dati, ma tutte le visualizzazioni devono riceverlo in un oggetto DataTable. È fondamentalmente una tabella con righe e colonne. Ogni colonna è definita con un particolare tipo di dati (e un ID e un'etichetta che sono facoltativi).
Per fare riferimento a una determinata cella nella tabella, si utilizza la coppia (riga colonna). La riga è sempre un numero, che inizia uno zero. La colonna può anche essere un numero a base zero o un ID opzionale.
Se vogliamo mostrare i guadagni della nostra azienda nel 2009 in un istogramma, dobbiamo preparare i dati nel modo seguente:
| Quarti 2009 | guadagni |
|---|---|
| Q1 | 308 |
| Q2 | 257 |
| Q3 | 375 |
| Q4 | 123 |
Due colonne: la prima (con tipo 'stringa') è l'etichetta per ogni barra nel grafico e la seconda (con tipo 'numero') è il valore per quella barra. Abbiamo quattro righe che significa che hanno quattro barre da visualizzare.
Come lo inseriamo in un oggetto DataTable? Questo è il codice per farlo - ogni riga è spiegata più avanti:
Accentsconagua
// crea oggetto tabella dati var dataTable = new google.visualization.DataTable (); // define columns dataTable.addColumn ('string', 'Quarters 2009'); dataTable.addColumn ('numero', 'Guadagni'); // definisce le righe di dati dataTable.addRows ([['Q1', 308], ['Q2', 257], ['Q3', 375], ['Q4', 123]]); Per prima cosa creiamo il nostro oggetto DataTable con:
var dataTable = new google.visualization.DataTable ();
Quindi definiamo le due colonne nella nostra tabella usando il metodo addColumn (). Il primo valore è il tipo e il secondo valore è l'etichetta facoltativa.
dataTable.addColumn ('string', 'Quarters 2009'); dataTable.addColumn ('numero', 'Guadagni'); E infine, definiamo le righe di dati usando il metodo addRows ().
dataTable.addRows ([['Q1', 308], ['Q2', 257], ['Q3', 375], ['Q4', 123]]);
Ogni riga è una matrice e tutti i dati sono anche racchiusi in un'altra matrice.
Le righe possono anche essere definite una riga alla volta:
dataTable.addRow ([ 'Q1', 308]);
o anche una cella alla volta:
data.setValue (0, 0, 'Q1');
Qui, i primi due numeri sono rispettivamente la riga e la colonna.
Questo è il modo per creare oggetti DataTable. Ogni visualizzazione deve essere caricata con i dati in questo formato. Ciò non significa che il tavolo sia lo stesso per ogni visualizzazione. Il numero e il tipo particolare di colonne e righe devono essere controllati nella documentazione per ciascun grafico.
Per questo primo esempio, utilizzeremo un grafico a colonne per presentare i nostri dati. Nella Google Visualization Gallery, possiamo fare clic su qualsiasi tipo di grafico per visualizzare documentazione ed esempi.
Per utilizzare qualsiasi visualizzazione, dobbiamo caricare l'API AJAX di Google prima; fornisce le funzionalità di base necessarie in molte altre API di google.
Ora possiamo caricare l'API di visualizzazione utilizzando la funzione google.load () (dall'API AJAX):
google.load ('visualizzazione', '1', 'pacchetti': ['columnchart']); Il secondo parametro, '1', si riferisce alla versione dell'API da caricare ('1' indica la versione corrente). 'pacchetti' è una matrice con tutte le visualizzazioni che useremo. In questo caso, ne useremo solo uno: il grafico a colonne.
A questo punto, abbiamo le librerie necessarie per creare il nostro oggetto DataTable e visualizzare il nostro grafico, tuttavia, dobbiamo essere sicuri che la visualizzazione sia completamente caricata, altrimenti avremo errori JavaScript e il nostro grafico non verrà visualizzato.
Il modo per farlo è registrando un callback. La funzione verrà chiamata quando viene caricata la visualizzazione (API e pacchetto).
// imposta callback google.setOnLoadCallback (createChart);
La funzione createChart è dove creiamo la nostra tabella di dati e il nostro grafico. Il codice finale completo è:
Esercitazione di Google Charts
L'oggetto grafico viene creato con questa linea:
var chart = new google.visualization.ColumnChart (document.getElementById ('chart')); L'argomento è il riferimento DOM all'elemento che contiene la visualizzazione. In questo caso, abbiamo a
.Quindi, definiamo le opzioni che vogliamo e disegniamo il grafico:
var options = width: 400, height: 240, is3D: true, title: 'Company Earnings'; chart.draw (dataTable, options);
Il nostro grafico si presenta così:
Nota: tutte le immagini qui sono statiche per rendere il tutorial disponibile indipendentemente dal browser o dalle impostazioni JavaScript. Rivedi la demo dal vivo per la versione interattiva.
Il vantaggio di avere un formato dati chiaramente definito è che una volta che sai come creare e popolare un oggetto DataTable, sai come alimentare qualsiasi visualizzazione. Devi solo controllare la documentazione per vedere la tabella specifica (numero e tipo di colonne) che devi costruire.
Per un grafico a torta, possiamo usare lo stesso tavolo che abbiamo ora. Aggiungiamo un grafico a torta nella stessa pagina.
Dobbiamo aggiungere il nostro nuovo pacchetto nella linea google.load ():
google.load ('visualizzazione', '1', 'pacchetti': ['columnchart', 'piechart']); ed estendi la nostra funzione createChart con queste due linee:
var secondChart = new google.visualization.PieChart (document.getElementById ('secondChart')); secondChart.draw (dataTable, opzioni); Il codice completo è:
Esercitazione di Google Charts
E i grafici generati:
Nota: controlla la demo dal vivo per la versione interattiva.
Questo è stato facile in questo caso, perché entrambe le visualizzazioni utilizzavano le stesse colonne e righe della tabella. Ma ci sono visualizzazioni che richiedono più colonne o colonne di tipi diversi e non è possibile utilizzare direttamente la tabella di dati. Tuttavia, è possibile risolvere questo generando una diversa visualizzazione della tabella originale per alimentare una visualizzazione. Lo esamineremo a breve.
La tabella dati per un istogramma non deve essere semplice come nell'esempio precedente. Ad esempio, possiamo avere barre che rappresentano i guadagni per ogni trimestre negli ultimi tre anni. In quel caso i dati
tabella sarebbe così:
| alloggio | Guadagni 2009 | Guadagni 2008 | Guadagni 2007 |
|---|---|---|---|
| Q1 | 308 | 417 | 500 |
| Q2 | 257 | 300 | 420 |
| Q3 | 375 | 350 | 235 |
| Q4 | 123 | 100 | 387 |
L'unico codice che dobbiamo modificare dal nostro primo esempio è l'oggetto DataTable, per aggiungere altre due colonne e più dati in ogni riga:
// crea oggetto tabella dati var dataTable = new google.visualization.DataTable (); // define columns dataTable.addColumn ('string', 'Quarters'); dataTable.addColumn ('numero', 'Earnings 2009'); dataTable.addColumn ('numero', 'Earnings 2008'); dataTable.addColumn ('numero', 'Earnings 2007'); // definisce le righe di dati dataTable.addRows ([['Q1', 308,417,500], ['Q2', 257,300,420], ['Q3', 375,350,235], ['Q4', 123,100,387]]); Il resto del codice non cambia. Il grafico generato è:
Ma cosa succede se ora vogliamo utilizzare un grafico a torta per rappresentare parte di questi dati? Non possiamo usare la stessa tabella di dati come facevamo prima, perché i grafici a torta hanno bisogno di una tabella a due colonne (etichetta di sezione e valore). Esiste un modo semplice per ottenere una tabella diversa da un oggetto DataTable esistente e utilizzarlo per alimentare un grafico: Viste dei dati.
Le viste sono un modo per adattare la nostra tabella per una visualizzazione diversa. Se ora vogliamo visualizzare, nella stessa pagina, un grafico a torta che mostra la distribuzione delle entrate trimestrali per l'anno scorso, la tabella di cui abbiamo bisogno è solo questa:
| alloggio | Guadagni 2009 |
|---|---|
| Q1 | 308 |
| Q2 | 257 |
| Q3 | 375 |
| Q4 | 123 |
Una vista dati (oggetto DataView) consente di utilizzare solo un sottoinsieme dei dati originali. È possibile riordinare o duplicare colonne e righe o introdurre colonne con valori calcolati.
Per prima cosa, crea l'oggetto View:
var view = new google.visualization.DataView (dataTable);
Una vista dati viene inizializzata con la tabella originale e quindi utilizziamo i metodi DataView per nascondere, mostrare o filtrare colonne o righe (setColumns (), hideColumns (), setRows (), hideRows (), getFilteredRows, getColumnRange, ecc.).
Possiamo filtrare la tabella originale per ottenere solo le prime due colonne (colonne 0 e 1) utilizzando setColumns ():
view.setColumns ([0, 1]);
Ora possiamo disegnare il grafico a torta usando questa vista come tabella di dati:
secondChart.draw (vista, opzioni);
Ricorda che dobbiamo includere il pacchetto piechart con google.load () e dobbiamo creare l'oggetto pieChart con:
var secondChart = new google.visualization.PieChart
Ora possiamo vedere entrambi i grafici generati usando la stessa tabella di dati:
Gli eventi forniscono un modo semplice per connettere le tue visualizzazioni con altri elementi sulla tua pagina. Le visualizzazioni possono attivare alcuni eventi ed è possibile registrare un listener per reagire a quell'evento ed eseguire un'azione. Il modello di eventi è simile al modello di eventi del browser. Ancora una volta, dobbiamo esaminare la documentazione per verificare gli eventi attivati per ogni visualizzazione.
Per mostrare come funzionano gli eventi, torniamo al nostro primo esempio, il grafico a colonne più semplice:
Questo grafico attiva eventi al passaggio del mouse, al passaggio del mouse e alla selezione. Ciò significa che possiamo renderlo molto più interattivo di quanto lo sia per impostazione predefinita.
Poiché questo grafico mostra i guadagni per un'azienda, potrebbe essere interessante mostrare un messaggio con una breve spiegazione dei risultati o delle vendite più importanti per ogni trimestre quando l'utente posiziona il puntatore su una colonna (onmouseover evento).
Il nostro callback sarà Mostra dettagli(), e lo registriamo per il onmouseover evento:
google.visualization.events.addListener (grafico, 'onmouseover', showDetails);
Il primo parametro è la variabile che contiene il nostro oggetto grafico.
Dovremo anche nascondere il messaggio quando il puntatore esce dalla colonna, quindi è necessario chiamare un'altra funzione quando onmouseout trigger di eventi:
google.visualization.events.addListener (grafico, 'onmouseout', hideDetails);
All'interno del
o la nostra pagina HTML dobbiamo definire quattro div con i messaggi:Questi sono i dettagli per Q1 ...Qui hai i numeri per Q2 ...Spiegazioni per il terzo trimestre ...Il 4 ° trimestre era come previsto ...
E poi le funzioni di callback mostrano solo o nascondono il messaggio corrispondente:
function showDetails (e) switch (e ['row']) caso 0: document.getElementById ('details0'). style.visibility = 'visible'; rompere; caso 1: document.getElementById ('details1'). style.visibility = 'visible'; rompere; caso 2: document.getElementById ('details2'). style.visibility = 'visible'; rompere; caso 3: document.getElementById ('details3'). style.visibility = 'visible'; rompere; function hideDetails (e) switch (e ['row']) caso 0: document.getElementById ('details0'). style.visibility = 'hidden'; rompere; caso 1: document.getElementById ('details1'). style.visibility = 'hidden'; rompere; caso 2: document.getElementById ('details2'). style.visibility = 'hidden'; rompere; caso 3: document.getElementById ('details3'). style.visibility = 'hidden'; rompere; Le nostre funzioni accettano un singolo parametro: l'evento sparato. Questo oggetto ha tutte le informazioni disponibili sui dettagli dell'evento.
Per sapere di quale barra siamo finiti, controlliamo la proprietà 'row' dell'oggetto evento. Questa informazione si riferisce alle righe e alle colonne dell'oggetto DataTable, ma sappiamo che la riga 0 corrisponde a Q1, prima colonna e così via.
Nota: non tutti gli eventi passano l'oggetto evento. A volte devi usare metodi per ottenere le informazioni di cui hai bisogno, leggere la documentazione di visualizzazione per sapere come ottenere le informazioni relative all'evento licenziato.
Il seguente elenco include il codice completo per questo esempio. Ho incluso un breve snippet CSS interno per nascondere i div dei messaggi e fornire una formattazione minima.
Esercitazione su Google Chart Tools Questi sono i dettagli per Q1 ...Qui hai i numeri per Q2 ...Spiegazioni per il terzo trimestre ...Il 4 ° trimestre era come previsto ...
E questo è il risultato:
Ancora una volta, controlla la demo dal vivo per vedere l'interattività.
Come con le immagini statiche, c'è un Google Code Playground in cui puoi giocare con le tue visualizzazioni e parametri e visualizzare i risultati:
Spero che questo dovrebbe essere sufficiente per iniziare con Google Chart Tools. Una volta capito, scoprirai che un enorme livello di flessibilità è a tua disposizione nelle tue applicazioni web. Grazie per aver letto!
