Angular 버전 14가 출시되면서 독립형 구성 요소가 도입 되었고 NgModule 이 선택 사항이 되었습니다. 코드베이스를 구축하고 구조화하는 새로운 방법을 촉진합니다.

이 기사에서는 차트를 만들고 공식 Highcharts Angular 래퍼 와 함께 각도 독립형 구성 요소를 사용하고 통합하는 방법을 살펴봅니다 .

시작합시다

최신 버전의 Angular로 프로젝트를 생성하려면 우선 다음 명령을 사용하여 angular-cli 패키지를 업데이트합니다.
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

이 프로젝트에서는 다음을 사용합니다.

• 각도 14.
• 하이차트 V10.1.0.
• 하이차트-앵귤러 .

• 노드: 14.17.0
• npm 8.3.1
• 각도 CLI: 14.0.2.

1. 이러한 유형의 환경에 익숙하지 않은 경우 공식 Angular 설명서에서 로컬 환경 작업 공간 을 설정하는 방법과 독립 실행형 구성 요소 에 대해 자세히 설명합니다 .

2. highcharts-angularHighcharts 라이브러리를 설치하려면 다음 명령을 실행하십시오 npm install highcharts-angular --save.

3. 패키지를 가져오려면 app.module.ts파일로 이동하여 패키지에서 모듈 HighchartsChartModule을 가져옵니다 highcharts-angular.

4. Highcharts 차트를 작성하려면 Highcharts를 설치하십시오. npm install highcharts --save.

5. app.compoent.ts독립형 구성 요소로 선언하고 HighchartsChartModuleNgModule(선택 사항) 대신 내부 가져오기 배열을 가져옵니다. 경로와 같은 애플리케이션 수준 종속성, main.ts의 종속성 주입 구성 및 구성 요소 수준 app.component.ts또는 기타 구성 요소.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [HighchartsChartModule],
})

import './polyfills';
import {
  bootstrapApplication
} from '@angular/platform-browser';
import {
  AppComponent
} from './app/app.component';

bootstrapApplication(AppComponent);

아래 의견에 귀하의 생각과 질문을 자유롭게 공유하십시오.

블로그를 확인하고 Highcharts를 사용하는 최고의 팁에 대해 자세히 알아보세요.

저자: 하룬 안사리

Haroon Ansari는 컴퓨터 과학 엔지니어입니다. 그는 javascript, Angular 및 .NET에서 다년간의 경험을 가지고 있습니다. 그는 데이터 시각화를 좋아하고 오픈 소스 프로젝트에 기여합니다. Twitter @haroonansari1 및 LinkedIn 에서 Haroon을 팔로우하세요.