Hvordan lage en enkel graf i JavaScript
Denne artikkelen vil ta en rekke elementer som kommer til bilen og deres mengde som finnes i en undersøkelse. Etter det vil den beregne prosentene sine fra de totale bilene i undersøkelsen og deretter vise dem på grafen med prosentene sine skrevet på den lineære grafen.
Trinn 1: Sette opp HTML -dokumentet
HTML krever ikke mye ting som skal gjøres inni det. Vi trenger ganske enkelt å lage en tom <div> Det vil bli endret av JavaScript -kode, og JavaScript vil også plotte grafen i denne diven. Bruk derfor følgende linjer:
Dette er en lineær graf som viser frem prosent av bilen gjør fra en undersøkelse
På dette tidspunktet vil HTML -dokumentet bare vise følgende resultat:
Diven er ikke synlig, fordi den for øyeblikket ikke inneholder andre elementer eller tekst.
Trinn 2: Sette opp JavaScript -koden
Begynn med å lage et elementarray. Denne matrisen kommer til å inneholde navnet på bilen og antallet biler. For dette, bare bruk følgende linjer:
La elementArray = [];elementArray [0] = ["Mercedes", 8];
elementArray [1] = ["Audi", 13];
elementArray [2] = ["BMW", 11];
elementArray [3] = ["Porsche", 25];
Etter det skal vi lage en funksjon som skal plotte grafen på HTML -dokumentet. Denne funksjonen vil bli navngitt “Plotgraf”, Og det vil ta de tre parametrene som:
funksjon plotgraph (matrise, grafwidth, div)// De neste linjene vil bli inkludert i denne kroppen
Som du ser, tar denne funksjonen elementet som kommer til å velge rå data, det tar i bredden på grafen på HTML -nettsiden og Div der den må plotte grafen.
I denne funksjonen er det aller første å lage følgende variabler:
La totalcars = 0;La calpercentage = 0;
La CalWidth = 0;
Tingen er:
- Totalt biler vil bli brukt til å lagre antall biler
- Calpercentage vil bli brukt til å beregne prosentandelen av hver bil
- Kalwidth vil bli brukt til å bestemme størrelsen på linjen (i henhold til prosentandelen) av grafen som skal plasseres inne i bredden som føres i parametrene
For å beregne det totale antallet biler, bruker du følgende kodelinjer:
for (i = 0; i < array.length; i++)TotalCars += ParseInt (Array [i] [1]);
Etter det, oppretter en variabel kalt som utdata, vil denne variabelen bli brukt til å lage en tabell på HTML -websiden. Derfor vil den inneholde HTML -kode inne i den:
La output = '';For øyeblikket, dette produksjon Variabel inneholder bare spørringen for start av tabellen. Senere vil flere spørsmål inni bli lagt til den, som vil representere hele tabellen med en graf inni den.
Etter det bruker du bare følgende kodelinjer:
for (i = 0; i < array.length; i++)calpercentage = matematikk.runde ((array [i] [1] * 100) / totalcars);
CalWidth = Math.rund (grafbredde * (calpercentage / 100));
utgang += '';
I ovennevnte kodebit:
- Dette for Loop kommer til å iterere gjennom elementene Array én etter en
- Prosentandeler av hver bilmat blir beregnet
- Og så beregnes størrelsen på prosentvis linjen
- Til slutt produksjon legges til med HTML -spørringen for å beregne den neste linjen i grafen
- TAG oppretter et SVG -element på HTML -nettsiden
- grupper SVG -elementer sammen under et gitt navn
Etter dette, kom ganske enkelt ut av for -loopen, og legg til sluttkoden til bordet inne i produksjon variabel
output += "| $ array [i] [0] | $ calpercentage% |
Nå på dette tidspunktet inneholder utgangsvariabelen den komplette HTML -spørringen for å plotte den lineære grafen fra rå dataene som ble gitt. Alt som er igjen å gjøre er å få tilgang til div og sette den lik vår produksjon Variabel og viser også det totale antallet biler:
div.InnerHtml = '$ outputTotalt biler: $ Totalcars';
Og med det funksjonen Plotgraplh er ferdig. For å plotte grafen, bare ring plotgraf funksjon og passere i argumentene som:
plotgraf (elementArray, 500, dokument.getElementById ("GraphDiv"));Den komplette JavaScript -koden er som:
La elementArray = [];elementArray [0] = ["Mercedes", 8];
elementArray [1] = ["Audi", 13];
elementArray [2] = ["BMW", 11];
elementArray [3] = ["Porsche", 25];
funksjon plotgraph (matrise, grafwidth, div)
La totalcars = 0;
La calpercentage = 0;
La CalWidth = 0;
for (i = 0; i < array.length; i++)
TotalCars += ParseInt (Array [i] [1]);
La output = '';
for (i = 0; i < array.length; i++)
calpercentage = matematikk.runde ((array [i] [1] * 100) / totalcars);
CalWidth = Math.rund (grafbredde * (calpercentage / 100));
utgang += '';
output += "
| $ array [i] [0] | $ calpercentage% |
div.InnerHtml = '$ output
Totalt biler: $ Totalcars';
plotgraf (elementArray, 500, dokument.getElementById ("GraphDiv"));
Å kjøre HTML-dokumentet på en nettleser viser nå følgende utdata:
Og den lineære grafen er plottet inne i div viser frem prosentene av forskjellige biler fra en undersøkelse.
Konklusjon
Det er mulig å lage en graf på et HTML -dokument ved hjelp av JavaScript. For dette må brukeren bruke tagg for å lage SVG -elementer og å gruppere flere SVG -elementer sammen under et spesifikt navn. Det er imidlertid ikke lett å bygge en graf på en HTML -webside, da det kan være veldig skremmende for en ny nybegynner. I denne artikkelen ble en lineær graf bygget med JavaScript, og hvert trinn ble grundig forklart.