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>
|
Link Utili:
