Come creare un grafico semplice in JavaScript
Questo articolo prenderà una serie di elementi che andranno in auto e la loro quantità trovata in un sondaggio. Successivamente, calcolerà le loro percentuali dalle auto totali nel sondaggio e poi le mostrerà sul grafico con le loro percentuali scritte sul grafico lineare.
Passaggio 1: impostare il documento HTML
L'HTML non richiede molte cose da fare al suo interno. Dobbiamo semplicemente creare un vuoto <Div> che sarà modificato dal codice JavaScript e JavaScript traccerà anche il grafico all'interno di questo div. Pertanto, usa le seguenti righe:
Questo è un grafico lineare che mostra percentuali di auto da un sondaggio
A questo punto, il documento HTML mostrerà solo il seguente risultato:
Il Div non è visibile, perché attualmente non contiene altri elementi o testo.
Passaggio 2: impostare il codice JavaScript
Inizia creando un array di elementi. Questo array conterrà il nome dell'auto e il numero di auto. Per questo, usa semplicemente le seguenti righe:
let ElementArray = [];ElementArray [0] = ["Mercedes", 8];
ElementArray [1] = ["Audi", 13];
ElementArray [2] = ["BMW", 11];
ElementArray [3] = ["Porsche", 25];
Dopodiché, creeremo una funzione che traccerà il grafico sul documento HTML. Questa funzione sarà nominata "Plotgraph", E ci vorranno i tre parametri come:
funzione plotgraph (array, graphwidth, div)// Le righe successive saranno incluse in questo corpo
Come puoi vedere, questa funzione prende l'elemento da cui selezionerà i dati grezzi, assume la larghezza del grafico sulla pagina web HTML e il Div in cui deve tracciare il grafico.
In questa funzione, la prima cosa è creare le seguenti variabili:
let totalcars = 0;let calpercentrage = 0;
lascia calwidth = 0;
La cosa è:
- Le auto totali verranno utilizzate per conservare il numero di auto
- CalperCentage verrà utilizzato per calcolare la percentuale di ciascuna auto
- Calwidth verrà utilizzato per determinare le dimensioni della barra (in base alla percentuale) del grafico da posizionare all'interno della larghezza passata nei parametri
Per calcolare il numero totale di auto utilizza le seguenti righe di codice:
per (i = 0; i < array.length; i++)TotalCars += parseInt (array [i] [1]);
Successivamente, crea una variabile denominata come output, questa variabile verrà utilizzata per creare una tabella sulla pagina Web HTML. Pertanto, conterrà il codice HTML al suo interno:
Let output = '| $ array [i] [0] | $ calpercentrage% |
Ora a questo punto, la variabile di output contiene la query HTML completa per tracciare il grafico lineare dai dati grezzi forniti. Tutto ciò che rimane da fare è accedere al div e impostarlo uguale a nostro produzione variabile e visualizza anche il numero totale di auto:
div.InnerHtml = '$ outputAuto totali: $ totalcars';
E con ciò la funzione Plotgrapgh è completo. Per tracciare il grafico, chiama semplicemente il Plotgraph funzione e passare gli argomenti come:
Plotgraph (ElementArray, 500, documento.getElementById ("GraphDiv"));Il codice JavaScript completo è come:
let ElementArray = [];ElementArray [0] = ["Mercedes", 8];
ElementArray [1] = ["Audi", 13];
ElementArray [2] = ["BMW", 11];
ElementArray [3] = ["Porsche", 25];
funzione plotgraph (array, graphwidth, div)
let totalcars = 0;
let calpercentrage = 0;
lascia calwidth = 0;
per (i = 0; i < array.length; i++)
TotalCars += parseInt (array [i] [1]);
Let output = '
| $ array [i] [0] | $ calpercentrage% |
div.InnerHtml = '$ output
Auto totali: $ totalcars';
Plotgraph (ElementArray, 500, documento.getElementById ("GraphDiv"));
L'esecuzione del documento HTML su un browser Web ora mostra il seguente output:
E il grafico lineare è stato tracciato all'interno del div mostrare le percentuali di diverse auto da un sondaggio.
Conclusione
È possibile creare un grafico su un documento HTML con l'aiuto di JavaScript. Per questo, l'utente deve utilizzare il tag per creare elementi SVG e il raggruppare più elementi SVG insieme con un nome specifico. Tuttavia, non è facile creare un grafico su una pagina web HTML in quanto può essere molto scoraggiante per un nuovo principiante. In questo articolo, è stato costruito un grafico lineare con JavaScript e ogni passo è stato accuratamente spiegato.