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.