Ionic2+ng2-charts(導入)

概要

数日コレで悩んでやっとできたので、備忘録です。
ng2-chartsとは棒グラフとか円グラフとかを表示できるやつです。

github.com

ng2-chartsのインストール

npm install --save ng2-charts

node_modulesにchart.js/とng2-charts/ができるはずです（たぶん）

app.module.tsに追加

import { ChartsModule } from 'ng2-charts/ng2-charts';
import '../../node_modules/chart.js/dist/Chart.bundle.min.js';

// In your App's module:
imports: [
   ChartsModule
]

import { ChartsModule } from 'ng2-charts/ng2-charts';だけだとエラーができるので、import '../../node_modules/chart.js/dist/Chart.bundle.min.js';を追加することでちゃんと動くようになります。

sample

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <div style="display: block">
      <canvas baseChart
                  [data]="doughnutChartData"
                  [labels]="doughnutChartLabels"
                  [chartType]="doughnutChartType"
                  (chartHover)="chartHovered($event)"
                  (chartClick)="chartClicked($event)"></canvas>
    </div>
</ion-content>

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

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }
// Doughnut
  public doughnutChartLabels:string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
  public doughnutChartData:number[] = [350, 450, 100];
  public doughnutChartType:string = 'doughnut';

  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }
}