Ionic 2 中的图表答案

【问题标题】：Charts in Ionic 2Ionic 2 中的图表
【发布时间】：2017-09-20 01:46:28
【问题描述】：

我需要在一个使用 Ionic 2 的应用程序中创建图表。我搜索了网络，但发现了一些非常稀缺的模型。还有http://www.chartjs.org，但是他的文档很差。

我主要需要带有点击事件的圆环图。或者我是否可以在 chartjs 甜甜圈图表上进行点击事件？我该怎么做？

【问题讨论】：

如果解决方案是 angular 2（因为 ionic 2），我想是的，我的朋友。

标签： angular ionic2 chart.js

【解决方案1】：

您应该使用 ng2-charts，它是 Angular 2/4 的 ChartJS 包装器。

使用它您可以创建一个简单的圆环图（带有点击事件），如下所示：

模板

<div id="chart-container">
    <canvas baseChart 
          [chartType]="chartType"
          [data]="chartData"
          [labels]="chartLabels"
          (chartClick)="chartClicked($event)">
  </canvas>
</div>

组件

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  public chartType: string = 'doughnut';
  public chartLabels: Array<string> = ['Jan', 'Feb', 'Mar'];
  public chartData: Array<number> = [1, 1, 1];

  public chartClicked(e: any): void {
    if (!e.active.length) return; //return if not clicked on chart/slice
    alert('Clicked on Chart!');
  }

}

LIVE DEMO
_{（这在 Ionic 2 中应该不会太难实现）}

_{注意：这只是一个圆环图的基本示例，您可以按照official documentation 进一步自定义它以满足您的需要。}

【讨论】：

谢谢朋友，我要测试一下我的项目，看看能不能解决我的问题。
你知道是否有可能，当我点击时，我有我点击的区域的值？例子：如果我点击蓝色，显示在“feb - 1”
你的意思是.. 当你点击一个甜甜圈切片 (feb) 时获取值 (1)？
是的 .. 我需要一个 ID，所以我知道我点击了哪里。然后，我将根据点击打开一个参数化屏幕。
例子：如果我点击与2月相关的区域，我会调用一个函数：openMonth(monthClicked)