Creare grafici in Angular CLI con Angular Highcharts
Come prima azione occorre installare Angular Highcharts, le informazioni sono nella pagina alla seguente URL:
https://www.npmjs.com/package/angular-highcharts
In sostanza occorre effettuare l’installazione con il comando
npm i angular-highcharts highcharts
N.B. ho aggiunto highcharts per installare angular-highcharts e highcharts
Una volta effettuata l’installazione occorre importare il modulo installato inserendo i riferimenti nel file app.module.ts:
// app.module.ts
import { ChartModule } from 'angular-highcharts';
@NgModule({
imports: [
ChartModule // add ChartModule to your imports
]
})
export class AppModule {}
Per l’utilizzo qui di seguito un esempio:
// chart.component.ts
import { Chart } from 'angular-highcharts';
@Component({
template: `
<button (click)="add()">Add Point!</button>
<div [chart]="chart"></div>
`
})
export class ChartComponent {
chart = new Chart({
chart: {
type: 'line'
},
title: {
text: 'Linechart'
},
credits: {
enabled: false
},
series: [
{
name: 'Line 1',
data: [1, 2, 3]
}
]
});
// add point to chart serie
add() {
this.chart.addPoint(Math.floor(Math.random() * 10));
}
}