ng2 chart : ionic2, Angular에서 Chart.js 쓰는 법1

 

ng2 chart는 Chart.js를 기반으로 하는 angular2의 chart이다.

ng2 chart를 이용해 angular2에 차트를 그리는 방법은 다음과 같다.

 

1. npm을 사용하여 ng2-charts를 설치한다.

$ npm  install ng2-charts --save

 

2. app.module.ts에서 chart module을 import 한다.

import { ChartsModule } from 'ng2-charts/ng2-charts';
 
imports: [
   .....
   ChartsModule
   .....
]

 

3. html 파일을 작성한다.

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

<ion-content padding>
  <div style="DISPLAY: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
</ion-content>

 

4. ts 파일을 작성한다.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public barChartOptions:any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  public barChartType:string = 'bar';
  public barChartLegend:boolean = true;
 
  public barChartData:any[] = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
  ];
 
  // events
  public chartClicked(e:any):void {
    console.log(e);
  }
 
  public chartHovered(e:any):void {
    console.log(e);
  }
}

 

5. run을 하면 다음과 같은 차트가 그려진 것을 볼 수 있다.

$ cordova run android

 

 

 

출처 : https://valor-software.com/ng2-charts/