그냥 오리지널 Chart.js를 ionic2에서도 사용할 수 있는 방법이 없는 줄 알았는데.. 있었다.

이 방법이 더 웹에서 사용하던 Chart.js 방법과 유사하기 때문에

앞으로 나는 이 방법을 더 쓰게 될 것 같다.

사용 방법은 다음과 같다.

1. npm을 사용하여 chart.js를 설치한다.

$ npm  install chart.js --save

2. html 파일을 작성한다.

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

<ion-content padding>
   <ion-card>
      <ion-card-content>
        <canvas #chartCanvas></canvas>
      </ion-card-content>
   </ion-card>
</ion-content>

3. ts 파일을 작성한다.

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Chart } from 'chart.js';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('chartCanvas') chartCanvas;
  chart: any;
  ionViewDidLoad() {
        this.chart = new Chart(this.chartCanvas.nativeElement, {
            type: 'bar',
            data: {
                labels: ["Red", "Orange", "Yellow", "Green", "Blue", "Purple"],
                datasets: [{
                    label: '# of Votes',
                    data: [
                        Math.random(),
                        Math.random(), 
                        Math.random(), 
                        Math.random(), 
                        Math.random(), 
                        Math.random()
                      ],
                    backgroundColor: [
                        'Red',
                        '#FFA500',
                        '#FFFF00',
                        'rgba(50, 205, 50, 1)',
                        'Blue',
                        'rgb(128, 0, 128)'
                    ]
                }]
            },
            options: {

            }
        });
  }
}

- web과 다른 점은 canvas의 context를 $('#chartCanvas').get(0).getContext("2d")가 아닌 this.chartCanvas.nativeElement로 가져온다는 것이다.

- 색깔은 보다시피 여러 가지 방법으로 정할 수 있다. 원하는 방법으로 쓰면 될 듯.

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

$ cordova run android

출처 : https://www.joshmorony.com/adding-responsive-charts-graphs-to-ionic-2-applications/

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을 만들 수도 있다.

안녕하세요?

7개월차 개발자 리샤입니다.

잘 부탁드립니다.