Share
Există o mulțime de tutoriale despre cum să faceți grafice de bare CSS. Dar uneori graficele de bare nu sunt suficiente. Ce se întâmplă dacă datele noastre de date se schimbă în timp și un grafic liniar este mai potrivit? Sau poate nu suntem mulțumiți doar de un grafic. Introduceți pluginul Flot, ajQuery, care ne permite să facem cu ușurință grafice curate.
Într-o lume centrată pe date, adesea trebuie să afișăm pe web mari cantități de date. În general, vom arăta un tabel de valori cu titluri și dacă vrem cu adevărat să fim renumiți, am folosi o imagine a unui grafic. Oamenii le plac imaginile. Îmi plac imaginile. De ce? Pentru că este mult mai ușor să interpretăm datele atunci când este în formă vizuală. Cu toate acestea, crearea unui grafic grafic și actualizarea lui cu date noi poate fi o durere. În acest tutorial, vom folosi un plugin jQuery numit Flot pentru a crea grafice în zbor.
Pentru a începe, avem nevoie de date. Pentru acest tutorial, vom folosi câteva date despre PIB pentru câteva țări pe care le-am găsit pe Wikipedia. Din păcate, datele se referă doar la anul 2003, dar, din moment ce aceasta nu este o lecție despre economie, este suficientă. Să punem datele într-o tabelă simplă și să adăugăm câteva linii pentru ao descrie.
Flot Tutorial
PIB, bazat pe cursul de schimb, în timp. Valori în miliarde USD. 2003 2002 2001 2000 1999 1998 Statele Unite ale Americii 10882 10383 10020 9762 9213 8720 eu 10970 9040 8303 8234 8901 8889 Regatul Unit 1765 1564 1430 1438 1460 1423 China 1575 1434 1345 1252 1158 1148 India 599 510 479 457 447 414 PIB, bazat pe cursul de schimb, în timp. Valori în miliarde USD.
Observați că tabelul este conținut într-un div cu un id de "plotarea". Graficul pe care îl vom crea ulterior va înlocui masa din interiorul acestui div. Tabelul arată puțin urât în acest moment, deci să adăugăm câteva CSS pentru a deveni mai prezent.
Ar trebui să aveți ceva care arată așa.
Acum, că avem toate datele dintr-un tabel, putem începe să adăugăm în JavaScript care va crea un grafic pentru noi. Din punct de vedere tehnic, nu trebuie să avem o masă, dar este frumos să avem din două motive:
Conectați bibliotecile JavaScript necesare. Există două dintre ele, plus unul pentru suportul IE. Trebuie să conectăm mai întâi jQuery și apoi biblioteca Flot, deoarece depinde de jQuery. Deoarece Flot folosește elementul canvas pentru a desena graficele, trebuie să includem scriptul ExplorerCanvas care emulează elementul de panza în IE. Utilizatorii de Firefox, Opera și Safari nu au nevoie de acest lucru, astfel încât vom folosi comentarii condiționate pentru a vă asigura că numai utilizatorii IE îl descarcă.
Crearea unui grafic cu Flot este destul de simplă, deoarece multe dintre opțiuni au valori implicite sensibile. Acest lucru înseamnă că puteți crea un grafic cu aspect minunat, cu o muncă minimă, dar puteți, de asemenea, să-l optimizați după preferințele dvs. Pentru a face un grafic de bază, trebuie să specificăm un element container și datele care urmează să fie în graf. Elementul container trebuie, de asemenea, să aibă o lățime și o înălțime specificată, deci vom folosi jQuery pentru a seta "plotarea" div pentru a avea o lățime de 500px și o înălțime de 250px.
Primul parametru este un obiect jQuery al elementului container. Cel de-al doilea element este o matrice tridimensională în care primele matrice de copii sunt seturi de date, iar matricile "grandchild" sunt ordonate, specificând o valoare X și Y pentru un plan cartesian. Să analizăm mai întâi datele din PIB pentru Statele Unite.
Tabelul de date pe care l-am avut înainte trebuie înlocuit cu un grafic frumos. După cum puteți vedea, matricea care conține setul de date este conținută într-o altă matrice parentală. Pentru a arăta un alt set de date, îl adăugăm doar ca un alt element la matricea parentală. Să adăugăm datele pentru celelalte țări pe care le-am avut în tabelul nostru.
var data = [[2003, 10882], [2001, 10020], [2000, 9762], [1999, 9213], [ 2002, 9030], [2001, 8303], [2000, 8234], [1999, 8901], [1998, 8889] 2000, 1438], [1999, 1460], [1998, 1423], [2002, 1575], [2002, 1434], [2001, 1345] 1998, 1148]], [[2003, 599], [2002, 510], [2001, 479], [2000, 457], [1999, 447], [1998, 414]];
Acum avem un grafic destul de bun, dar nu știm ce linie este ce țară! Avem nevoie de o legendă. Din fericire, Flot acceptă acest lucru și este o chestiune de a pune bazele noastre de date într-un obiect JSON și de a adăuga un element de etichetă.
var data = [etichetă: "SUA", date: [[2003, 10882], [2002, 10383], [2001, 10020], [2000, 9762], [1999, 9213], [1998, 8720] , eticheta: "EU", date: [[2003, 10970], [2002, 9040], 2001, 8303, 2000, 8234, 1999, 8901, etichetă: "UK", date: [[2003, 1795], [2002, 1564], [2001, 1430], [2000, 1438], [ : "China", date: [[2003, 1575], [2002, 1434], [2001, 1345], [2000, 1252], [1999, 1158] India ", date: [[2003, 599], [2002, 510], [2001, 479], [2000, 457], [1999, 447], [1998, 414]];
Am menționat anterior că, deși Flot are multe implicații sensibile. Deși sunt probabil bine pentru majoritatea oamenilor, legenda acoperă parțial unele date. Flot are un al treilea parametru pentru a trece în opțiuni într-un obiect JSON.
$ .plot (plotare, date, opțiuni);
Pentru a face datele de la capătul inferior al graficului mai vizibile, vom ajusta opacitatea și marginea fundalului legendei.
var opțiuni = legendă: show: true, margin: 10, backgroundOpacity: 0.5;
Unii oameni (ca mine) pot să vadă exact unde sunt punctele de date, așa că să specificăm în opțiunile de marcare a fiecărui punct cu un cerc cu o anumită rază.
var opțiuni = legendă: show: true, margin: 10, backgroundOpacity: 0.5, puncte: show: true, radius: 3;
Excelent, avem puncte de date, dar unde merge linia ?! Să le întoarcem în mod explicit.
var opțiuni = legendă: show: true, margin: 10, backgroundOpacity: 0.5, puncte: show: true, radius: 3 linii: show: true;
Codul nostru final arată cam așa:
Flot Tutorial
PIB, bazat pe cursul de schimb, în timp. Valori în miliarde USD. 2003 2002 2001 2000 1999 1998 Statele Unite ale Americii 10882 10383 10020 9762 9213 8720 eu 10970 9040 8303 8234 8901 8889 Regatul Unit 1765 1564 1430 1438 1460 1423 China 1575 1434 1345 1252 1158 1148 India 599 510 479 457 447 414 PIB, bazat pe cursul de schimb, în timp. Valori în miliarde USD.
Există multe posibilități cu Flot. API-ul Flot detaliază toate opțiunile disponibile pentru modificarea graficelor, inclusiv specificarea diferitelor tipuri de grafuri, culori, axe și chiar permițând caracteristici interactive cum ar fi selectarea și mărirea. O altă posibilitate este de a face din întregul lucru dinamic complet și de a genera codul JavaScript dinamic cu datele dintr-o bază de date folosind PHP.
Accentsconagua