ng2-charts와 함께 Angular에서 Chart.js를 사용하는 방법


소개

ng2-charts는 Chart.js를 Angular에 통합하기 위한 Angular 2+용 래퍼입니다.

이 자습서에서는 Chart.js 및 ng2-charts를 사용하여 Angular 애플리케이션에서 샘플 차트를 만듭니다.

전제 조건

이 자습서를 완료하려면 다음이 필요합니다.

  • Node.js를 로컬에 설치했습니다. Node.js를 설치하고 로컬 개발 환경을 만드는 방법에 따라 수행할 수 있습니다.
  • Angular 구성 요소 사용에 어느 정도 익숙하면 도움이 될 수 있습니다.

이 튜토리얼은 Node v14.13.1, npm v6.14.8, angular v10.1.6, chart.js v2.9.4 및 < 코드>ng2-차트 v2.4.2.

1단계 - 프로젝트 설정

@angular/cli를 사용하여 새 Angular 프로젝트를 만들 수 있습니다.

터미널 창에서 다음 명령을 사용합니다.

  1. npx @angular/cli new angular-chartjs-example --style=css --routing=false --skip-tests

이렇게 하면 스타일이 "CSS\("Sass\, Less\ 또는 "Stylus\와 반대)로 설정되고 라우팅이 없고 테스트를 건너뛰는 새 Angular 프로젝트가 구성됩니다.

새로 생성된 프로젝트 디렉토리로 이동합니다.

  1. cd angular-chartjs-example

프로젝트 폴더에서 다음 명령을 실행하여 chart.js를 설치합니다.

  1. npm install chart.js@2.9.4 ng2-charts@2.4.2

다음으로 코드 편집기에서 angular.json을 열고 Chart.min.js를 포함하도록 수정하여 Angular 애플리케이션에 chart.js를 추가합니다. :

{
  // ...
  "projects": {
    "angular-chartjs-example": {
      // ...
      "architect": {
        "build": {
          // ...
          "options": {
            // ...
            "scripts": [
              "node_modules/chart.js/dist/Chart.min.js"
            ],
            "allowedCommonJsDependencies": [
              "chart.js"
            ]
          },
          // ...
        },
      }
    }},
  // ...
}

참고: chart.jsallowedCommonJsDependencies에 추가하면 "CommonJS 또는 AMD 종속성이 최적화 bailouts를 유발할 수 있습니다.\ 경고가 방지됩니다.

그런 다음 코드 편집기에서 app.module.ts를 열고 ChartsModule을 가져오도록 수정합니다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartsModule } from 'ng2-charts';

import { AppComponent } from './app.component';

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

이 스캐폴딩이 제자리에 설정되면 차트 구성 요소에 대한 작업을 시작할 수 있습니다.

2단계 - 차트 구성 요소 만들기

몇 가지 옵션을 사용하여 4개월 동안 3개의 다른 계정과 연결된 값을 플롯하기 위한 입력으로 전달하는 예제부터 시작하겠습니다.

ng2-charts는 HTML canvas 요소에 적용할 수 있는 baseChart 지시문을 제공합니다.

코드 편집기에서 app.component.html을 열고 콘텐츠를 다음 코드 줄로 바꿉니다.

<div style="width: 40%;">
  <canvas
    baseChart
  >
  </canvas>
</div>

그런 다음 chartTypelegend를 전달하도록 캔버스를 수정합니다.

<div style="width: 40%;">
  <canvas
    ...
    [chartType]="'line'"
    [legend]="true"
  >
  </canvas>
</div>

  • chartType: 차트의 기본 유형을 설정합니다. 값은 pie, doughnut, bar, line, polarArea, radar 또는 horizontalBar.
  • 범례: 차트 위에 범례를 표시할지 여부에 대한 부울입니다.

그런 다음 데이터 세트를 전달하도록 캔버스를 수정합니다.

<div style="width: 40%;">
  <canvas
    ...
    [datasets]="chartData"
  >
  </canvas>
</div>

다음으로 코드 편집기에서 app.component.ts를 열어 템플릿에서 참조한 배열을 정의합니다.

// ...
export class AppComponent {
  // ...

  chartData = [
    {
      data: [330, 600, 260, 700],
      label: 'Account A'
    },
    {
      data: [120, 455, 100, 340],
      label: 'Account B'
    },
    {
      data: [45, 67, 800, 500],
      label: 'Account C'
    }
  ];
}

  • datasets: 이것은 각 데이터 세트에 대한 데이터 배열과 레이블을 포함하는 객체의 배열이어야 합니다.
  • data: 또는 차트가 단순하고 하나의 데이터 세트만 있는 경우 datasets 대신 data를 사용할 수 있습니다. 데이터 포인트 배열에서.

