ng2-charts学习与实践（1）

ng2-charts是一个图表显示插件，它是Chart.js的angular版本，安装方法详见github。这里介绍一下基本的用法。

属性：

• data (Array<number[]> | number[]) - 图表的点集, Array<number[]> 只能用于line, bar 和 radar, 其他都可以用 number[];
• datasets (Array<{data: Array<number[]> | number[], label: string}>) - data 同上, label 用于在 legend 和 tooltips上显示
• labels (?Array<any>) - x轴的labels. 对图表类型 line, bar 和 radar是必须的。 对于图表类型 polarArea, pie 和 doughnut悬停显示

• chartType (?string) - 图表类型, 有这几种: line, bar, radar, pie, polarArea, doughnut
• options (?any) - 图表选项，这个后面再说
  
• colors (?Array<any>) - 图表中数据的颜色，如果不指定则会随机
  
• legend: (?boolean=false) - 是否显示图例，默认不显示

事件：

• chartClick: 点击图表触发，返回激活的点和标签信息
  
• chartHover: 鼠标悬停触发，返回激活的点和标签信息

例子：

    具体例子可以查看官方网站：点击打开链接

在组件中通过

@ ViewChild ( BaseChartDirective ) chart : BaseChartDirective ;

来获取实例。根据以下代码可以通过点击事件来获取点信息。

public chartClicked(e: any): void {
    if(e.active.length>0){

    let chartElement = this.chart.chart.getElementAtEvent(e.event)
  } 
}

点击事件触发后，e对象会有两个属性，一个是event，这个是我们熟悉的，还有一个是active数组，如果没有点击到数据点上，那么这个数组就为空。最后得到的chartElement会有_datasetIndex和_index属性，分别表示在dataset中的索引和在data中的索引。

至于悬停事件，我的ng2-charts版本是1.6.0，该版本有一个悬停事件无法触发的bug，需要修改ng2-charts/charts/charts.js源码，修改如下：

if (!options.hover.onHover) {
      //这是修改之前的代码
      // options.hover.onHover = function (active) {
      //   if (active && !active.length) {
      //     return;
      //   }
      //   _this.chartHover.emit({
      //     active: active
      //   });
      // }

      /* 修复chartHover无法触发的bug */
      options.hover.onHover = function (event, active) {
        if (active && !active.length) {
          return;
        }
        _this.chartHover.emit({
          event: event,
          active: active
        });
      };
      /**********************************/
    }

修复之后，鼠标只有悬停在数据点上时才会触发该事件。