1.方法一
1.1安装包
cnpm i --save angular-highcharts@5 highcharts@5
cnpm i --save-dev @types/highcharts
1.2引入模块
在app.modules.ts中引入
import { ChartModule } from 'angular-highcharts';
imports: [
BrowserModule,
ChartModule
],
1.3在使用chart的组件ts中引入
import { Chart } from 'angular-highcharts';
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));
}
1.4 html中使用
<div [chart]="chart" style="width: 500px;height: 400px;"></div>
2方法二
2.1安装
cnpm install highcharts-angular --save
cnpm install highcharts highcharts-angular --save
2.2app.module.ts中引入
import { HighchartsChartModule } from 'highcharts-angular';
imports: [
...
HighchartsChartModule
2.3app.component.ts中引入
import * as Highcharts from 'highcharts';
添加模板 Highcharts-angular 组件选择器 highcharts-chart
<highcharts-chart
[Highcharts]="Highcharts"
[constructorType]="chartConstructor"
[options]="chartOptions"
[callbackFunction]="chartCallback"
[(update)]="updateFlag"
[oneToOne]="oneToOneFlag"
[runOutsideAngular]="runOutsideAngularFlag"
style="width: 100%; height: 400px; display: block;"
></highcharts-chart>
所有变量都应该被设置为 export class AppComponent {
export class AppComponent {
Highcharts = Highcharts; // 必填
chartConstructor = 'chart'; // 可选 String,默认为 'chart'
chartOptions = { ... }; // 必填
chartCallback = function (chart) { ... } // 可选 Function,图表加载后的回调函数,默认为空
updateFlag = false; // 可选 Boolean
oneToOneFlag = true; // 可选 Boolean,默认为 false
runOutsideAngular = false; // 可选 Boolean,默认为 false
...
2.4HTML中使用
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 400px; display: block;"
></highcharts-chart>
导出变量
export class AppComponent {
Highcharts = Highcharts;
chartOptions = {
series: [{
data: [1, 2, 3]
}]
};
...