Share
Er zijn veel tutorials over het maken van CSS-staafdiagrammen. Maar soms zijn staafdiagrammen niet voldoende. Wat als onze datatracks in de loop van de tijd veranderen en een lijngrafiek meer geschikt is? Of misschien zijn we niet tevreden met alleen een staafdiagram. Voer Flot, ajQuery plug-in in waarmee we gemakkelijk mooie grafieken kunnen maken.
In een wereld waarin gegevens centraal staan, moeten we vaak grote hoeveelheden gegevens op internet weergeven. Over het algemeen laten we een tabel met waarden zien met kopjes en als we er echt zin in zouden hebben, zouden we een afbeelding van een grafiek gebruiken. Mensen houden van foto's. Ik hou van foto's. Waarom? Omdat het veel eenvoudiger is om gegevens te interpreteren wanneer het in visuele vorm is. Het kan echter lastig zijn om een afbeelding te maken en deze bij te werken met nieuwe gegevens. In deze zelfstudie gebruiken we een jQuery-plug-in met de naam Flot om grafieken on the fly te maken.
Om te beginnen hebben we wat gegevens nodig. Voor deze zelfstudie gebruiken we enkele BBP-gegevens voor een paar verschillende landen die ik op Wikipedia heb gevonden. Helaas gaan de gegevens alleen naar 2003 maar omdat dit geen les over economie is, zal het volstaan. Laten we de gegevens in een eenvoudige tabel plaatsen en een paar regels toevoegen om het te beschrijven.
Flot-zelfstudie
BBP, gebaseerd op wisselkoersen, in de tijd. Waarden in miljard USD's. 2003 2002 2001 2000 1999 1998 Verenigde Staten van Amerika 10.882 10.383 10.020 9762 9213 8720 EU 10.970 9040 8303 8234 8901 8889 UK 1765 1564 1430 1438 1460 1423 China 1575 1434 1345 1252 1158 1148 Indië 599 510 479 457 447 414 BBP, gebaseerd op wisselkoersen, in de tijd. Waarden in miljard USD's.
Merk op dat de tabel is opgenomen in een div met een id van "plotarea". De grafiek die we later zullen maken, zal de tabel in deze div vervangen. De tabel ziet er op dit moment een beetje lelijk uit, dus laten we wat CSS toevoegen om het presentabeler te maken.
Je zou iets moeten hebben dat er zo uitziet.
Nu we alle gegevens in een tabel hebben, kunnen we beginnen met het toevoegen van JavaScript waarmee we een grafiek kunnen maken. Technisch gezien hoeven we geen tafel te hebben, maar het is leuk om er twee redenen voor te hebben:
Koppel de vereiste JavaScript-bibliotheken. Er zijn er twee, plus nog een voor IE-ondersteuning. We moeten jQuery eerst linken en daarna de Flot-bibliotheek, omdat deze afhankelijk is van jQuery. Aangezien Flot het canvaselement gebruikt om de grafieken te tekenen, moeten we het ExplorerCanvas-script opnemen dat het canvaselement in IE emuleert. Gebruikers van Firefox, Opera en Safari hebben dit niet nodig, dus we gebruiken voorwaardelijke opmerkingen om ervoor te zorgen dat alleen IE-gebruikers het downloaden.
Het maken van een grafiek met Flot is vrij eenvoudig omdat veel van de opties verstandige standaardwaarden hebben. Dit betekent dat u een goed uitziende grafiek kunt maken met minimaal werk, maar het ook kunt aanpassen aan uw wensen. Om een basisgrafiek te maken, moeten we een containerelement en de te grafische gegevens opgeven. Het containerelement moet ook een opgegeven breedte en hoogte hebben, dus gebruiken we jQuery om de divisie "plotarea" in te stellen op een breedte van 500px en een hoogte van 250px.
De eerste parameter is een jQuery-object van het containerelement. Het tweede element is een driedimensionale array waarbij de eerste onderliggende arrays datasets zijn en de "kleinkind" -arrays geordende paren zijn die een X- en Y-waarde voor een Cartesisch vlak aangeven. Laten we eerst de BBP-gegevens voor de VS in kaart brengen.
De gegevenstabel die we eerder hadden moet worden vervangen door een mooie kijkgrafiek. Zoals u kunt zien, bevindt de array met de dataset zich in een andere bovenliggende array. Om een andere gegevensset in een grafiek weer te geven, voegen we deze toe als een ander element voor de bovenliggende array. Laten we de gegevens toevoegen voor de andere landen die we in onze tabel hadden.
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]]];
We hebben nu een redelijk goed uitziende grafiek, maar we weten niet welke regel welk land is! Wat we nodig hebben is een legende. Gelukkig ondersteunt Flot dit en is het een kwestie van onze datasets in een JSON-object plaatsen en een labelelement toevoegen.
var data = [label: "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]], label : "China", gegevens: [[2003, 1575], [2002, 1434], [2001, 1345], [2000, 1252], [1999, 1158], [1998, 1148]], label: " India ", gegevens: [[2003, 599], [2002, 510], [2001, 479], [2000, 457], [1999, 447], [1998, 414]]];
Ik heb eerder gezegd dat Flot veel verstandige standaardwaarden heeft. Hoewel ze waarschijnlijk voor de meeste mensen goed zullen zijn, verdoezelt de legenda sommige van de gegevens gedeeltelijk. Flot heeft een derde parameter voor het doorgeven van opties in een JSON-object.
$ .plot (plotarea, data, opties);
Om de gegevens aan het einde van de grafiek iets zichtbaarder te maken, passen we de dekking en marges van de legenda aan.
var options = legend: show: true, margin: 10, backgroundOpacity: 0.5;
Sommige mensen (zoals ik) vinden het leuk precies te kunnen zien waar de gegevenspunten zich bevinden, dus laten we in de opties specificeren om elk punt te markeren met een cirkel van een bepaalde straal.
var options = legend: show: true, margin: 10, backgroundOpacity: 0.5, points: show: true, radius: 3;
Geweldig, we hebben datapunten, maar waar zijn de lijnen gebleven ?! Laten we ze expliciet terugzetten.
var options = legend: show: true, margin: 10, backgroundOpacity: 0.5, points: show: true, radius: 3, lines: show: true;
Onze definitieve code ziet er ongeveer zo uit:
Flot-zelfstudie
BBP, gebaseerd op wisselkoersen, in de tijd. Waarden in miljard USD's. 2003 2002 2001 2000 1999 1998 Verenigde Staten van Amerika 10.882 10.383 10.020 9762 9213 8720 EU 10.970 9040 8303 8234 8901 8889 UK 1765 1564 1430 1438 1460 1423 China 1575 1434 1345 1252 1158 1148 Indië 599 510 479 457 447 414 BBP, gebaseerd op wisselkoersen, in de tijd. Waarden in miljard USD's.
Er zijn veel mogelijkheden met Flot. De Flot-API bevat alle verschillende opties die beschikbaar zijn voor het aanpassen van uw grafieken, waaronder het specificeren van verschillende grafiektypen, kleuren, assen en zelfs het inschakelen van interactieve functies zoals selectie en zoomen. Een andere mogelijkheid is om het hele ding volledig dynamisch te maken en de JavaScript-code dynamisch te genereren met gegevens uit een database met behulp van PHP.
Accentsconagua