ng-bootstrap 구성 요소에 대화형 각도 차트 추가

이 Angular 14 차트 자습서에서는 ng-bootstrap 탭 내에 데이터를 표시하기 위해 차트를 추가하는 방법을 배웁니다. 차트는 기본적으로 데이터의 그래픽 표현이며 큰 데이터나 정보를 시각적으로 이해하기 쉬운 방식으로 요약합니다. 웹디자이너/개발자라면 언젠가는 대시보드 작업을 하게 될 것입니다. 대시보드는 차트를 통해 많은 정보를 제공합니다. 이 자습서에서는 CanvasJS chart(탭)에 ng-bootstrap navs을 추가하는 방법을 보여줍니다. Angular 14에서 앱을 빌드했지만 CanvasJS 및 ng-bootstrap은 여러 버전의 각도에서 작동합니다. CanvasJS는 웹 디자이너 및 개발자를 위한 강력한 차트 라이브러리입니다. 차트 구성 요소는 30개 이상의 차트 유형을 지원하고 반응이 빠르고 대화형이며 쉽게 사용자 정의할 수 있으며 웹 페이지/응용 프로그램 디자인과 일치할 수 있는 아름다운 차트를 만들 수 있습니다.

참고: 이 튜토리얼은 작성 당시 최신 버전을 사용하여 작성되었습니다.
• 각도: v14.0.0
• Ng 부트스트랩: v13.0.0
• CanvasJS 차트: v3.6.7

Angular 앱 생성 및 ng-bootstrap 추가

1. Angular 프로젝트 생성

Angular CLI 을 사용하여 새로운 각도 프로젝트를 만듭니다. 이미 앱이 있는 경우 이 단계를 무시하십시오.

ng new angular-bootstrap-charts

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

2. 프로젝트에 ng-bootstrap 및 CanvasJS 각도 차트 구성 요소 추가

각도 프로젝트가 생성되면 프로젝트에 ng-bootstrap 및 CanvasJS 각도 차트를 추가합니다. ng-bootstrap은 Angular CLI 방식을 사용하거나 수동으로 'npm install package-name'을 수행하여 추가할 수 있습니다. 다음은 두 접근 방식의 구문입니다.

/* Angular CLI Way */
ng add @ng-bootstrap/ng-bootstrap

/* Manual Way */
npm install @ng-bootstrap/ng-bootstrap --save

그리고 CanvasJS 각도 차트는 official site에서 다운로드할 수 있습니다(npm 패키지는 공식 패키지가 아님) 자산 폴더에 저장하여 프로젝트로 가져올 수 있습니다.

패키지가 설치되면 모듈을 가져와서 등록해 봅시다. app.module.ts 파일을 열고 모듈을 등록합니다.

/* app.module.ts */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

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

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

부트스트랩 탐색(탭) 구성 요소 추가

간단하게 하기 위해 앱에 bootstrap tabs을 추가해 보겠습니다. 모달, 아코디언 등과 같은 부트스트랩 구성 요소를 추가하는 것을 고려할 수 있습니다.

1. 부트스트랩 탐색 추가

<ul ngbNav #nav="ngbNav" class="nav-tabs">
  <li [ngbNavItem]="1">
    <a ngbNavLink>Line Chart</a>
    <ng-template ngbNavContent>
    </ng-template>
  </li>
  .
  .
  .
</ul>

<div [ngbNavOutlet]="nav" class="mt-2"></div>

2. 탐색에 차트 추가

<ul ngbNav #nav="ngbNav" class="nav-tabs">
  <li [ngbNavItem]="1">
    <a ngbNavLink>Line Chart</a>
    <ng-template ngbNavContent>
      <canvasjs-chart
      [options]="lineChartOptions"
      [styles]="{ width: '100%', height: '360px' }"
      ></canvasjs-chart>
    </ng-template>
  </li>
  .
  .
  .
</ul>

<div [ngbNavOutlet]="nav" class="mt-2"></div>

3. 활성 탭에서만 차트 표시

탭에서 활성 탭의 콘텐츠는 표시되고 콘텐츠 비활성 탭은 숨겨집니다. 따라서 비활성 탭의 차트가 렌더링되지 않도록 하려면 조건부 렌더링이 필요합니다. 이렇게 하려면 탭이 표시되거나 숨겨질 때 계속 토글되는 플래그 유지를 사용할 수 있습니다. 플래그를 기반으로 차트를 렌더링할 수 있습니다.

<ul ngbNav #nav="ngbNav" class="nav-tabs" (shown)="navChangeEvent($event)" (hidden)="navHiddenEvent($event)">
  <li [ngbNavItem]="1">
    <a ngbNavLink>Line Chart</a>
    <ng-template ngbNavContent>
      <canvasjs-chart
      *ngIf="showChart"
      [options]="lineChartOptions"
      (chartInstance)="getChartInstance($event)"
      [styles]="{ width: '100%', height: '360px' }"
      ></canvasjs-chart>
    </ng-template>
  </li>
  .
  .
  .
</ul>

이 기사를 작성할 당시 CanvasJS v3.6.7은 Angular 14 프로젝트에서 사용되었습니다. 그러나 CanvasJS 차트는 모든 버전의 Angular에서 작동합니다. CanvasJS 각도 차트 또는 CanvasJS API를 처음 사용하거나 복습이 필요한 경우 CanvasJS Charts documentation을 읽어 보시기 바랍니다. 그리고 ng-bootstrap에 대해서는 this documentation page 을 확인하십시오.