Creazione di grafici usando JavaScript e PHP

Il grafico basato sul Web può essere creato utilizzando qualsiasi libreria lato client o libreria lato server in base a dati statici o dinamici. Se si desidera creare grafici animati e vuoi scaricare il grafico più velocemente, è meglio utilizzare una libreria per grafici sul lato client. Molte librerie sul lato client sono disponibili per creare grafici per le pagine Web. Una delle popolari librerie sul lato client è Canvasjs che può essere utilizzato per creare grafici basati sul Web utilizzando dati fissi o recupero dati da qualsiasi database.

Canvasjs viene utilizzato con PHP in questo tutorial per la creazione di grafici basati sul web. Questa libreria supporta vari tipi di grafici, come grafico a barre, grafico delle colonne, grafico di colonne dinamiche, grafico delle linee, grafico a torta, grafico piramidale, grafico a ciambelle, grafico a bolle ecc. Alcuni di essi sono mostrati qui utilizzando i dati di esempio. Prima di iniziare questo tutorial, è necessario assicurarsi che il tuo server Web e PHP siano installati correttamente e funzionano.

Scarica canvasjs

È disponibile in versione gratuita e commerciale. Puoi scaricare e utilizzare la versione gratuita di questa libreria per scopi di test. Vai al seguente URL e fai clic su Scaricamento Link per scaricare la libreria Canvasjs. Decomprimere il file e memorizzare la cartella in Web Server dopo il download per usarlo.

https: // canvasjs.com

$ ProfitData = Array (
array ("x" => 2013, "y" => 440000),
array ("x" => 2014, "y" => 270000),
array ("x" => 2015, "y" => 210000, "indexLabel" => "più basso"),
array ("x" => 2016, "y" => 600000),
array ("x" => 2017, "y" => 630000, "indexLabel" => "più alto"),
array ("x" => 2018, "y" => 560000));
?>

Esempio di grafico delle colonne

Produzione:

Il seguente output verrà generato se si esegue il file da qualsiasi server Web. "Versione di prova" e "canvasjs.COM ”Le filigrane verranno mostrate per una versione gratuita.

Quando fai clic su "Più opzioni" pulsante dall'angolo in alto a destra, verranno visualizzate tre opzioni. È possibile stampare il grafico o salvare il grafico come formato immagine jpg o png. Se fai clic su "Salva come png"Opzione quindi verrà visualizzata la seguente finestra di dialogo.

Il nome del file di immagine predefinito è Grafico.png. È possibile rimuovere le filigrane dall'immagine utilizzando facilmente qualsiasi software di fotorizzazione.

Grafico a torta:

L'esempio seguente mostra la popolarità di diverse distribuzioni Linux usando il grafico a torta. Scrivi il seguente codice in un file denominato Grafico a torta.PHP e memorizzare il file in vAR/WWW/HTML/JSCHART cartella.

$ popolarità = array (
Array ("OS" => "Arch Linux", "y" => 40),
array ("os" => "centos", "y" => 25),
array ("os" => "debian", "y" => 12),
array ("os" => "fedora", "y" => 10),
Array ("OS" => "Gentoo", "y" => 8),
array ("os" => "lindows", "y" => 5)
);
?>

Esempio di grafico a torta

Produzione:

Verrà visualizzato il seguente output se si esegue il file dal server Web. È possibile creare un file di immagine del grafico per il passaggio che viene mostrato nell'esempio precedente.

Grafico delle colonne dinamiche:

Puoi creare un grafico dinamico dall'aspetto piacevole usando questa libreria. Supponiamo che tu voglia creare un grafico live del mercato azionario in cui il prezzo delle azioni aumenta o diminuisce continuamente. Scrivi il seguente codice in un file denominato cartiera dinamica.PHP e memorizzare il file in vAR/WWW/HTML/JSCHART cartella.

$ stockData = array (
array ("stock" => "msft", "y" => 92.67),
array ("stock" => "basso", "y" => 88.89),
array ("stock" => "intc", "y" => 52.15),
array ("stock" => "adi", "y" => 91.78),
array ("stock" => "adbe", "y" => 224.80),
Array ("Stock" => "ABBV", "y" => 94.30),
array ("stock" => "amd", "y" => 10.27)
);
?>

Esempio di grafico dinamico

Produzione:
Verrà visualizzato il seguente output se si esegue il file dal server Web. È possibile creare un file di immagine del grafico in modo simile che viene mostrato nel primo esempio.

Seguendo i passaggi sopra, è possibile creare facilmente grafici animati basati sul Web utilizzando questa utile libreria JavaScript.