Share
Ci sono molti tutorial su come creare i grafici a barre CSS. Ma a volte, i grafici a barre non sono sufficienti. Cosa succede se le nostre tracce di dati cambiano nel tempo e un grafico a linee è più appropriato? O forse non siamo soddisfatti solo con un grafico a barre. Inserisci Flot, un plugin aJQuery che ci consente di creare grafici di bell'aspetto con facilità.
In un mondo incentrato sui dati, spesso dobbiamo visualizzare grandi quantità di dati sul web. Generalmente mostriamo una tabella di valori con intestazioni e se volessimo davvero diventare fantasiosi useremmo un'immagine di un grafico. Alla gente piacciono le foto Mi piacciono le foto Perché? Perché è molto più semplice interpretare i dati quando è in forma visiva. Tuttavia, creare un grafico e aggiornarlo con nuovi dati può essere un problema. In questo tutorial, utilizzeremo un plugin jQuery chiamato Flot per creare grafici al volo.
Per iniziare, abbiamo bisogno di alcuni dati. Per questo tutorial, utilizzeremo alcuni dati sul PIL per alcuni paesi diversi che ho trovato su Wikipedia. Sfortunatamente i dati vanno solo al 2003, ma poiché questa non è una lezione di economia, basterà. Mettiamo i dati in una tabella semplice e aggiungiamo poche righe per descriverlo.
Flot Tutorial
PIL, basato sui tassi di cambio, nel tempo. Valori in miliardi di dollari. 2003 2002 2001 2000 1999 1998 Stati Uniti d'America 10.882 10.383 10.020 9.762 9.213 8.720 Unione Europea 10.970 9040 8303 8.234 8.901 8889 UK 1.765 1.564 1.430 1.438 1.460 1.423 Cina 1.575 1.434 1.345 1.252 1.158 1.148 India 599 510 479 457 447 414 PIL, basato sui tassi di cambio, nel tempo. Valori in miliardi di dollari.
Si noti che la tabella è contenuta in un div con un id di "plotarea". Il grafico che verrà creato in seguito sostituirà la tabella contenuta in questo div. Al momento il tavolo sembra un po 'brutto, quindi aggiungiamo un po' di CSS per renderlo più presentabile.
Dovresti avere qualcosa che assomigli a questo.
Ora che abbiamo tutti i dati in una tabella, possiamo iniziare ad aggiungere nel JavaScript che creerà un grafico per noi. Tecnicamente, non dobbiamo avere un tavolo, ma è bello avere per due motivi:
Collega le librerie JavaScript richieste. Ce ne sono due, più uno per il supporto di IE. Dobbiamo collegare prima jQuery e poi la libreria Flot poiché dipende da jQuery. Poiché Flot usa l'elemento canvas per disegnare i grafici, dobbiamo includere lo script ExplorerCanvas che emula l'elemento canvas in IE. Gli utenti di Firefox, Opera e Safari non ne hanno bisogno, quindi useremo i commenti condizionali per assicurarci che solo gli utenti di IE lo scarichino.
La creazione di un grafico con Flot è abbastanza semplice perché molte delle opzioni hanno valori predefiniti sensibili. Ciò significa che puoi creare un grafico di bell'aspetto con un lavoro minimo, ma puoi anche modificarlo a tuo piacimento. Per creare un grafico di base, è necessario specificare un elemento contenitore e i dati da rappresentare graficamente. Anche l'elemento contenitore deve avere una larghezza e un'altezza specificate, quindi utilizzeremo jQuery per impostare il div "plotarea" per avere una larghezza di 500 px e un'altezza di 250 px.
Il primo parametro è un oggetto jQuery dell'elemento contenitore. Il secondo elemento è un array tridimensionale in cui i primi array figlio sono dataset e gli array "grandchild" sono coppie ordinate che specificano un valore X e Y per un piano cartesiano. Analizziamo prima i dati del PIL per gli Stati Uniti.
La tabella dati che avevamo prima dovrebbe essere sostituita con un grafico di aspetto gradevole. Come puoi vedere, la matrice contenente il set di dati è contenuta in un altro array principale. Per rappresentare graficamente un altro set di dati, lo aggiungiamo come un altro elemento all'array genitore. Aggiungiamo i dati per gli altri paesi che abbiamo avuto nella nostra tabella.
var data = [[[2003, 10882], [2002, 10383], [2001, 10020], [2000, 9762], [1999, 9213], [1998, 8720]], [[2003, 10970], [ 2002, 9040], [2001, 8303], [2000, 8234], [1999, 8901], [1998, 8889]], [[2003, 1795], [2002, 1564], [2001, 1430], [ 2000, 1438], [1999, 1460], [1998, 1423]], [[2003, 1575], [2002, 1434], [2001, 1345], [2000, 1252], [1999, 1158], [ 1998, 1148]], [[2003, 599], [2002, 510], [2001, 479], [2000, 457], [1999, 447], [1998, 414]]];
Ora abbiamo un grafico abbastanza bello, ma non sappiamo quale linea è in quale paese! Ciò di cui abbiamo bisogno è una leggenda. Fortunatamente, Flot supporta questo ed è una questione di mettere i nostri set di dati in un oggetto JSON e aggiungere un elemento etichetta.
var data = [label: "USA", dati: [[2003, 10882], [2002, 10383], [2001, 10020], [2000, 9762], [1999, 9213], [1998, 8720]] , label: "EU", data: [[2003, 10970], [2002, 9040], [2001, 8303], [2000, 8234], [1999, 8901], [1998, 8889]], label: "UK", data: [[2003, 1795], [2002, 1564], [2001, 1430], [2000, 1438], [1999, 1460], [1998, 1423]], etichetta : "Cina", dati: [[2003, 1575], [2002, 1434], [2001, 1345], [2000, 1252], [1999, 1158], [1998, 1148]], label: " India ", data: [[2003, 599], [2002, 510], [2001, 479], [2000, 457], [1999, 447], [1998, 414]]];
Ho già detto che sebbene Flot abbia molte impostazioni predefinite. Mentre probabilmente stanno bene per la maggior parte delle persone, la leggenda parzialmente oscura alcuni dei dati. Flot ha un terzo parametro per passare le opzioni in un oggetto JSON.
$ .plot (plotarea, dati, opzioni);
Per rendere un po 'più visibili i dati all'estremità del grafico, regoleremo l'opacità dello sfondo e i margini della legenda.
var options = legend: show: true, margin: 10, backgroundOpacity: 0.5;
Ad alcune persone (come me) piace essere in grado di vedere esattamente dove sono i punti dati, quindi specifichiamo nelle opzioni per contrassegnare ogni punto con un cerchio di un raggio specificato.
var options = legend: show: true, margin: 10, backgroundOpacity: 0.5, points: show: true, raggio: 3;
Bene, abbiamo dei punti dati, ma dove vanno le linee ?! Riaccendiamoli esplicitamente.
var options = legend: show: true, margin: 10, backgroundOpacity: 0.5, points: show: true, raggio: 3, lines: show: true;
Il nostro codice finale è simile a questo:
Flot Tutorial
PIL, basato sui tassi di cambio, nel tempo. Valori in miliardi di dollari. 2003 2002 2001 2000 1999 1998 Stati Uniti d'America 10.882 10.383 10.020 9.762 9.213 8.720 Unione Europea 10.970 9040 8303 8.234 8.901 8889 UK 1.765 1.564 1.430 1.438 1.460 1.423 Cina 1.575 1.434 1.345 1.252 1.158 1.148 India 599 510 479 457 447 414 PIL, basato sui tassi di cambio, nel tempo. Valori in miliardi di dollari.
Ci sono molte possibilità con Flot. L'API Flot descrive tutte le diverse opzioni disponibili per modificare i tuoi grafici, specificando diversi tipi di grafici, colori, assi e persino abilitando funzioni interattive come la selezione e lo zoom. Un'altra possibilità è rendere l'intera cosa completamente dinamica e generare il codice JavaScript in modo dinamico con i dati di un database usando PHP.
Accentsconagua