첫 투고입니다.
미비·매너 위반등 있으면 코멘트 받을 수 있으면 다행입니다.

배경

개인 개발로 차트를 그릴 수 있도록 하고 싶다고 차트 라이브러리를 조사하고 있었는데, @Statham 씨의 자바스크립트 차트 라이브러리 데모 요약 라고 하는 기사를 만나, Google Charts 에 흥미를 가졌습니다.

또한 Google Charts에는 (평소 일에서 사용되고 있는) angular용으로 커스터마이즈 된 angular-google-charts라는 라이브러리가 있는 것 같기 때문에, 이번은 이것을 사용해 바삭바삭하게 그래프 그리고 싶습니다.

환경

Angular Cli, Node.js가 도입되었다고 가정합니다.
버전은 다음과 같습니다.

> ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.26
Node: 10.16.1
OS: win32 x64
Angular: 8.2.14
...(省略

프로젝트 만들기

> ng new google-charts-sample

초기설정을 여러가지 듣습니다만, 이번은 모두 default로 진행해 갑니다. (Enter 연타
완료되면 만든 프로젝트로 이동하여 로컬로 시작합니다.

> cd google-charts-sample
> npm start

(省略)
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

로컬 열기 Angular의 디폴트의 화면 표시가 가능하면 성공입니다.

angular-google-charts의 install

> npm install angular-google-charts

app.module.ts

import { GoogleChartsModule } from 'angular-google-charts'; //追加
(中略)
  imports: [
    ...,
    GoogleChartsModule // 追加
  ],
(中略)

차트 그리기 구성 요소 만들기

이번에는 pie-chart를 만들겠습니다.

>  ng generate component pie-chart

pie-chart를 표시하기 위해 app.component의 html을 다음과 같이 다시 작성합니다.

app.component.html

<h1>{{ title }}</h1>

<app-pie-chart></app-pie-chart>

이어서 pie-chart의 html, ts를 편집해 갑니다.

pie-chart.component.html

 <google-chart [title]="title" [type]="type" [data]="data" [columns]="columnNames" [options]="options"></google-chart>

pie-chart.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.css']
})
export class PieChartComponent {

  title = 'How Much Pizza I Ate Last Night';
  type = 'PieChart';
  data = [
    ['Mushrooms', 3],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2],
    ['Green Pepper', 2]
  ];
  columnNames = ['Topping', 'Slices'];
  options = {
    'width': 400,
    'height': 300
  };

  constructor() { }

}

아래와 같은 화면표시가 되면 성공입니다.

요약

angular-google-charts 덕분에 소요 시간 1시간도 걸리지 않고 그래프를 만들 수 있었습니다.
타사 라이브러리이므로 제품용으로는 적합하지 않을 수 있지만,
개인 개발용으로는 충분하다고 느꼈습니다.

끝까지 읽어 주셔서 감사합니다!

참고

angular-google-charts
Google Charts
@Statham 자바스크립트 차트 라이브러리 데모 요약