Grafici Google angolari - 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.

angular-google-chartsè un wrapper angolare open source per Google Charts che fornisce visualizzazioni di Google Charts eleganti e ricche di funzionalità all'interno di un'applicazione Angular e può essere utilizzato insieme ai componenti Angular senza problemi. Ci sono capitoli che discutono tutti i componenti di base di Google Charts con esempi appropriati all'interno di un'applicazione Angular.

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 e 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 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 / 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 di 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 .

Questo tutorial ti guiderà su come preparare un ambiente di sviluppo per iniziare il tuo lavoro con Google Charts e Angular Framework. In questo capitolo, discuteremo la configurazione dell'ambiente richiesta per Angular 6. Per installare Angular 6, abbiamo bisogno di quanto segue:

  • Nodejs
  • Npm
  • CLI angolare
  • IDE per scrivere il tuo codice

Nodejs deve essere maggiore di 8.11 e npm deve essere maggiore di 5.6.

Nodejs

Per verificare se nodejs è installato sul tuo sistema, digita node -vnel terminale. Questo ti aiuterà a vedere la versione di nodejs attualmente installata sul tuo sistema.

C:\>node -v
v8.11.3

Se non stampa nulla, installa nodejs sul tuo sistema. Per installare nodejs, vai alla homepagehttps://nodejs.org/en/download/ di nodejs e installa il pacchetto in base al tuo sistema operativo.

In base al tuo sistema operativo, installa il pacchetto richiesto. Una volta installato nodejs, anche npm verrà installato insieme ad esso. Per verificare se npm è installato o meno, digita npm -v nel terminale. Dovrebbe visualizzare la versione di npm.

C:\>npm -v
5.6.0

Le installazioni di Angular 6 sono molto semplici con l'aiuto di angular CLI. Visita la home pagehttps://cli.angular.io/ di angolare per ottenere il riferimento del comando.

genere npm install -g @angular/cli, per installare la cli angolare sul tuo sistema.

Otterrai l'installazione di cui sopra nel tuo terminale, una volta installato Angular CLI. Puoi utilizzare qualsiasi IDE di tua scelta, ad esempio WebStorm, Atom, Visual Studio Code, ecc.

Installa Google Charts Wrapper

Esegui il seguente comando per installare il modulo Wrapper di Google Charts nel progetto creato.

googleChartsApp> npm angular-google-charts

+ [email protected]
added 2 packages in 20.526s

Aggiungi la seguente voce nel file app.module.ts

import { GoogleChartsModule } from 'angular-google-charts';

imports: [
   ...
   GoogleChartsModule
],

In questo capitolo, mostreremo la configurazione richiesta per disegnare un grafico utilizzando l'API di Google Chart in Angular.

Passaggio 1: creare un'applicazione angolare

Segui i seguenti passaggi per aggiornare l'applicazione Angular che abbiamo creato in Angular 6 - Capitolo Configurazione del progetto -

Passo Descrizione
1 Crea un progetto con un nome googleChartsApp come spiegato nel capitolo Angular 6 - Project Setup .
2 Modifica app.module.ts , app.component.ts e app.component.html come spiegato di seguito. Mantieni il resto dei file invariato.
3 Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata.

Di seguito è riportato il contenuto del descrittore del modulo modificato app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
   declarations: [
      AppComponent   
   ],
   imports: [
      BrowserModule,GoogleChartsModule
   ],
   providers: [], bootstrap: [AppComponent]
})
export class AppModule { }

Di seguito è riportato il contenuto del file host HTML modificato app.component.html.

<google-chart #chart
   [title]="title"
   [type]="type"
   [data]="data"
   [columnNames]="columnNames"
   [options]="options"
   [width]="width"
   [height]="height">
</google-chart>

Vedremo l'app.component.ts aggiornato alla fine dopo aver compreso le configurazioni.

Passaggio 2: utilizzare le configurazioni

Imposta titolo

title = 'Browser market shares at a specific website, 2014';

Imposta tipo di grafico

type='PieChart';

dati

Configurare i dati da visualizzare sul grafico.

data = [
   ['Firefox', 45.0],
   ['IE', 26.8],
   ['Chrome', 12.8],
   ['Safari', 8.5],
   ['Opera', 6.2],
   ['Others', 0.7] 
];

nomi di colonne

Configurare i nomi delle colonne da visualizzare.

columnNames = ['Browser', 'Percentage'];

opzioni

Configura le altre opzioni.

options = {
   colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], is3D: true
};

Esempio

Considera il seguente esempio per comprendere ulteriormente la sintassi della configurazione:

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Browser market shares at a specific website, 2014';
   type = 'PieChart';
   data = [
      ['Firefox', 45.0],
      ['IE', 26.8],
      ['Chrome', 12.8],
      ['Safari', 8.5],
      ['Opera', 6.2],
      ['Others', 0.7] 
   ];
   columnNames = ['Browser', 'Percentage'];
   options = {    
   };
   width = 550;
   height = 400;
}

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.

Suor n Tipo / 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 con punti mancanti

Grafico con punti mancanti nei dati.

