Share
Det finns många handledningar om hur man gör CSS-stapeldiagram. Men ibland är stapeldiagram inte tillräckligt. Vad händer om våra data spår ändras över tiden och ett linjediagram är mer lämpligt? Eller kanske är vi inte nöjda med bara en stapeldiagram. Ange Flot, ajQuery-plugin som gör att vi enkelt kan göra snygga grafer.
I en datacentrisk värld måste vi ofta visa stora mängder data på webben. I allmänhet visar vi en tabell med värden med rubriker och om vi verkligen ville bli snygga skulle vi använda en bild av en graf. Folk som bilder. Jag gillar bilder. Varför? Eftersom det är mycket lättare att tolka data när det är i visuell form. Men att skapa en bildgrafik och uppdatera den med nya data kan vara en smärta. I den här handledningen kommer vi att använda ett jQuery-plugin som heter Flot för att skapa grafer i fluga.
För att starta behöver vi lite data. För denna handledning kommer vi att använda några BNP-data för några olika länder som jag hittade på Wikipedia. Tyvärr går data endast 2003, men eftersom det inte är en lektion om ekonomi, är det tillräckligt. Låt oss lägga in data i en enkel tabell och lägga till några rader för att beskriva det.
Flot handledning
BNP, baserat på växelkurser, över tiden. Värden i miljarder USD. 2003 2002 2001 2000 1999 1998 usa 10.882 10.383 10.020 9762 9213 8720 EU 10.970 9040 8303 8234 8901 8889 Storbritannien 1765 1564 1430 1438 1460 1423 Kina 1575 1434 1345 1252 1158 1148 indien 599 510 479 457 447 414 BNP, baserat på växelkurser, över tiden. Värden i miljarder USD.
Observera att tabellen finns i en div med ett id för "plotarea". Den graf som vi kommer att skapa senare kommer att ersätta tabellen som finns i denna div. Bordet ser lite styggt ut, så låt oss lägga till lite CSS för att göra det mer presenterbart.
Du borde ha något som ser ut så här.
Nu när vi har alla data i ett bord kan vi börja lägga till i JavaScript som kommer att skapa ett diagram för oss. Tekniskt behöver vi inte ha bord, men det är trevligt att ha två skäl:
Länk de obligatoriska JavaScript-biblioteken. Det finns två av dem, plus en till för IE-stöd. Vi måste länka jQuery först och sedan Flot-biblioteket eftersom det beror på jQuery. Eftersom Flot använder dukelementet för att rita graferna måste vi inkludera ExplorerCanvas-skriptet som emulerar dukelementet i IE. Firefox, Opera och Safari-användare behöver inte det här så vi använder villkorade kommentarer för att se till att endast IE-användare hämtar det.
Att skapa ett diagram med Flot är ganska enkelt eftersom många av alternativen har förnuftiga standardvärden. Det betyder att du kan skapa en snygg graf med minimal arbete, men kan också anpassa det till din smak. För att göra en grundläggande graf måste vi ange ett behållarelement och de data som ska grafas. Behållarelementet behöver också ha en viss bredd och höjd, så vi använder jQuery för att ställa in "plotarea" div för att ha en bredd på 500px och en höjd på 250px.
Den första parametern är ett jQuery-objekt av behållarelementet. Det andra elementet är en tredimensionell grupp där de första barnraderna är dataset och "barnbarns" -raderna beställs par som anger ett X- och Y-värde för ett kartesiskt plan. Låt oss grafisera BNP-data för USA först.
Datatabellen vi hade tidigare skulle ersättas med en fin tittgrafik. Som du kan se innehåller den matris som innehåller dataseten i en annan modergrupp. För att gradera en annan dataset lägger vi bara till det som ett annat element till föräldrauppsättningen. Låt oss lägga till data för övriga länder vi hade 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 nu en ganska snygg graf, men vi vet inte vilken linje som är vilket land! Vad vi behöver är en legend. Lyckligtvis stöder Flot detta och handlar om att sätta våra dataset i ett JSON-objekt och lägga till ett 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]] Indien ", data: [[2003, 599], [2002, 510], [2001, 479], [2000, 457], [1999, 447], [1998, 414]]];
Jag nämnde förut det, även om Flot har många förnuftiga standardvärden. Medan de förmodligen är bra för de flesta, döljer legenden delvis några data. Flot har en tredje parameter för att överföra alternativ i ett JSON-objekt.
$ .plot (plotarea, data, alternativ);
För att göra data längst ner i grafen lite mer synlig, justerar vi bakgrundsdeklarationen och marginalerna i legenden.
var options = legend: visa: true, margin: 10, backgroundOpacity: 0.5;
Vissa människor (som jag) gillar att kunna se exakt var datapunkterna är, så låt oss ange i alternativen att markera varje punkt med en cirkel med en angiven radie.
var options = legend: visa: true, margin: 10, backgroundOpacity: 0.5, poäng: visa: true, radius: 3;
Bra, vi har datapunkter, men vart gick linjerna ?! Låt oss uttryckligen slå dem på igen.
var options = legend: visa: true, margin: 10, backgroundOpacity: 0.5, poäng: visa: true, radius: 3, lines: show: true;
Vår sista kod ser något ut så här:
Flot handledning
BNP, baserat på växelkurser, över tiden. Värden i miljarder USD. 2003 2002 2001 2000 1999 1998 usa 10.882 10.383 10.020 9762 9213 8720 EU 10.970 9040 8303 8234 8901 8889 Storbritannien 1765 1564 1430 1438 1460 1423 Kina 1575 1434 1345 1252 1158 1148 indien 599 510 479 457 447 414 BNP, baserat på växelkurser, över tiden. Värden i miljarder USD.
Det finns många möjligheter med Flot. Flot API beskriver alla olika alternativ som är tillgängliga för att tweak dina grafer, inklusive att ange olika graftyper, färger, axlar och till och med möjliggöra interaktiva funktioner som val och zoomning. En annan möjlighet är att göra hela saken helt dynamisk och generera JavaScript-koden dynamiskt med data från en databas med PHP.
Accentsconagua