Highcharts - Guida rapida
Highchartsè una libreria di grafici basata su JavaScript puro pensata per migliorare le applicazioni web aggiungendo funzionalità di creazione di grafici interattivi. Supporta un'ampia gamma di grafici. I grafici vengono disegnati utilizzando SVG nei browser standard come Chrome, Firefox, Safari, Internet Explorer (IE). Nella versione precedente di IE 6, VML viene utilizzato per disegnare la grafica.
Caratteristiche di Highcharts Library
Parliamo ora di alcune importanti caratteristiche della libreria Highcharts.
Compatability - Funziona perfettamente su tutti i principali browser e piattaforme mobili come Android e iOS.
Multitouch Support - Supporta il multitouch su piattaforme basate su touch screen come Android e iOS. Ideale per iPhone / iPad e smartphone / tablet basati su Android.
Free to Use - Open source ed è gratuito da usare per scopi non commerciali.
Lightweight - La libreria principale di highcharts.js con una dimensione di quasi 35 KB, è una libreria estremamente leggera.
Simple Configurations - Utilizza json per definire varie configurazioni dei grafici e molto facile da imparare e da utilizzare.
Dynamic - Permette di modificare il grafico anche dopo la generazione del grafico.
Multiple axes- Non limitato agli assi x, y. Supporta più assi sui grafici.
Configurable tooltips- Il suggerimento viene visualizzato quando un utente passa il mouse su un punto qualsiasi di un grafico. Highcharts fornisce un formattatore integrato di tooltip o un formattatore callback per controllare il tooltip a livello di codice.
DateTime support- Gestisci la data e l'ora in modo speciale. Fornisce numerosi controlli integrati su categorie datate.
Export - Esporta il grafico in formato PDF / PNG / JPG / SVG abilitando la funzione di esportazione.
Print - Stampa grafico utilizzando la pagina web.
Zoomablity - Supporta lo zoom del grafico per visualizzare i dati in modo più preciso.
External data- Supporta il caricamento dinamico dei dati dal server. Fornisce il controllo sui dati utilizzando le funzioni di callback.
Text Rotation - Supporta la rotazione delle etichette in qualsiasi direzione.
Tipi di grafici supportati
La libreria Highcharts fornisce i seguenti tipi di grafici:
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Line Charts Utilizzato per disegnare grafici basati su linee / spline. |
| 2 | Area Charts Utilizzato per disegnare grafici area wise. |
| 3 | Pie Charts Utilizzato per disegnare grafici a torta. |
| 4 | Scatter Charts Utilizzato per disegnare grafici sparsi. |
| 5 | Bubble Charts Utilizzato per disegnare grafici a bolle. |
| 6 | Dynamic Charts Utilizzato per disegnare grafici dinamici in cui l'utente può modificare i grafici. |
| 7 | Combinations Utilizzato per disegnare combinazioni di varietà di grafici. |
| 8 | 3D Charts Utilizzato per disegnare grafici 3D. |
| 9 | Angular Gauges Utilizzato per disegnare grafici di tipo tachimetro. |
| 10 | Heat Maps Utilizzato per disegnare mappe di calore. |
| 11 | Tree Maps Utilizzato per disegnare mappe ad albero. |
Nei nostri capitoli successivi, discuteremo ogni tipo di grafici sopra menzionati in dettaglio con esempi.
Licenza
Highcharts è open source ed è gratuito per scopi non commerciali. Per utilizzare Highcharts in progetti commerciali, segui il link - Licenza e prezzi
In questo capitolo, discuteremo come impostare la libreria Highcharts da utilizzare nello sviluppo di applicazioni web.
Highcharts richiede jQuery come dipendenza. Per prima cosa installeremo la libreria jQuery e poi la libreria Highcharts.
Installa jQuery
Esistono due modi per utilizzare jQuery.
Download- Scaricalo localmente da jQuery.com e usalo .
CDN access- Hai anche accesso a un CDN. Il CDN ti darà accesso in tutto il mondo ai data center regionali; in questo caso, host di Google. Ciò significa che l'utilizzo di CDN sposta la responsabilità di ospitare i file dai tuoi server a una serie di quelli esterni. Questo offre anche un vantaggio che se il visitatore della tua pagina web ha già scaricato una copia di jQuery dalla stessa CDN, non dovrà essere scaricata nuovamente.
Utilizzando jQuery scaricato
Includere il file JavaScript jQuery nella pagina HTML utilizzando il seguente script:
<head>
<script src = "/jquery/jquery.min.js"></script>
</head>Utilizzando CDN
Stiamo utilizzando le versioni CDN della libreria jQuery in questo tutorial.
Includere il file JavaScript jQuery nella pagina HTML utilizzando il seguente script:
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</head>Installa Highcharts
I seguenti sono i due modi per utilizzare Highcharts.
Download - Scaricalo localmente da
CDN access- Hai anche accesso a un CDN. Il CDN ti darà accesso in tutto il mondo ai data center regionali; in questo caso, l'host di Highcharts - Code.Highcharts.Com.
Utilizzo di Highcharts scaricati
Includere il file JavaScript di Highcharts nella pagina HTML utilizzando il seguente script:
<head>
<script src = "/highcharts/highcharts.js"></script>
</head>Utilizzando CDN
Stiamo utilizzando le versioni CDN della libreria Highcharts durante questo tutorial.
Includere il file JavaScript di Highcharts nella pagina HTML utilizzando il seguente script:
<head>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>In questo capitolo, mostreremo la configurazione richiesta per disegnare un grafico utilizzando l'API Highcharts.
Passaggio 1: crea una pagina HTML
Crea una pagina HTML con le librerie jQuery e Highcharts javascript.
HighchartsTestHarness.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
<script language = "JavaScript">
$(document).ready(function() {
});
</script>
</body>
</html>Qui il file container div viene utilizzato per contenere il grafico disegnato utilizzando la libreria Highcharts.
Passaggio 2: creare configurazioni
La libreria Highcharts utilizza configurazioni molto semplici utilizzando la sintassi json.
$('#container').highcharts(json);Qui json rappresenta i dati e la configurazione json che la libreria Highcharts utilizza per disegnare un grafico all'interno del div contenitore utilizzando il metodo highcharts (). Ora configureremo i vari parametri per creare la stringa json richiesta.
titolo
Configura il titolo del grafico.
var title = {
text: 'Monthly Average Temperature'
};sottotitolo
Configura il sottotitolo del grafico.
var subtitle = {
text: 'Source: WorldClimate.com'
};xAxis
Configura il ticker da visualizzare sull'asse X.
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};yAxis
Configurare il titolo, le linee del grafico da visualizzare sull'asse Y.
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};tooltip
Configura la descrizione comando. Metti il suffisso da aggiungere dopo il valore (asse y).
var tooltip = {
valueSuffix: '\xB0C'
}leggenda
Configura la legenda da visualizzare sul lato destro del grafico insieme ad altre proprietà.
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};serie
Configurare i dati da visualizzare sul grafico. La serie è un array in cui ogni elemento di questo array rappresenta una singola riga sul grafico.
var series = [
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}
];Passaggio 3: crea i dati json
Combina tutte le configurazioni.
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;Passaggio 4: disegna il grafico
$('#container').highcharts(json);Esempio
Considera il seguente esempio per comprendere ulteriormente la sintassi della configurazione:
highcharts_configuration.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
<script language = "JavaScript">
$(document).ready(function() {
var title = {
text: 'Monthly Average Temperature'
};
var subtitle = {
text: 'Source: WorldClimate.com'
};
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var tooltip = {
valueSuffix: '\xB0C'
}
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
var series = [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
16.6, 14.2, 10.3, 6.6, 4.8]
}
];
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>Risultato
Verifica il risultato.
I grafici a linee vengono utilizzati per disegnare grafici basati su linee / spline. In questa sezione, discuteremo i diversi tipi di grafici basati su linee e spline.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Linea di base Grafico a linee di base. |
| 2 | Con etichette dati Grafico con etichette dati. |
| 3 | Dati caricati Ajax, punti cliccabili Grafico disegnato dopo aver recuperato i dati dal server. |
| 4 | Serie storica, ingrandibile Grafico con serie temporali. |
| 5 | Scanalatura con assi invertiti Grafico spline con assi invertiti. |
| 6 | Spline con simboli Grafico a spline che utilizza simboli per caldo / pioggia. |
| 7 | Spline con bande di trama Grafico spline con bande di trama. |
| 8 | Dati temporali con intervalli irregolari Grafico di un ampio set di dati basati sul tempo. |
| 9 | Asse logaritmico Grafico raffigurante l'asse logaritmico. |
I grafici ad area vengono utilizzati per disegnare grafici basati su area. In questa sezione, discuteremo i diversi tipi di grafici basati su area.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Area di base Grafico ad area di base. |
| 2 | Area con valori negativi Grafico ad area con valori negativi. |
| 3 | Area in pila Grafico con aree impilate l'una sull'altra. |
| 4 | Area percentuale Grafico con dati in percentuale. |
| 5 | Area con punti mancanti Grafico con punti mancanti nei dati. |
| 6 | Assi invertiti Area che utilizza assi invertiti. |
| 7 | Area-spline Grafico ad area utilizzando spline. |
| 8 | Gamma di area Grafico ad area che utilizza intervalli. |
| 9 | Gamma e linea dell'area Grafico ad area utilizzando intervallo e linea. |
I grafici a barre vengono utilizzati per disegnare grafici basati su aree. In questa sezione, discuteremo i diversi tipi di grafici a barre.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Bar di base Grafico a barre di base. |
| 2 | Barra in pila Grafico a barre con barre impilate l'una sull'altra. |
| 3 | Area in pila negativa Grafico a barre con stack negativo. |
I grafici a colonne vengono utilizzati per disegnare grafici basati su colonne. In questa sezione, discuteremo i diversi tipi di grafici basati su colonne.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Colonna di base Istogramma di base. |
| 2 | Colonna con valori negativi Grafico a colonne con valori negativi. |
| 3 | Colonna in pila Grafico con colonne impilate l'una sull'altra. |
| 4 | Colonna in pila e raggruppata Grafico con colonna in forma impilata e raggruppata. |
| 5 | Colonna con percentuale in pila Grafico con percentuale in pila. |
| 6 | Colonna con etichette ruotate Istogramma con etichette ruotate in colonne. |
| 7 | Colonna con drilldown Istogramma con capacità di drill down. |
| 8 | Colonna con posizionamento fisso Istogramma con posizionamento fisso. |
| 9 | Dati definiti nella tabella HTML Grafico a colonne che utilizza i dati definiti nella tabella HTML. |
| 10 | Intervallo di colonne Istogramma che utilizza intervalli. |
I grafici a torta vengono utilizzati per disegnare grafici a torta. In questa sezione, discuteremo i diversi tipi di grafici a torta.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Torta di base Grafico a torta di base. |
| 2 | Torta con leggende Grafico a torta con leggende. |
| 3 | Grafico a ciambella Grafico a ciambella. |
| 4 | Ciambella semicircolare Grafico a ciambella semicircolare. |
| 5 | Torta con drill down Grafico a torta con capacità di drill down. |
| 6 | Grafico a torta con gradiente Grafico a torta con riempimento sfumato. |
| 7 | Grafico a torta con monocromatico Grafico a torta con riempimento monocromatico. |
I grafici a dispersione vengono utilizzati per disegnare grafici a dispersione. In questa sezione, discuteremo i diversi tipi di grafici a dispersione.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Grafico a dispersione Grafico a dispersione. |
I grafici a bolle vengono utilizzati per disegnare grafici a bolle. In questa sezione, discuteremo i diversi tipi di grafici basati su bolle.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Grafico a bolle Grafico a bolle. |
| 2 | Grafico a bolle 3D Grafico a bolle 3D. |
I grafici dinamici vengono utilizzati per disegnare grafici basati sui dati in cui i dati possono cambiare dopo il rendering del grafico. In questa sezione, discuteremo i diversi tipi di grafici dinamici.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Spline che si aggiorna ogni secondo Grafico a spline che si aggiorna ogni secondo. |
| 2 | Fare clic per aggiungere un punto Grafico con capacità di aggiunta di punti. |
I grafici a combinazione vengono utilizzati per disegnare grafici misti; ad esempio, grafico a barre con grafico a torta. In questa sezione, discuteremo i diversi tipi di grafici di combinazioni.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Colonna, linea e torta Grafico con colonna, linea e torta. |
| 2 | Doppio asse, linea e colonna Grafico con due assi, linea e colonna. |
| 3 | Assi multipli Grafico con più assi. |
| 4 | Scatter con la linea di regressione Grafico a dispersione con linea di regressione. |
I grafici 3D vengono utilizzati per disegnare grafici tridimensionali. In questa sezione, discuteremo i diversi tipi di grafici 3D.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Colonna 3D Grafico a colonne 3D. |
| 2 | Colonna 3D con null Istogramma 3D con valori nulli e 0. |
| 3 | Colonna 3D con impilamento Istogramma 3D con impilamento e raggruppamento. |
| 4 | Torta 3D Grafico a torta 3D. |
| 5 | Ciambella 3D Grafico a ciambella 3D. |
I grafici Indicatori angolari vengono utilizzati per disegnare grafici di tipo indicatore / indicatore. In questa sezione, discuteremo i diversi tipi di grafici degli indicatori angolari.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Calibro angolare Grafico a scartamento angolare. |
| 2 | Calibro solido Grafico a scartamento solido. |
| 3 | Orologio Orologio. |
| 4 | Manometro con doppio asse Gauge Chart con doppi assi. |
| 5 | VU Meter Grafico VU Meter. |
I grafici Heat Map vengono utilizzati per disegnare grafici di tipo Heat Map. In questa sezione, discuteremo i diversi tipi di mappe di calore.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Mappa di calore Mappa di calore. |
| 2 | Mappa termica grande Mappa termica grande. |
I grafici della mappa ad albero vengono utilizzati per disegnare grafici di tipo mappa ad albero. In questa sezione discuteremo i diversi tipi di mappe ad albero.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Mappa dell'albero Mappa ad albero con asse dei colori. |
| 2 | Mappa ad albero con livelli Mappa ad albero con livelli. |
| 3 | Mappa ad albero grande Mappa ad albero grande. |