I grafici a barre vengono utilizzati per disegnare grafici basati su barre. In questa sezione discuteremo i seguenti tipi di grafici a barre.

Suor n Tipo / 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 negativa

Grafico a barre con stack negativo.

I grafici a bolle vengono utilizzati per disegnare grafici a bolle. In questa sezione discuteremo i seguenti tipi di grafici basati su bolle.

Suor n Tipo / 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 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.

Suor n Tipo / 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.

Suor n Tipo / descrizione del grafico
1 Colonna di base

Grafico colonne di base

2 Istogramma raggruppato

Grafico a colonne raggruppate.

3 Colonna impilata

Grafico a colonne con colonne impilate l'una sull'altra.

4 Colonna impilata negativa

Grafico a colonne con stack negativo.

Il grafico a combinazione aiuta a rendere ogni serie come un diverso tipo di marcatore dall'elenco seguente: linea, area, barre, candele e area con gradini. Per assegnare un tipo di indicatore predefinito per le serie, utilizzare la proprietà seriesType. La proprietà della serie deve essere utilizzata per specificare le proprietà di ciascuna serie individualmente. Di seguito è riportato un esempio di un istogramma che mostra le differenze.

Abbiamo già visto le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Google Charts . Ora, vediamo un esempio di un grafico a colonne che mostra le differenze.

Configurazioni

Noi abbiamo usato ComboChart class per mostrare un diagramma di combinazione.

type='ComboChart';

Esempio

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Fruits distribution';
   type = 'ComboChart';
   data = [
      ["Apples", 3, 2, 2.5],
      ["Oranges",2, 3, 2.5],
      ["Pears", 1, 5, 3],
      ["Bananas", 3, 9, 6],
      ["Plums", 4, 2, 3]
   ];
   columnNames = ['Fruits', 'Jane','Jone','Average'];
   options = {   
      hAxis: {
         title: 'Person'
      },
      vAxis:{
         title: 'Fruits'
      },
      seriesType: 'bars',
      series: {2: {type: 'line'}}
   };
   width = 550;
   height = 400;
}

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 hanno 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.

Suor n Tipo / 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.

Suor n Tipo / 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 Asse personalizzabile ed etichette di graduazione

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.

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.

Suor n Tipo / descrizione del grafico
1 Mappa di base

Mappa Google di base.

2 Mappa utilizzando latitudine / longitudine

Mappa con posizioni specificate utilizzando Latitudine e Longitudine.

Di seguito è riportato un esempio di organigramma.

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 le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Google Charts . Vediamo ora un esempio di organigramma.

Configurazioni

Noi abbiamo usato OrgChart classe per mostrare un organigramma.

type='OrgChart';

Esempio

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '';
   type = 'OrgChart';
   data = [
      [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
         '', 'The President'],
      [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
         'Mike', 'VP'],
      ['Alice', 'Mike', ''],
      ['Bob', 'Jim', 'Bob Sponge'],
      ['Carol', 'Bob', '']
   ];
   columnNames = ["Name","Manager","Tooltip"];
   options = {   
      allowHtml: true
   };
   width = 550;
   height = 400;
}

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.

Suor n Tipo / 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.

Suor n Tipo / 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.

Di seguito è riportato un esempio di grafico a dispersione.

Abbiamo già visto le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Google Charts . Vediamo ora un esempio di grafico a dispersione.

Configurazioni

Noi abbiamo usato ScatterChart class per mostrare un grafico a dispersione.

type = 'ScatterChart';

Esempio

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Age vs Weight';
   type='ScatterChart';
   data = [
      [8,12],
      [4, 5.5],
      [11,14],
      [4,5],
      [3,3.5],
      [6.5,7]
   ];
   columnNames = ['Age', 'Weight'];
   options = {   
   };
   width = 550;
   height = 400;
}

Risultato

Verifica il risultato.

Un grafico ad area a gradini è un grafico ad area basato su passi. Discuteremo i seguenti tipi di grafici ad area a gradini.

Suor n Tipo / 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.

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 le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Google Charts . Vediamo ora un esempio di un grafico tabellare.

Configurazioni

Noi abbiamo usato Table class per mostrare un grafico a tabella.

type = 'Table';

Esempio

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = "";
   type = 'Table';
   data = [
      ['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]
   ];
   columnNames = ["Name", "Salary","Full Time Employee"];
   options = { 
     alternatingRowStyle:true,
     showRowNumber:true  
   };
   width = 550;
   height = 400;
}

Risultato

Verifica il risultato.

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 le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Google Charts . Vediamo ora un esempio di un grafico TreeMap.

Configurazioni

Noi abbiamo usato TreeMap class per mostrare un grafico TreeMap.

type = 'TreeMap';

Esempio

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '';
   type='TreeMap';
   data = [
      ["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],
          
   ];
   columnNames = ["Location", "Parent","Market trade volume (size)","Market increase/decrease (color)"];
   options = { 
      minColor:"#ff7777",
      midColor:'#ffff77',
      maxColor:'#77ff77',
      headerHeight:15,
      showScale:true
   };
   width = 550;
   height = 400;
}

Risultato

Verifica il risultato.