Angular에서 HTTPClient 모듈을 사용하여 API의 데이터로 차트 만들기

실시간 각도 응용 프로그램에서 데이터를 얻기 위해 일부 API 또는 서비스와 상호 작용하는 경우가 많습니다. 이러한 데이터는 통계적이거나 사용자와 관련된 것일 수 있습니다. 국가에 대한 통계를 표시하기 위해 애플리케이션을 구축하는 경우 일부 타사 API 또는 서비스를 사용하여 데이터를 가져올 수 있습니다. 그리고 이 데이터는 표 형식이나 그래프로 표시할 수 있습니다. 차트라고도 하는 그래프는 데이터를 쉽게 이해하고 분석할 수 있도록 그래픽으로 표현한 것입니다. 예를 들어, 차트에서 도시의 실시간 날씨 통계를 관찰하고 있다면 사람들에게 악천후에 대해 경고하고 가능한 한 빨리 안전한 지역으로 안내할 수 있습니다. 이 기사에서는 데이터를 더 잘 이해하고 해석할 수 있도록 Angular에서 API에서 데이터를 가져오고 차트에 표시하는 방법을 안내합니다.

애플리케이션에 사용되는 모듈 및 구성 요소

Angular는 API를 처리하기 위한 모듈HTTPClient과 데이터를 처리하기 위한 간단한 메서드를 제공합니다. HTTPClient의 get 메서드와 subscribe 메서드를 사용하여 API에서 데이터를 가져옵니다. 데이터를 차트 형식으로 표시하기 위해 CanvasJS angular chart component을 사용합니다. CanvasJS는 확대/축소/패닝, 이미지 형식으로 차트 내보내기, 동적으로 데이터 업데이트 등과 같은 다양한 기타 기능과 함께 차트의 모양과 느낌을 사용자 지정하기 위한 간단한 API를 제공합니다.

참고: 이 기사에서 사용된 API는 2013-2019 기간 동안 미국 인구에 대한 정보를 제공하는 datausa.io에서 가져온 것입니다.

전제 조건

Basic Angular App

CanvasJS Angular Chart Component

단계별 지침

1. app.module.ts에 HTTPClient 모듈 및 차트 구성 요소를 등록합니다.

import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import * as CanvasJSAngularChart from './assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;

@NgModule({
    imports: [BrowserModule, HttpClientModule],
    declarations: [AppComponent, CanvasJSChart],
    bootstrap: [AppComponent],
})
export class AppModule {}

2. 모듈을 등록한 후 app.component.ts에서 HttpClient를 가져오고 차트에 대한 옵션을 만듭니다.

/*app.component.ts*/
import { HttpClient } from '@angular/common/http';
.
export class AppComponent {
    chart: any;
    constructor(private http: HttpClient) {}

    chartOptions = {
    animationEnabled: true,
    theme: 'light2',
    title: {
        text: 'Chart with Data from API',
    },
    data: [
        {
        dataPoints: [],
        },
    ],
    };
    getChartInstance(chart: object) {
    this.chart = chart;
    }
}

3. 템플릿 html 파일(app.component.html)을 업데이트하여 차트를 추가합니다.

/*app.component.html*/
<canvasjs-chart [options]="chartOptions" (chartInstance)="getChartInstance($event)"[styles]="{ width: '100%', 
height: '360px' }"></canvasjs-chart>

4. 처음에 차트에 나타낼 데이터가 없으므로 dataPoints 변수를 빈 배열로 초기화합니다. 나중에 API에서 가져온 데이터로 업데이트할 수 있습니다.

export class AppComponent {
  dataPoints: any = [];
  .
  chartOptions = {
  .
  .
  dataPoints: this.dataPoints
  .
  .
  }
}

5. get 메소드를 사용하여 API에서 데이터를 가져오겠습니다. API가 JSON 형식으로 데이터를 반환하므로 responseType을 JSON으로 설정합니다.

this.http.get('https://datausa.io/api/data?drilldowns=Nation&measures=Population',{ responseType: 'json'}).subscribe((response: any) => {
});

6. API 요청에서 받은 데이터를 전달하기 전에 CanvasJS {label: String, y: Number}에서 허용하는 형식으로 데이터를 구문 분석해야 합니다.

responseData.data.forEach((populationData: any) => {
    this.dataPoints.push({
      label: populationData.Year,
      y: populationData.Population,
    });
  });
this.chart.render();

비올라!! HTTPClient 모듈을 사용하여 API에서 데이터를 가져오고 차트에 데이터를 표시했습니다.

사용자 정의

CanvasJS 각도 차트 구성 요소는 시각화를 개선하고 웹 사이트 템플릿/테마/사용 사례에 맞게 만드는 많은 사용자 지정 옵션과 함께 제공됩니다. 예를 들어, API는 역순으로 데이터를 반환합니다. 접미사 labelFormatter . 다음은 동일하지 않은 코드 스니펫입니다. 라이브러리에서 사용할 수 있는 추가 사용자 지정 옵션은 this 페이지를 참조할 수 있습니다.

axisX: {
    reversed: true
},
axisY: {
    title: 'Population Count (in Millions)',
    labelFormatter: function (e: any) {
        return e.value / 1000000 + 'M';
    }
}

개선 사항

동일한 개념을 더욱 강화하여 JSON 데이터로 완전한 대시보드를 구축할 수 있습니다.