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/

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> 
<script type="text/javascript"> 
var barChartData = {        
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: 'Pass',
            backgroundColor: "#1E90FF",
            data: [
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000
           ]
        }, {
            label: 'NG',
            backgroundColor: "#F7464A",
            data: [
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000
            ]
        }]
    };
 window.onload = function() {
    var ctx = $('#chart').get(0).getContext("2d"); 
    window.theChart = new Chart(ctx, {
         type: 'bar',
         data: barChartData,
         options: {
            
         }
 });
}
</script>
<canvas id="chart"></canvas> 

위 코드를 실행하면 아래와 같은 차트가 화면에 꽉 차게 그려지는데

canvas를 감싸는 div를 만들어 그 div에 크기를 정해주면 차트 크기를 조정할 수도 있고 

options를 이용해 이미 정의된 방법으로 차트를 조정할 수도 있고

Chart.plugins.register를 이용해 필요한 차트 option을 만들 수도 있다.