Highcharts angolari - Guida rapida

HighChart Angular Wrapperè un componente angolare open source che fornisce visualizzazioni Highcharts 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 Highcharts con esempi appropriati all'interno di un'applicazione Angular.

Caratteristiche

  • Compatible- Tutti i browser moderni sono supportati insieme ai browser iPhone / iPad e Internet Explorer 6 in poi. I browser moderni utilizzano SVG per il rendering della grafica e nella versione legacy di Internet Explorer la grafica viene disegnata utilizzando VML.

  • Pure TypeScript - Non è richiesto JavaScript poiché l'API Highcharts completa è disponibile in TypeScript.

  • No Flash - Nessun requisito di plug-in lato client come Flash player o Java poiché Highcharts utilizza tecnologie browser native e le carte possono essere eseguite senza modifiche sui dispositivi mobili moderni.

  • Clean Syntax - La maggior parte dei metodi sono concatenabili, quindi le opzioni di configurazione del grafico possono essere gestite utilizzando una sintassi stretta come JSON.

  • Dynamic- Serie e punti possono essere aggiunti dinamicamente in qualsiasi momento dopo la creazione del grafico. Hook di eventi supportati. Le interazioni con il server sono supportate.

  • Documented - Le API di Highcharts sono accuratamente documentate con numerosi esempi di codice e sintassi.

Questo tutorial ti guiderà su come preparare un ambiente di sviluppo per iniziare il tuo lavoro con Highcharts 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.

La homepage di nodejs sarà simile alla seguente:

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 Highcharts

Eseguire il seguente comando per installare il modulo highchart nel progetto creato.

highchartsApp>npm install highcharts --save
+ [email protected]
added 1 package in 137.534s

Eseguire il seguente comando per installare il modulo wrapper highchart nel progetto creato.

highchartsApp>npm install highcharts-angular --save
+ [email protected]
added 1 package in 20.93s

Aggiungi la seguente voce nel file highchartsApp.module.ts

import { HighchartsChartComponent } from 'highcharts-angular';
declarations: [
   ...
   HighchartsChartComponent    
],

In questo capitolo, mostreremo la configurazione richiesta per disegnare un grafico utilizzando l'API Highcharts 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 highchartsApp 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 { HighchartsChartComponent } from 'highcharts-angular';
@NgModule({
   declarations: [
      AppComponent,
      HighchartsChartComponent    
   ],
   imports: [
      BrowserModule,
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

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

<highcharts-chart
   [Highcharts] = "highcharts" 
   [options] = "chartOptions" 
   style = "width: 100%; height: 400px; display: block;">
</highcharts-chart>

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

Passaggio 2: utilizzare le configurazioni

Crea Highcharts e crea chartOptions

highcharts = Highcharts;
   chartOptions = {   
}

Crea grafico

Configura il tipo, il titolo e il sottotitolo del grafico utilizzando chartOptions.

chart: {
   type: "spline"
},

xAxis

Configura il ticker da visualizzare sull'asse X usando chartOptions.

xAxis:{
   categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},

yAxis

Configurare il titolo da visualizzare sull'asse Y utilizzando chartOptions.

yAxis: {          
   title:{
      text:"Temperature °C"
   } 
},

tooltip

Configura la descrizione comando. Metti il ​​suffisso da aggiungere dopo il valore (asse y) usando chartOptions.

tooltip: {
   valueSuffix:" °C"
},

serie

Configurare i dati da visualizzare sul grafico utilizzando chartOptions. La serie è un array in cui ogni elemento di questo array rappresenta una singola riga sul grafico.

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]
   }
]

Esempio

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

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {   
      chart: {
         type: "spline"
      },
      title: {
         text: "Monthly Average Temperature"
      },
      subtitle: {
         text: "Source: WorldClimate.com"
      },
      xAxis:{
         categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
      },
      yAxis: {          
         title:{
            text:"Temperature °C"
         } 
      },
      tooltip: {
         valueSuffix:" °C"
      },
      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]
         }
      ]
   };
}

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.

Suor n Tipo e descrizione del grafico
1 Linea di base

Grafico a linee di base.
2 Con etichette dati

Grafico con etichette dati.
3 Serie storica, ingrandibile

Grafico con serie temporali.
4 Scanalatura con assi invertiti

Grafico spline con assi invertiti.
5 Spline con simboli

Grafico a spline che utilizza i simboli per il caldo / la pioggia.
6 Spline con bande di trama

Grafico spline con bande di trama.

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 termini percentuali.
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.

I grafici a barre vengono utilizzati per disegnare grafici a barre. 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 Grafico a barre con valori negativi

Grafico a barre con valori negativi.

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 Intervallo di colonne

Istogramma che utilizza intervalli.

GWP Highcharts - Grafici a torta

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.

Di seguito è riportato un esempio di un grafico a dispersione di base.

Abbiamo già visto la configurazione utilizzata per disegnare un grafico nel capitolo Sintassi della configurazione di Highcharts .

Di seguito viene fornito un esempio di un grafico a dispersione di base.

Configurazioni

Vediamo ora le configurazioni / passaggi aggiuntivi effettuati.

serie

Configurare il tipo di grafico in modo che sia basato sulla dispersione. series.typedecide il tipo di serie per il grafico. Qui, il valore predefinito è "line".

var chart = {
   type: 'scatter',
   zoomType: 'xy'
};

Esempio

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {         
      title : {
         text: 'Scatter plot'   
      },      
      series : [{
         type: 'scatter',
         zoomType:'xy',
         name: 'Browser share',
         data: [ 1, 1.5, 2.8, 3.5, 3.9, 4.2 ]
      }]
   };
}

Risultato

Verifica il risultato.

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 Scatter 3D

Grafico a dispersione 3D.
3 Torta 3D

Grafico a torta 3D.

I grafici mappa vengono utilizzati per disegnare mappe termiche o grafici ad albero. In questa sezione, discuteremo i diversi tipi di grafici a mappa.

Sr.No. Tipo e descrizione del grafico
1 Mappa di calore

Mappa di calore.
2 Mappa dell'albero

Mappa dell'albero.