Highcharts angolari - Configurazione dell'ambiente

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