[하이브리드앱 ionic]시작해보기 12 - 차트 그리기

Angular 와 typescript를 이용해 차트를 그려보자 

 

 

 

page.html

<div id="content">
	<canvas #chart></canvas>
</div>

 

page.ts

 

import { Component , OnInit , ElementRef , ViewChild} from '@angular/core';
import * as Chart from 'chart.js';

@Component({
  .
  .
  .
})
export class ReportPage implements OnInit{
  @ViewChild("chart")
  public refChart: ElementRef;
  public chartData: any;
  constructor() {
    this.chartData = {};
  }
  public ngOnInit() { 
    this.chartData = {
      labels: ["비행기", "숙박", "식비","쇼핑", "관광", "교통", "기타"],
      datasets: [{
          label: '# of Votes',
          data: [25800, 36500, 2300, 58600, 28500, 0, 0],
          backgroundColor: [
              'rgba(255,99,132,1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(180, 168, 164, 1)'
          ]
      }]
    };
  }
  public ngAfterViewInit() {
    let chart = this.refChart.nativeElement;
    let ctx = chart.getContext("2d");
    let myChart = new Chart(ctx, {
        type: 'pie',
        data: this.chartData, 
        options: {
        //차트 라벨에 대한 옵션 
          legend: {  
              position:'right',
              labels:{
                boxWidth:5
              }
                    
          }
        }
    });
  } 
}

 

 

 

결과는 아래와 같다

 

 

 

차트 타입과 옵션설정은 아래 참고 

https://www.chartjs.org/docs/latest/configuration/legend.html

Legend · Chart.js documentation

 

코드 참고

https://www.thepolyglotdeveloper.com/2018/06/attractive-charts-angular-web-application/

Including Attractive Charts In Your Angular Web Application