e-ngx-chart v5.1.0

e-ngx-chart

基于Angular的图表组件。

依赖的第三方插件：highcharts

Usage

1. Install

   npm install --save e-ngx-chart

2. Add the ENgxChartModule

   import { ENgxChartModule } from "e-ngx-chart";
   @NgModule({
       imports: [
           ENgxChartModule
       ]
   })

3. template

   <div class="chart-main" eNgxChart [chartOptions]="chartOptions"></div>

4. 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
   		}
   	});

API

exportAs

• eNgxChart - 导出的指令变量，可在模板获取指令类并调用（#eNgxChart="eNgxChart"）。

Inputs

• type（string?='chart'） - 图表类型。chart 表示 HighCharts，stockChart 表示 HighStock

• chartOptions（ENgxChartOptions） - new ENgxChartOptions(options)时，options与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