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 = '| $ 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 = '
| $ 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.