脚本宝典收集整理的这篇文章主要介绍了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>
以上是脚本宝典为你收集整理的angular2-highcharts用法详解全部内容,希望文章能够帮你解决angular2-highcharts用法详解所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。