✅ Grafici interattivi con JavaScript e Highcharts

Sommario

Highchart è una libreria scritta in HTML5 e Javascript puro:

Vediamo come funziona, come è strutturato e come implementarlo sul nostro sito.
Struttura della directory
Per prima cosa scarichiamo lo zip che contiene la nostra libreria, lo decomprimiamo e possiamo vedere la nostra directory dei file e come è strutturata.

Vediamo cosa contiene ogni directory e a cosa serve:

index.html: Questa è la pagina di test HTML, con questa puoi fare test e visualizzare le opzioni predefinite.
esempi: Questa cartella contiene tutto il codice sorgente per gli esempi.
grafica: Questa cartella contiene le immagini utilizzate negli esempi.
server di esportazione: Questa è una directory che contiene la funzione lato server per esportare la grafica in un'immagine.
js: Questa è la directory principale di Highcharts. Ogni file Javascript ha due suffissi, il primo .src.js è quello che contiene il codice sorgente con i commenti e l'altro .js è la sua versione ridotta a icona.
adattatori: Ecco i plugin da poter utilizzare Mootools o Prototipo come framework, all'interno di questa directory è il seguente:

exporting.js: questo file ci fornisce le funzioni per esportare e stampare.

temi: questa cartella contiene una serie di file Javascript predefiniti con impostazioni come colore di sfondo, stili e altro. Possiamo caricare uno di questi file nella grafica per stili diversi.

Visto come funziona e come è organizzata questa libreria, passiamo ad un esempio pratico di come implementare Highchart sul nostro sito web.

Per prima cosa includiamo le librerie del Highchart, così come le biblioteche di jQuery per funzionalità extra:

 Primo esempio di Highcharts

Il grafico delle curve è definito nella specifica dell'oggetto che contiene tutte le proprietà e le serie di dati.

 var chart = new Highcharts.Chart ({chart: {…}, title: '…'…});

Una volta creato questo oggetto, la grafica viene visualizzata nel browser, all'interno di questo oggetto sono presenti una serie di opzioni che spiegheremo di seguito.
Le istruzioni renderTo dice a Highcharts di visualizzare un grafico nell'HTML, in particolare nelcon il id = "contenitore". L'opzione genere definisce il tipo di grafico, le opzioni possono essere: area, linea, spline, ecc. In questo esempio useremo spline.

 grafico: {renderTo: 'contenitore', tipo: 'spline'}

Successivamente impostiamo un titolo e un sottotitolo, che appariranno nella parte superiore del grafico.

 title: {text: 'Web browser …'}, subtitle: {text: 'Dal 2008 ad oggi'},

Nell'opzione delle categorie nella proprietà del xAsse contiene un array con le etichette di ciascuna voce di dati e con tickIntervalli Separiamo il modo in cui queste etichette vengono stampate.

 xAxis: {categorie: ['gennaio 2008', 'febbraio',…. ], tickInterval: 3},

Le opzioni sulla proprietà asse y Ci permettono di assegnare il titolo di quell'asse e di impostare il valore minimo e massimo in cui limiteremo il nostro grafico.

 Asse y: {title: {text: 'Percentage%'}, min: 0},

La proprietà di plotOpzioni È chi controlla come verrà visualizzata ciascuna serie di dati a seconda del tipo di grafico.

 plotOptions: {serie: {lineWidth: 2}},

La proprietà series è il centro dell'intero oggetto di configurazione che definisce i dati che alimenteranno il grafico.

 serie: [{nome: 'Internet Explorer', dati: [54,7, 54,7, 53,9, 54,8, 54,4,…]}, {nome: 'FireFox', dati: [36,4, 36,5, 37,0, 39,1, 39,8,…] }, {

Ora con tutte le parti del codice spiegate, vediamo come apparirebbe nel nostro browser.

Infine lascio il codice completo in modo che possiate testarlo voi stessi e senza dimenticare che può essere personalizzato per adattarlo a qualsiasi esigenza.