Contenuti

Angular Highcharts: Creazione step-by-step di Grafici

In questa breve guida vedremo come utilizzare angular-highcharts passo dopo passo per creare grafici nella nostra WebApp. Al momento della scrittura di questo articolo la versione rilasciata di angular-highcharts è la 8.0.3 e funziona solamente con Angular8 come riportato nella sezione Requirements presente nella pagina npm. Questa non è l’unica nota da stare attenti e per capirlo vi basterà leggere la nota che riporto in seguito.

Warning: This version (8.x.x) of angular-highcharts only runs with versions of Angular greater than 8 and Highcharts greater than 7. And also be sure to remove @types/highcharts from your dependencies.

1
2
3
4
5
6

{
  "angular": ">=8.0.0",
  "highcharts": ">=7.0.0"
}

Angular Highcharts: HowTo

Per potere utilizzare angular-highcharts all’interno della nostra WebApp dobbiamo installarlo tramite npm da riga di comando tramite la seguente sintassi

1
2
3

npm i --save angular-highcharts highcharts

Ora bisogna solamente mettere mano al codice. L’esempio che propongo mostrerà un grafico (type uguale a line) dei valori casuali (ad ogni nuovo caricamento cambieranno) di tre serie sovrapposte. app.module

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import { ChartModule } from 'angular-highcharts';

import { LineChartComponent } from './charts/line-chart/linechart.component';

@NgModule({
	declarations: [
		ListOfMyAppComponents,
		LineChartComponent
	],
	imports: [
		BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
		ListOfMyAppModule,
		ChartModule ,
		RouterModule.forRoot([
			{ path: 'chart', component: LineChartComponent, pathMatch: 'full' },
			{ path: 'chart/line', component: LineChartComponent, pathMatch:'full'}
		])
	],
	providers: [],
	bootstrap: [AppComponent]
})

linechart.component.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

import { Component } from '@angular/core';

// npm i --save angular-highcharts highcharts
import { Chart } from 'angular-highcharts';

@Component({
  selector: 'app-line-chart-component',
  templateUrl: './linechart.component.html'
})
export class LineChartComponent {

	public lineChart: Chart;
	private _howMany: number;

	constructor() {
		this._howMany = 40;
	}

	private generateRandomData(howMany: number, maxValue:number) {
		let result: number[] = [];
		for (var i = 0; i < howMany; i++) {
			result.push(Math.floor(Math.random() * maxValue));
		}
		return result;
	}

	ngOnInit() {
		this.lineChart = new Chart({
			chart: {
				type: 'line'
			},
			title: {
				text: 'Random Data'
			},
			credits: {
				enabled: false
			},
			series: [{
				type: 'line',
				name: 'Random Data - series 1',
				data: this.generateRandomData(this._howMany,90)
			}, {
				type: 'line',
					name: 'Random Data - series 2',
					data: this.generateRandomData(this._howMany,120)
				}, {
					type: 'line',
					name: 'Random Data - series 3',
					data: this.generateRandomData(this._howMany,60)
				}]
		});
	}
  
}


linechart.component.html

1
2
3
4
5

<h1>Line Chart</h1>

<div [chart]="lineChart"></div>

NPM angular-highcharts