이제 app.component.html을 다시 방문하여 레이블을 전달하도록 캔버스를 수정합니다.

<div style="width: 40%;">
  <canvas
    ...
    [labels]="chartLabels"
  >
  </canvas>
</div>

그런 다음 코드 편집기에서 app.component.ts를 다시 열어 템플릿에서 참조한 배열을 정의합니다.

// ...
export class AppComponent {
  // ...

  chartLabels = [
    'January',
    'February',
    'March',
    'April'
  ];
}

  • labels: X축의 레이블 배열입니다.

이제 app.component.html을 다시 방문하고 캔버스를 수정하여 options를 전달합니다.

<div style="width: 40%;">
  <canvas
    ...
    [options]="chartOptions"
  >
  </canvas>
</div>

그런 다음 코드 편집기에서 app.component.ts를 다시 열어 템플릿에서 참조한 개체를 정의합니다.

// ...
export class AppComponent {
  // ...

  chartOptions = {
    responsive: true
  };
}

  • options: 차트에 대한 옵션을 포함하는 개체입니다. 사용 가능한 옵션에 대한 자세한 내용은 공식 Chart.js 문서를 참조하세요.

애플리케이션을 다시 컴파일합니다.

  1. npm start

웹 브라우저(일반적으로 localhost:4200)에서 애플리케이션을 방문하면 계정 A, 계정 B 에 대한 데이터가 표시된 차트를 볼 수 있습니다. 및 계정 C4월, 2월, 3월, 4월:

공식 문서에서 다루는 Chart.js에 사용할 수 있는 추가 속성 및 옵션이 있습니다.

3단계 - chartClick 및 chartHover 처리

두 개의 이벤트 chartClickchartHover가 생성되며 차트와 상호 작용하는 사용자에 반응하는 방법을 제공합니다. 현재 활성화된 포인트와 레이블은 내보낸 이벤트 데이터의 일부로 반환됩니다.

이것들을 캔버스에 추가하는 예제를 만들어 봅시다.

app.component.html을 열고 chartHoverchartClick을 추가합니다.

<div style="width: 40%;">
  <canvas
    ...
    (chartHover)="onChartHover(($event)"
    (chartClick)="onChartClick(($event)"
  >
  </canvas>
</div>

app.component.ts를 열고 템플릿에서 참조한 사용자 지정 함수를 추가합니다.

// ...
export class AppComponent {
  // ...

  onChartHover = ($event: any) => {
    window.console.log('onChartHover', $event);
  };

  onChartClick = ($event: any) => {
    window.console.log('onChartClick', $event);
  };
}

애플리케이션을 다시 컴파일하면 개발자 도구에 로그인된 onChartHoveronChartClick이 관찰됩니다.

4단계 - 동적으로 데이터 세트 업데이트

Chart.js 사용의 하이라이트 중 하나는 백엔드 또는 사용자 입력에서 받은 데이터를 동적으로 업데이트하거나 응답하는 기능입니다.

4개월에 걸쳐 표시된 3개의 계정 값으로 이전 예를 계속 구축하고 5월에 대한 새 데이터 포인트를 추가해 보겠습니다.

app.component.ts를 열고 사용자 지정 함수를 정의했습니다.

// ...
export class AppComponent {
  // ...

  newDataPoint(dataArr = [100, 100, 100], label) {
    this.chartData.forEach((dataset, index) => {
      this.chartData[index] = Object.assign({}, this.chartData[index], {
        data: [...this.chartData[index].data, dataArr[index]]
      });
    });

    this.chartLabels = [...this.chartLabels, label];
  }
}

newDataPoint()에 배열이 전달되지 않으면 [100, 100, 100]이 기본값으로 제공됩니다.

데이터 세트 배열에서 수행되는 변형도 없습니다. Object.assign은 새 데이터와 함께 이전 데이터를 포함하는 새 객체를 반환하는 데 사용됩니다.

그런 다음 app.component.html을 열고 canvas 뒤의 버튼에서 사용자 정의 함수를 사용합니다.

<div style="width: 40%;">
  ...

  <button (click)="newDataPoint([900, 50, 300], 'May')">
    Add data point
  </button>
</div>

애플리케이션을 다시 컴파일한 후 월에 대한 계정 A, 계정 B, 계정 C의 값이 차트에 표시되는 것을 관찰할 수 있습니다. 데이터 포인트 추가 버튼과 상호 작용할 때 >May.

결론

이 자습서에서는 Chart.js 및 ng2-charts를 사용하여 Angular 애플리케이션에서 샘플 차트를 만들었습니다.

이러한 라이브러리를 함께 사용하면 현대적이고 역동적인 방식으로 데이터를 표시할 수 있습니다.

Angular에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 Angular 주제 페이지를 확인하십시오.