基于Angular的图表组件。
依赖的第三方插件:highcharts
-
Install
npm install --save e-ngx-chart
-
Add the ENgxChartModule
import { ENgxChartModule } from "e-ngx-chart"; @NgModule({ imports: [ ENgxChartModule ] })
-
template
<div class="chart-main" eNgxChart [chartOptions]="chartOptions"></div>
-
component
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 } });
eNgxChart
- 导出的指令变量,可在模板获取指令类并调用(#eNgxChart="eNgxChart"
)。
-
type
(string?='chart'
) - 图表类型。chart
表示 HighCharts,stockChart
表示 HighStock -
chartOptions
(ENgxChartOptions
) - new ENgxChartOptions(options)时,options与Highcharts的配置属性一致
ready
- 初始化完成的事件,$event为当前ENgxChartDirective实例
chartDestroy()
- 销毁图表控件
-
setData(data: any[], index: number = 0)
- 设置数据列的值。其中index为数据列序号。 -
setXCategories(categories: any[], index: number = 0)
- 设置x轴分类。其中index为x轴序号。 -
setSeries(series: any)
- 设置数据列。 -
setXaxisCategories(categories: any)
- 设置x轴分类。