Ionic 2のグラフ

Question

Ionic 2を使用するアプリでグラフを作成する必要があります。ウェブを検索しましたが、非常に希少なモデルがいくつか見つかりました。そしてまたhttp://www.chartjs.orgが、彼の文書は非常に貧しいです。

ほとんどの場合、クリックイベントを伴うドーナツチャートが必要です。または、私がchartjsドーナツチャートでclickイベントを持つことは可能ですか？これどうやってするの？

Answer 1

角度2/4のChartJSラッパーであるng2-chartsを使用してください。

次のようにを（クリックイベントで）簡単なドーナツグラフを作成することができ、これを使用する：

テンプレート

<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
_{（これはイオン2に実装するにはあまりにも難しいことではありません）}

_{注：これはドーナツグラフのほんの基本的な例であり、あなたは、次の、あなたのニーズに合わせて、さらにそれをカスタマイズすることができますofficial documentation。}