Angular 프레임워크는 데이터 시각화를 위한 여러 라이브러리를 지원합니다. 그 중에서도 Chart.js는 사용하기 간편하면서 다양한 차트 타입을 지원하여 많은 개발자들에게 사랑받고 있습니다. 이번 글에서는 Chart.js와 Angular를 함께 사용하는 방법에 대해 알아보겠습니다.

Chart.js 설치하기

먼저, Chart.js를 사용하기 위해서는 해당 라이브러리를 프로젝트에 설치해야 합니다. Angular CLI를 이용하여 아래 명령어를 실행하여 Chart.js를 설치합니다.

npm install chart.js --save

Angular에 Chart.js 추가하기

Chart.js를 Angular 프로젝트에 추가하기 위해서는 먼저 angular.json 파일을 열어서 scripts 배열에 Chart.js 라이브러리의 경로를 추가해야 합니다. 아래와 같이 수정합니다.

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "node_modules/chart.js/dist/chart.js"
            ]
          }
        }
      }
    }
  }
}

이제 Angular 애플리케이션에서 Chart.js를 사용할 수 있게 준비되었습니다.

Angular 컴포넌트에서 차트 생성하기

Chart.js를 사용하여 차트를 만들기 위해서는 Angular 컴포넌트에서 Chart.js의 API를 호출해야 합니다. 컴포넌트에서 Chart.js를 사용하기 위해서는 ngAfterViewInit 라이프사이클 훅을 사용하여 차트를 설정해야 합니다.

다음은 선 그래프(Line Chart)를 생성하는 예제입니다.

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

@Component({
  selector: 'app-chart',
  template: '<canvas #chartCanvas></canvas>',
})
export class ChartComponent implements AfterViewInit {
  @ViewChild('chartCanvas') chartCanvas: ElementRef;

  ngAfterViewInit(): void {
    const chartConfig = {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
          label: 'Sales',
          data: [65, 59, 80, 81, 56, 55, 40],
          borderColor: 'blue',
          fill: false,
        }],
      },
    };

    const chartElement = this.chartCanvas.nativeElement.getContext('2d');
    new Chart(chartElement, chartConfig);
  }
}

위 예제에서는 ngAfterViewInit 메소드에서 차트의 설정을 정의하고, ViewChild 데코레이터를 사용하여 DOM 요소에 접근했습니다. 그리고 Chart 클래스를 이용하여 차트를 생성하였습니다.

추가적인 차트 설정

Chart.js는 다양한 차트 설정 옵션들을 제공하여 쉽게 차트를 맞춤 설정할 수 있습니다. 예를 들어, labels 배열에는 x축에 표시될 레이블들을 설정할 수 있고, datasets 배열에는 데이터셋을 설정할 수 있습니다.

Chart.js의 자세한 사용법과 설정 옵션에 대해서는 공식 문서를 참고하시기 바랍니다.

결론

이렇게 Chart.js와 Angular를 함께 사용하는 방법에 대해 알아보았습니다. Chart.js는 다양한 차트 타입을 지원하면서 Angular와의 연동도 간단하게 할 수 있으므로 프로젝트에 시각화 기능이 필요한 경우 사용해보시기 바랍니다.