Come disegnare un grafico a torta utilizzando JavaScript

April 12

Come disegnare un grafico a torta utilizzando JavaScript


Javascript è in grado di aggiungere molte caratteristiche avanzate a pagine web, tra cui grafici a torta e grafici. Ci sono molte librerie Javascript di alto livello disponibili per aiutare un programmatore aggiungere facilmente queste caratteristiche. I dati possono essere programmati nella pagina web in forma fissa; aggiunto dinamicamente alla pagina in fase di esecuzione da qualsiasi fonte; o generati dinamicamente in base all'input dell'utente.

istruzione

Aggiunta di un grafico a torta tramite Javascript

1 Scarica la libreria Charts JS. JS Charts è un pacchetto facile da usare per l'aggiunta di tabelle e grafici per le pagine web, tra cui grafici a torta.

2 Caricare JS Grafici nella tua pagina web. Questo si ottiene con l'aggiunta di un tag HTML come ad esempio '<script type = "text / javascript" />' al colpo di testa di pagina web. Assicurarsi di modificare il percorso in modo che corrisponda ovunque si inserisce il file jscharts.js.

3 Creare un grafico per tenere il vostro <div> torta. Questo può essere posizionato ovunque nella pagina che ti piace. Assicurati di dare il <div> un id in modo che è possibile fare riferimento nel grafico a torta, come ad esempio '<div id = "piechart"> </ div>'

4 Aggiungere il Javascript per fare JS Grafici creare il grafico. Il codice sarà simile a questo:

<Script type = "text / javascript">

var pieChart = new JSChart('piechart', 'pie');
pieChart.setDataArray(new Array(["First area", 20], ["Second area", 40], ["Third area", 40]);
pieChart.draw();

</ Script>

Consigli e avvertenze

  • Questo creerà un grafico di base a torta. JS Grafici ha molte più opzioni disponibili per la formattazione e styling i grafici. Consultare il manuale Grafici JS per tutti i dettagli delle numerose personalizzazioni disponibili. Ci sono altre librerie grafico a torta a disposizione, se JS Grafici non è proprio quello che si aveva in mente.