Share
Det er mange opplæringsprogrammer om hvordan man lager CSS-bargrafer. Men noen ganger er ikke bardiagrammer nok. Hva om våre data spor skifter over tid, og en linjediagram er mer hensiktsmessig? Eller kanskje er vi ikke fornøyd med bare en bargrafikk. Skriv inn Flot, ajQuery-plugin som lar oss enkelt utnytte grafer.
I en datasentrisk verden må vi ofte vise store mengder data på nettet. Vanligvis viser vi en tabell med verdier med overskrifter, og hvis vi virkelig ville ha lyst, ville vi bruke et bilde av en graf. Folk som bilder. Jeg liker bilder. Hvorfor? Fordi det er langt lettere å tolke data når det er i visuell form. Men å lage en grafikk og oppdatere den med nye data kan være en smerte. I denne opplæringen skal vi bruke et jQuery-plugin som heter Flot for å lage grafer på fluen.
For å starte, trenger vi noen data. For denne opplæringen skal vi bruke noen BNP-data for noen forskjellige land jeg fant på Wikipedia. Dessverre går dataene bare til 2003, men siden dette ikke er en leksjon på økonomi, vil det være tilstrekkelig. La oss sette dataene i et enkelt bord og legge til noen linjer for å beskrive det.
Flot opplæring
BNP, basert på valutakurser, over tid. Verdier i milliarder USDs. 2003 2002 2001 2000 1999 1998 USA 10882 10383 10020 9762 9213 8720 EU 10970 9040 8303 8234 8901 8889 Storbritannia 1765 1564 1430 1438 1460 1423 Kina 1575 1434 1345 1252 1158 1148 India 599 510 479 457 447 414 BNP, basert på valutakurser, over tid. Verdier i milliarder USDs.
Legg merke til at tabellen er inneholdt i en div med et id med "plotarea". Grafen vi skal lage senere vil erstatte tabellen som finnes i denne diven. Tabellen ser litt stygge for øyeblikket, så la oss legge til noe CSS for å gjøre det mer presentabelt.
Du bør ha noe som ser slik ut.
Nå som vi har alle dataene i et bord, kan vi begynne å legge til i JavaScript som vil lage en graf for oss. Teknisk trenger vi ikke å ha et bord, men det er fint å ha to grunner:
Koble de nødvendige JavaScript-bibliotekene. Det er to av dem, pluss en til IE-støtte. Vi må koble jQuery først og deretter Flot-biblioteket, siden det avhenger av jQuery. Siden Flot bruker lerretelementet til å tegne grafene, må vi inkludere ExplorerCanvas-skriptet som emulerer lerretelementet i IE. Firefox, Opera og Safari-brukere trenger ikke dette, så vi bruker betingede kommentarer for å sikre at bare IE-brukere laster ned den.
Å lage en graf med Flot er ganske enkelt fordi mange av alternativene har fornuftige standardverdier. Dette betyr at du kan lage en flott graf med minimal arbeid, men kan også tilpasse det til din smak. For å lage en grunnleggende graf må vi spesifisere et beholderelement og dataene som skal grafes. Beholderelementet må også ha en spesifisert bredde og høyde, så vi bruker jQuery til å sette "plotarea" div for å ha en bredde på 500px og en høyde på 250px.
Den første parameteren er et jQuery-objekt av beholderelementet. Det andre elementet er et tredimensjonalt array hvor de første barnsarrayene er datasett og "barnebarnet" -arrayene er bestilt par som angir en X- og Y-verdi for et kartesisk plan. La oss grave BNP-dataene for USA først.
Datatabellen vi hadde før, skulle bli erstattet med en fin tittediagram. Som du kan se, er arrayet som inneholder datasettet, inneholdt i et annet foreldrearray. Hvis du vil tegne et annet datasett, legger vi bare det til som et annet element i overordnet array. La oss legge til dataene for de andre landene vi hadde i vårt bord.
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]]];
Vi har nå en ganske fin graf, men vi vet ikke hvilken linje som er hvilket land! Det vi trenger er en legende. Heldigvis støtter Flot dette, og det handler om å sette datasettene i et JSON-objekt og legge til et etikettelement.
var data = [etikett: "USA", data: [[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]] : "Kina", data: [[2003, 1575], [2002, 1434], [2001, 1345], [2000, 1252], [1999, 1158], [1998, 1148] India ", data: [[2003, 599], [2002, 510], [2001, 479], [2000, 457], [1999, 447], [1998, 414]]];
Jeg nevnte før det selv om Flot har mange fornuftige standarder. Selv om de sannsynligvis passer bra for de fleste, skjuler legenden delvis noe av dataene. Flot har en tredje parameter for å overføre alternativer i et JSON objekt.
$ .plot (plotarea, data, alternativer);
For å gjøre dataene i den fjerne enden av grafen litt mer synlig, justerer vi bakgrunnsopaciteten og margene i legenden.
var options = legend: show: true, margin: 10, backgroundOpacity: 0.5;
Noen mennesker (som meg) liker å kunne se nøyaktig hvor datapunktene er, så la oss spesifisere i alternativene for å markere hvert punkt med en sirkel med en spesifisert radius.
var options = legend: vis: true, margin: 10, backgroundOpacity: 0.5, poeng: vis: true, radius: 3;
Flott, vi har datapunkter, men hvor gikk linjene ?! La oss eksplisitt slå dem på igjen.
var options = legend: vis: true, margin: 10, backgroundOpacity: 0.5, poeng: vis: true, radius: 3, linjer: show: true;
Vår siste kode ser noe ut som dette:
Flot opplæring
BNP, basert på valutakurser, over tid. Verdier i milliarder USDs. 2003 2002 2001 2000 1999 1998 USA 10882 10383 10020 9762 9213 8720 EU 10970 9040 8303 8234 8901 8889 Storbritannia 1765 1564 1430 1438 1460 1423 Kina 1575 1434 1345 1252 1158 1148 India 599 510 479 457 447 414 BNP, basert på valutakurser, over tid. Verdier i milliarder USDs.
Det er mange muligheter med Flot. The Flot API beskriver alle de forskjellige alternativene som er tilgjengelige for å justere grafene dine, inkludert å angi forskjellige graftyper, farger, akser og til og med muliggjøre interaktive funksjoner som valg og zooming. En annen mulighet er å gjøre hele grepet fullt dynamisk og generere JavaScript-koden dynamisk med data fra en database ved hjelp av PHP.
Accentsconagua