https://github.com/laixiangran/e-ngx-chart
基于Angular的图表组件，依赖第三方插件：highcharts
https://github.com/laixiangran/e-ngx-chart
angular chart highcharts
Last synced: about 1 month ago
JSON representation
基于Angular的图表组件，依赖第三方插件：highcharts
- Host: GitHub
- URL: https://github.com/laixiangran/e-ngx-chart
- Owner: laixiangran
- License: mit
- Created: 2017-04-23T07:44:54.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-11-15T01:39:44.000Z (over 7 years ago)
- Last Synced: 2025-01-26T08:27:19.810Z (over 1 year ago)
- Topics: angular, chart, highcharts
- Language: TypeScript
- Homepage:
- Size: 7.24 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# e-ngx-chart
基于Angular的图表组件。
依赖的第三方插件：[highcharts](https://www.hcharts.cn/demo/highcharts)
## Usage
1. Install
```shell
npm install --save e-ngx-chart
```
2. Add the ENgxChartModule
```typescript
import { ENgxChartModule } from "e-ngx-chart";
@NgModule({
imports: [
ENgxChartModule
]
})
```
3. template
```html
```
4. component
```typescript
import { ENgxChartOptions } from "e-ngx-chart";
chartOptions = new ENgxChartOptions({
chart: {
type: "column"
},
title: {
text: ""
},
xAxis: {
categories: ["西冉村", "宝山", "苗寨", "四季青", "北坞村", "金河闸", "田村", "香山"],
title: {
text: null
},
tickLength: 0
},
yAxis: {
min: 0,
title: {
text: null
},
labels: {
align: "center"
}
},
series: [{
data: [100, 120, 130, 140, 250, 160, 230, 180]
}],
credits: {
enabled: false
},
legend: {
enabled: false
},
tooltip: {
enabled: false
}
});
```
## API
### exportAs
- `eNgxChart` - 导出的指令变量，可在模板获取指令类并调用（`#eNgxChart="eNgxChart"`）。
### Inputs
- `type`（`string?='chart'`） - 图表类型。`chart` 表示 HighCharts，`stockChart` 表示 HighStock
- `chartOptions`（`ENgxChartOptions`） - new ENgxChartOptions(options)时，options与[Highcharts的配置属性](https://api.hcharts.cn/highcharts)一致
### Outputs
- `ready` - 初始化完成的事件，$event为当前ENgxChartDirective实例
### Instance Method
#### ENgxChartDirective
- `chartDestroy()` - 销毁图表控件
#### ENgxChartOptions
- `setData(data: any[], index: number = 0)` - 设置数据列的值。其中index为数据列序号。
- `setXCategories(categories: any[], index: number = 0)` - 设置x轴分类。其中index为x轴序号。
- `setSeries(series: any)` - 设置数据列。
- `setXaxisCategories(categories: any)` - 设置x轴分类。
# License
[](/LICENSE)