angular2-highcharts用法详解

angular2-highcharts用法详解

1 使用npm安装angular2-highcharts

npm install angular2-highcharts --save

2、主模块中引入 app.module.ts

import {ChartModule} from "angular2-highcharts";
...
imports: [
ChartModule
]
...


3、组件中定义图标配置数据，可在highcharts官网查看配置 app.component.ts

import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
options:Object;
constructor() {
this.options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
data: [
{ name: 'Microsoft Internet Explorer', y: 56.33 },
{ name: 'Chrome', y: 24.03 },
{ name: 'Firefox', y: 10.38 },
{ name: 'Safari', y: 4.77 },
{ name: 'Opera', y: 0.91 },
{ name: 'Proprietary or Undetectable', y: 0.2 }
]
}]
}
}
}


4、模板中加载图像

<chart [options]="options"></chart>


//参考 https://www.npmjs.com/package/angular2-highcharts