essence-ng2-chart

essence-ng2-chart

essence-ng2-chart is an Angular directive that can draw a chart.

依赖的第三方插件：highcharts

Usage

1. Install

   npm install --save essence-ng2-chart

2. Add the EssenceNg2PrintModule

   import {EssenceNg2ChartModule} from "essence-ng2-chart";
   @NgModule({
       imports: [
           EssenceNg2ChartModule
       ]
   })

3. template

   <div class="chart-main" essence-ng2-chart [chart]="chart"></div>

4. component

   import { EssenceChart } from "essence-ng2-chart";
   
   chart = new EssenceChart({
           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

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

Inputs

• chart（EssenceChart） - new EssenceChart(options)时，options与Highcharts的配置属性一致

Outputs

• ready - 初始化完成的事件，$event为当前EssenceNg2ChartDirective实例

Instance Method

EssenceNg2ChartDirective

• chartDestroy() - 销毁图表控件

EssenceChart

• setData(data: any[], index: number = 0) - 设置数据列的值。其中index为数据列序号。

• setXCategories(categories: any[], index: number = 0) - 设置x轴分类。其中index为x轴序号。

• setSeries(series: any) - 设置数据列。

• setXaxisCategories(categories: any) - 设置x轴分类。

License