angular2-highcharts用法详解

最新推荐文章于 2024-09-26 07:55:06 发布

maxer025

最新推荐文章于 2024-09-26 07:55:06 发布

阅读量302

点赞数

CC 4.0 BY-SA版权

分类专栏： angular2-highcharts用法详解文章标签： angular2 highcharts

本文链接：https://blog.youkuaiyun.com/maxer025/article/details/84913058

angular2-highcharts用法详解专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何使用Angular2-Highcharts创建动态图表。主要内容包括：通过npm安装库，将ChartModule导入到主模块，定义组件中的图表配置数据，并在模板中加载图表。通过实例演示了如何设置饼图的样式及数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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