Google Charts - Guida rapida
Google Chartsè 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 seguito sono riportate le caratteristiche salienti della libreria di Google Charts.
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 loader.js, è una libreria estremamente leggera.
Simple Configurations - Utilizza json per definire varie configurazioni dei grafici ed è molto facile da imparare e da usare.
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 con il mouse su un punto qualsiasi di un grafico. googlecharts fornisce un formattatore integrato di tooltip o un formattatore callback per controllare il tooltip in modo programmatico.
DateTime support- Gestisci la data e l'ora in modo speciale. Fornisce numerosi controlli integrati su categorie datate.
Print - Stampa grafico utilizzando la pagina web.
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 di Google Charts 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 | Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines 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 tipo tachimetro. |
| 10 | Heat Maps Utilizzato per disegnare mappe di calore. |
| 11 | Tree Maps Utilizzato per disegnare mappe ad albero. |
Nei prossimi capitoli, discuteremo ogni tipo di grafici sopra menzionati in dettaglio con esempi.
Licenza
Google Charts è open source ed è gratuito. Segui il link: Termini di servizio .
In questo capitolo discuteremo su come impostare la libreria di Google Charts da utilizzare nello sviluppo di applicazioni web.
Installa Google Charts
Esistono due modi per utilizzare Google Charts.
Download - Scaricalo localmente da https://developers.google.com/chart e usalo.
CDN access- Hai anche accesso a un CDN. Il CDN ti darà accesso in tutto il mondo ai data center regionali che in questo caso ospitano Google Charthttps://www.gstatic.com/charts.
Utilizzo di Google Chart scaricato
Includi il file JavaScript di googlecharts nella pagina HTML utilizzando il seguente script:
<head>
<script src = "/googlecharts/loader.js"></script>
</head>Utilizzando CDN
Stiamo utilizzando le versioni CDN della libreria di Google Chart in questo tutorial.
Includi il file JavaScript di Google Chart nella pagina HTML utilizzando il seguente script:
<head>
<script src = "https://www.gstatic.com/charts/loader.js"></script>
</head>In questo capitolo mostreremo la configurazione richiesta per disegnare un grafico utilizzando l'API di Google Chart.
Passaggio 1: crea una pagina HTML
Crea una pagina HTML con le librerie di Google Chart.
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
</body>
</html>Qui containerdiv viene utilizzato per contenere il grafico disegnato utilizzando la libreria di Google Chart. Qui stiamo caricando l'ultima versione dell'API corecharts utilizzando il metodo google.charts.load.
Passaggio 2: crea le configurazioni
La libreria di Google Chart utilizza configurazioni molto semplici utilizzando la sintassi json.
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Qui i dati rappresentano i dati json e le opzioni rappresentano la configurazione che la libreria di Google Chart utilizza per disegnare un grafico all'interno del div contenitore utilizzando il metodo draw (). Ora configureremo i vari parametri per creare la stringa json richiesta.
titolo
Configura le opzioni del grafico.
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
'width':550,
'height':400};Tabella dati
Configurare i dati da visualizzare sul grafico. DataTable è una speciale raccolta strutturata in tabella che contiene i dati del grafico. Le colonne della tabella dei dati rappresentano le legende e le righe rappresentano i dati corrispondenti. Il metodo addColumn () viene utilizzato per aggiungere una colonna in cui il primo parametro rappresenta il tipo di dati e il secondo parametro rappresenta la legenda. Il metodo addRows () viene utilizzato per aggiungere le righe di conseguenza.
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);Passaggio 3: disegna il grafico
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Esempio
Di seguito è riportato l'esempio completo:
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014', 'width':550, 'height':400};
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById ('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>A seguito della chiamata del codice funzione drawChart per disegnare il grafico quando la libreria di Google Chart viene caricata completamente.
google.charts.setOnLoadCallback(drawChart);Risultato
Verifica il risultato.
I grafici ad area vengono utilizzati per disegnare grafici basati su area. In questa sezione discuteremo i seguenti 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 sovrapposte 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. |
I grafici a barre vengono utilizzati per disegnare grafici a barre. In questa sezione discuteremo i seguenti tipi di grafici a barre.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Bar di base Grafico a barre di base |
| 2 | Grafico a barre raggruppato Grafico a barre raggruppato. |
| 3 | Barra in pila Grafico a barre con barre impilate l'una sull'altra. |
| 4 | Barra in pila negativa Grafico a barre con stack negativo. |
| 5 | Barra in pila percentuale Grafico a barre con dati in termini percentuali. |
| 6 | Grafico a barre dei materiali Un grafico a barre ispirato al Material Design. |
| 7 | Grafico a barre con etichette dati Grafico a barre con etichette dati. |
I grafici a bolle vengono utilizzati per disegnare grafici a bolle. In questa sezione discuteremo i seguenti tipi di grafici basati su bolle.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Bolla di base Grafico a bolle di base. |
| 2 | Grafico a bolle con etichette dati Grafico a bolle con etichette dati. |
I grafici del calendario vengono utilizzati per disegnare attività nel corso di un lungo arco di tempo come mesi o anni. In questa sezione discuteremo i seguenti tipi di grafici basati su calendario.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Calendario di base Grafico di base del calendario. |
| 2 | Calendario con colori personalizzati Grafico calendario personalizzato. |
I grafici a candela vengono utilizzati per mostrare il valore di apertura e chiusura su una variazione di valore e sono normalmente utilizzati per rappresentare le azioni. In questa sezione discuteremo i seguenti tipi di grafici basati su candele.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Candeliere di base Grafico a candela di base. |
| 2 | Candeliere con colori personalizzati Grafico a candela personalizzato. |
I grafici a colonne vengono utilizzati per disegnare grafici basati su colonne. In questa sezione discuteremo i seguenti tipi di grafici basati su colonne.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Colonna di base Istogramma di base. |
| 2 | Colonna raggruppata Istogramma raggruppato. |
| 3 | Colonna impilata Istogramma con colonne impilate l'una sull'altra. |
| 4 | Colonna impilata negativa Istogramma con pila negativa. |
| 5 | Colonna in pila percentuale Grafico a colonne con dati in termini percentuali. |
| 6 | Grafico a colonne del materiale Un grafico a colonne ispirato al Material Design. |
| 7 | Grafico a colonne con etichette dati Grafico a colonne con etichette dati. |
Il grafico a combinazione aiuta a rendere ogni serie come un diverso tipo di marcatore dal seguente elenco: linea, area, barre, candelabri e area a gradini. Per assegnare un tipo di indicatore predefinito per le serie, utilizzare la proprietà seriesType. La proprietà della serie deve essere utilizzata per specificare singolarmente le proprietà di ciascuna serie. Abbiamo già visto la configurazione utilizzata per disegnare questo grafico nel capitolo Sintassi della configurazione di Google Charts . Quindi, vediamo l'esempio completo.
Configurazioni
Noi abbiamo usato ComboChart class per mostrare il grafico basato sulla combinazione.
//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));Esempio
googlecharts_combination_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Fruit', 'Jane', 'John', 'Average'],
['Apples', 3, 2, 2.5],
['Oranges', 2, 3, 2.5],
['Pears', 1, 5, 3],
['Bananas', 3, 9, 6],
['Plums', 4, 2, 3]
]);
// Set chart options
var options = {
title : 'Fruits distribution',
vAxis: {title: 'Fruits'},
hAxis: {title: 'Person'},
seriesType: 'bars',
series: {2: {type: 'line'}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ComboChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Risultato
Verifica il risultato.
Un istogramma è un grafico che raggruppa i dati numerici in segmenti, visualizzando i segmenti come colonne segmentate. Sono usati per rappresentare la distribuzione di un set di dati in base alla frequenza con cui i valori rientrano negli intervalli. Google Charts sceglie automaticamente il numero di bucket per te. Tutti i bucket hanno la stessa larghezza e un'altezza proporzionale al numero di punti dati nel bucket. Gli istogrammi sono simili agli istogrammi sotto altri aspetti. In questa sezione discuteremo i seguenti tipi di grafici basati su istogrammi.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Istogramma di base Grafico istogramma di base. |
| 2 | Controllo del colore Colore personalizzato del grafico istogramma. |
| 3 | Benne di controllo Bucket personalizzati di grafico istogramma. |
| 4 | Serie multiple Grafico istogramma con più serie. |
I grafici a linee vengono utilizzati per disegnare grafici basati su linee. In questa sezione discuteremo i seguenti tipi di grafici basati su linee.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Linea di base Grafico a linee di base. |
| 2 | Con punti visibili Grafico con punti dati visibili. |
| 3 | Colore di sfondo personalizzabile Grafico con colore di sfondo personalizzato. |
| 4 | Colore della linea personalizzabile Grafico con colore della linea personalizzato. |
| 5 | Etichette degli assi e delle tacche personalizzabili Grafico con assi personalizzati ed etichette di graduazione. |
| 6 | Mirino Grafici a linee che mostrano i mirini nel punto dati sulla selezione. |
| 7 | Stile della linea personalizzabile Grafico con colore della linea personalizzato. |
| 8 | Grafici a linee con linee curve Grafico con linee curve morbide. |
| 9 | Grafico a linee dei materiali Un grafico a linee ispirato al Material Design. |
| 10 | Grafico a linee X in alto Un grafico a linee ispirato al Material Design con l'asse X in cima al grafico. |
Un grafico di Google Map utilizza l'API di Google Maps per visualizzare la mappa. I valori dei dati vengono visualizzati come indicatori sulla mappa. I valori dei dati possono essere coordinate (coppie lat-long) o indirizzi effettivi. La mappa verrà scalata di conseguenza in modo da includere tutti i punti identificati.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Mappa di base Mappa Google di base. |
| 2 | Mappa utilizzando latitudine / longitudine Mappa con posizioni specificate utilizzando Latitudine e Longitudine. |
| 3 | Marcatori di personalizzazione Marcatori personalizzati nella mappa. |
L'organigramma aiuta a rendere una gerarchia di nodi, utilizzata per rappresentare relazioni superiori / subordinate in un'organizzazione. Ad esempio, un albero genealogico è un tipo di organigramma .. Abbiamo già visto la configurazione utilizzata per disegnare questo grafico nel capitolo Sintassi della configurazione di Google Charts . Quindi, vediamo l'esempio completo.
Configurazioni
Noi abbiamo usato OrgChart classe per mostrare il grafico basato sull'organizzazione.
//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));Esempio
googlecharts_organization_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['orgchart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
['Alice', 'Robert', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
// Set chart options
var options = {allowHtml:true};
// Instantiate and draw the chart.
var chart = new google.visualization.OrgChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Risultato
Verifica il risultato.
I grafici a torta vengono utilizzati per disegnare grafici a torta. In questa sezione discuteremo i seguenti tipi di grafici a torta.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Torta di base Grafico a torta di base. |
| 2 | Grafico a ciambella Grafico a ciambella. |
| 3 | Grafico a torta 3D Grafico a torta 3D. |
| 4 | Grafico a torta con sezioni esplose Grafico a torta con sezioni esplose. |
Un grafico Sankey è uno strumento di visualizzazione e viene utilizzato per rappresentare un flusso da un insieme di valori a un altro. Gli oggetti connessi sono chiamati nodi e le connessioni sono chiamate collegamenti. I Sankeys vengono utilizzati per mostrare una mappatura molti-a-molti tra due domini o più percorsi attraverso una serie di fasi.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Grafico Sankey di base Grafico Sankey di base. |
| 2 | Grafico Sankey multilivello Grafico Sankey multilivello. |
| 3 | Personalizzazione di Sankey Chart Grafico Sankey personalizzato. |
I grafici Sankey, i grafici a dispersione, i grafici ad area a gradini, la tabella, le linee temporali, la mappa ad albero e le linee di tendenza vengono utilizzati per disegnare grafici a dispersione. In questa sezione discuteremo i seguenti tipi di grafici a dispersione.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Scatter di base Grafico a dispersione di base. |
| 2 | Grafico a dispersione dei materiali Grafico a dispersione dei materiali. |
| 3 | Grafico a dispersione a doppio asse Y. Grafico a dispersione dei materiali con doppio asse Y. |
| 4 | Grafico a dispersione dell'asse X in alto Grafico a dispersione dei materiali con l'asse X in alto. |
Un grafico ad area a gradini è un grafico ad area basato su passi. Discuteremo i seguenti tipi di grafici ad area a gradini.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Grafico a gradini di base Grafico ad area a gradini di base. |
| 2 | Grafico a gradini impilato Grafico ad area a gradini in pila. |
| 3 | Grafico a gradini impilato al 100% Grafico ad area a gradini in pila 100%. |
Il grafico a tabella aiuta a rendere una tabella che può essere ordinata e impaginata. Le celle della tabella possono essere formattate utilizzando stringhe di formato o inserendo direttamente HTML come valori di cella. I valori numerici sono allineati a destra per impostazione predefinita; i valori booleani vengono visualizzati come segni di spunta o crocette. Gli utenti possono selezionare singole righe con la tastiera o il mouse. Le intestazioni di colonna possono essere utilizzate per l'ordinamento. La riga di intestazione rimane fissa durante lo scorrimento. La tabella attiva gli eventi corrispondenti all'interazione dell'utente. Abbiamo già visto la configurazione utilizzata per disegnare questo grafico nel capitolo Sintassi della configurazione di Google Charts . Quindi, vediamo l'esempio completo.
Configurazioni
Noi abbiamo usato Table class per mostrare il grafico basato sulla tabella.
//table chart
var chart = new google.visualization.Table(document.getElementById('container'));Esempio
googlecharts_table_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['table']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var options = {
showRowNumber: true,
width: '100%',
height: '100%'
};
// Instantiate and draw the chart.
var chart = new google.visualization.Table(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Risultato
Verifica il risultato.
Le sequenze temporali mostrano come un insieme di risorse viene utilizzato nel tempo. Discuteremo i seguenti tipi di grafici delle linee temporali.
| Sr.No. | Tipo / descrizione del grafico |
|---|---|
| 1 | Grafico delle linee temporali di base Grafico delle linee temporali di base |
| 2 | Grafico delle linee temporali con etichette dati Grafico delle linee temporali con etichette dati |
| 3 | Grafico delle linee temporali senza etichetta di riga Grafico delle linee temporali senza etichetta di riga |
| 4 | Colorazione del grafico delle sequenze temporali Grafico delle linee temporali personalizzato |
TreeMap è una rappresentazione visiva di un albero di dati, in cui ogni nodo può avere zero o più figli e un genitore (eccetto la radice). Ogni nodo viene visualizzato come un rettangolo, può essere ridimensionato e colorato in base ai valori che assegniamo. Dimensioni e colori vengono valutati rispetto a tutti gli altri nodi nel grafico. Di seguito è riportato un esempio di grafico ad albero. Abbiamo già visto la configurazione utilizzata per disegnare questo grafico nel capitolo Sintassi della configurazione di Google Charts . Quindi, vediamo l'esempio completo.
Configurazioni
Noi abbiamo usato TreeMap class per mostrare il diagramma della mappa ad albero.
//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));Esempio
googlecharts_treemap.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript" src = "https://www.google.com/jsapi">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['treemap']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 0, 0],
['Asia', 'Global', 0, 0],
['Australia', 'Global', 0, 0],
['Africa', 'Global', 0, 0],
['USA', 'America', 52, 31],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['France', 'Europe', 42, -11],
['Germany', 'Europe', 31, -2],
['Sweden', 'Europe', 22, -13],
['China', 'Asia', 36, 4],
['Japan', 'Asia', 20, -12],
['India', 'Asia', 40, 63],
['Egypt', 'Africa', 21, 0],
['Congo', 'Africa', 10, 12],
['Zaire', 'Africa', 8, 10]
]);
var options = {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
};
// Instantiate and draw the chart.
var chart = new google.visualization.TreeMap(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Risultato
Verifica il risultato.
Una linea di tendenza è una linea sovrapposta a un grafico per rivelare la direzione complessiva dei dati. I grafici di Google possono generare automaticamente linee di tendenza per grafici Sankey, grafici a dispersione, grafici ad area con gradini, tabelle, linee temporali, mappa ad albero, linee di tendenza, grafici a barre, grafici a colonne e grafici a linee. Discuteremo i seguenti tipi di grafici con linee di tendenza.
| Sr.No. | Tipo e descrizione del grafico |
|---|---|
| 1 | Grafico delle linee di tendenza di base Grafico delle linee di tendenza di base. |
| 2 | Grafico delle linee di tendenza esponenziali Grafico delle linee di tendenza esponenziali. |
| 3 | Grafico delle linee di tendenza polinomiali Grafico delle linee di tendenza polinomiali. |