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