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://segmentfault.com/a/1190000007957170