Angular에서 사용할 최고의 Google 차트 5가지

기사는 원래 내 블로그에 게시되었습니다. StackBlogger-5 Best Google Charts For Angular

차트는 다이어그램 등의 형태로 정보를 그래픽으로 표현한 것입니다. Google은 애플리케이션에서 사용할 수 있는 다양한 무료 차트를 제공합니다. 사용이 간편하고 데이터가 포함된 다이어그램을 구성하는 강력한 도구입니다. 이 기사에서는 Angular 응용 프로그램에서 일부 Google 차트를 사용하는 방법에 대해 설명합니다.

각도 Google 차트

Angular Google Chart는 Angular로 구축된 Google Charts 프로젝트의 래퍼입니다. npm을 이용하여 설치하여 Angular 어플리케이션에서 사용할 수 있는 패키지입니다.

Angular에서 사용할 최고의 Google 차트 5개

꺾은선형 차트 – 정보가 데이터 시리즈 형식으로 표시되는 차트

원형 차트 – 정보를 표시하기 위해 여러 부분으로 나누어진 원형 차트

히스토그램 차트 – 기본적으로 가운데가 잘린 영역이 있는 파이 차트입니다

.

게이지 차트 - 다이얼 차트라고도 하며 바늘을 사용하여 정보를 표시합니다

.

콤보 차트 – 두 개 이상의 선 또는 열을 조합하여 정보를 구성합니다.
Angular 애플리케이션에서 각 차트를 구현해 봅시다.

Angular에 Google 차트 설치
먼저 Angular 애플리케이션에 Google 차트 라이브러리를 설치하여 다양한 차트를 그릴 수 있습니다.

참고: 이 예제에서는 Angular 12를 사용하고 있습니다.

각도 Google 차트 패키지를 설치하려면 아래 명령을 실행하십시오.

npm install angular-google-charts

GoogleChartsModule 가져오기

다음은 GoogleChartsModule 파일에서 app.module.ts 모듈을 가져오는 것입니다.

import { GoogleChartsModule } from 'angular-google-charts';

@NgModule({
  ...
  imports: [
    ...
    GoogleChartsModule,
    ...
  ],
  ...
})
export class AppModule {}

서비스 파일 생성

app.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from '@angular/common/http';
import { Observable } from "rxjs";

@Injectable()
export class AppService {
    constructor(private httpClient: HttpClient) {
    }

    getChartData(): Observable<Array<Array<string | number>>> {
        return this.httpClient.get<Array<Array<string | number>>>(`http://localhost:3000/chartData`);
    }
}

가짜 JSON API를 생성하기 위해 json-server를 사용하고 있습니다.
db.json 파일

{
    "chartData": [
        [
            "London",
            8136000
        ],
        [
            "New York",
            8538000
        ],
        [
            "Paris",
            2244000
        ],
        [
            "Berlin",
            3470000
        ],
        [
            "Kairo",
            19500000
        ]
    ]
}

명령을 사용하여 json 서버를 설치하고 실행합니다.

npm install -g json-server

json-server --watch db.json

이제 차트를 그릴 준비가 되었습니다. 차트를 하나씩 그려 봅시다.

라인 차트

페이지에 차트를 그릴 시간입니다. 가짜 json API를 사용했습니다(실제 API를 사용하여 플롯할 수 있음).

import { Component, OnInit } from '@angular/core';
import { ChartType } from "angular-google-charts";
import { AppService } from './app.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'google-charts';
  myType = ChartType.LineChart;
  chartData: Array<Array<string | number>> = [];

  constructor(private appService: AppService) {
  }

  ngOnInit() {
    this.getChartData();
  }

  private getChartData() {
    this.appService.getChartData().subscribe(data => {
      this.chartData = data;
    })
  }
}

템플릿 코드 추가

템플릿 파일에 아래 코드를 추가합니다. 여기에서 Type 값을 찾으십시오: Chart Types

<google-chart [title]="'Some Title'" [type]="myType" [data]="chartData">
</google-chart>

파일을 저장하고 브라우저 열기를 실행합니다. 페이지에서 다음 차트를 확인할 수 있습니다.

파이 차트

구성 요소의 Type를 ChartType.PieChart로 변경

myType = ChartType.PieChart;

히스토그램 차트

chartType를 Historgram로 변경

myType = ChartType.Histogram;

게이지 차트

chartType를 Gauge로 변경

myType = ChartType.Gauge;

콤보 차트

chartType를 ComboChart로 변경

myType = ChartType.ComboChart;

참고: 콤보 및 라인 차트는 비슷하게 보입니다. 유일한 차이점은 콤보 차트에 여러 차트가 있을 수 있다는 것입니다. 현재로서는 Combo에서 하나의 차트만 사용했습니다. 여러 데이터의 배열을 전달할 수 있습니다.

Google Charts 사용 중 일반적인 오류

Type '' is not assignable to type 'ChartType'.


이 오류의 해결책은 문자열 차트 유형을 제공하지 않는 것입니다. ChartType Enum에서 type 값을 가져온 다음 [type]에 전달합니다.

// import the Enum
import { ChartType } from "angular-google-charts";

// get chart type
myType = ChartType.LineChart;

템플릿에 myType 변수를 전달합니다.

기사는 원래 내 블로그에 게시되었습니다. StackBlogger-5 Best Google Charts For Angular

결론

이 기사에서는 다양한 Google 차트를 Angular 애플리케이션에 통합하는 방법에 대해 설명합니다. Angular 애플리케이션을 최적화하려면 다음 문서를 확인하는 것이 좋습니다. 5 Best Ways To Optimize Angular For Scaling

또한 읽기:
Real World Examples of 5 Common Observable Operators
5 Great SEO Ideas To Improve Angular Website Ranking
Angular Material 12 Table, Sorting, Searching & Pagination
RxJS forkJoin: Definition and Real World Uses