Morioh
Login
Duck Hwan

Duck Hwan

1 year ago

Angular에서 선 차트를 만드는 방법

이 자습서에서는 Angular 14 앱에서 선 차트를 만드는 방법을 배웁니다. 새 Angular 앱을 만드는 것으로 시작한 다음 차트 라이브러리를 설치합니다. 다음으로 꺾은선형 차트를 표시하는 구성 요소를 만듭니다. 마지막으로 꺾은선형 차트에 일부 데이터를 추가하고 스타일을 지정합니다.

Angular 14 애플리케이션에서 라인 차트를 만들려면 다음 단계를 따르세요.

  • 1단계: 새 Angular 앱 만들기
  • 2단계: Charts JS 라이브러리 설치
  • 3단계: App.Module.ts 파일에 코드 추가
  • 4단계: 보기 파일에 코드 추가
  • 5단계: line-chart.Component ts 파일에 코드 추가
  • 6단계: Angular Line Chart 앱 시작

1단계: 새 Angular 앱 만들기

먼저 터미널을 열고 다음 명령을 실행하여 각도 앱을 설치합니다.

ng new my-new-app

2단계: Charts JS 라이브러리 설치

그런 다음 각도 앱에서 라인 차트를 구현하기 위해 ng2-charts chart.js –save라는 NPM 패키지를 설치합니다. 따라서 터미널에서 다음 명령을 실행하여 패키지를 설치할 수 있습니다.

npm install --save bootstrap

npm install ng2-charts chart.js --save

그런 다음 angular.json 파일을 열고 다음 코드를 업데이트합니다.

"styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
]

3단계: Module.ts 파일에서 모듈 가져오기

이 단계에서는 src/app 디렉토리를 방문하여 app.module.ts 파일을 엽니다 . 그런 다음 app.module.ts 파일에 다음 줄을 추가합니다.

import { ChartsModule } from 'ng2-charts';
 
@NgModule({
  declarations: [...],
  imports: [
    ChartsModule
  ],
  providers: [...],
  bootstrap: [...]
})
 
export class AppModule { }

4단계: 보기 파일에 라인 차트 만들기

이 단계에서는 각도 앱에서 선형 차트를 만듭니다. 따라서 src/app/ 및 line-chart.component.html을 방문하여 다음 코드를 업데이트하십시오.

<div class="chart-wrapper">
    <canvas baseChart 
        [datasets]="lineChartData" 
        [labels]="lineChartLabels" 
        [options]="lineChartOptions"
        [colors]="lineChartColors" 
        [legend]="lineChartLegend" 
        [chartType]="lineChartType" 
        [plugins]="lineChartPlugins">
    </canvas>
</div>

5단계: line-chart.Component ts 파일에 코드 추가

이 단계에서는 src/app 디렉터리를 방문하여 line-chart.component.ts 를 엽니다 . 그런 다음 component.ts 파일에 다음 코드를 추가합니다.

import { Component, } from '@angular/core';
import { ChartDataSets, ChartOptions } from 'chart.js';
import { Color, Label } from 'ng2-charts';
 
@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.css']
})
 
export class LineChartComponent {
 
  lineChartData: ChartDataSets[] = [
    { data: [85, 72, 78, 75, 77, 75], label: 'Crude oil prices' },
  ];
 
  lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June'];
 
  lineChartOptions = {
    responsive: true,
  };
 
  lineChartColors: Color[] = [
    {
      borderColor: 'black',
      backgroundColor: 'rgba(255,255,0,0.28)',
    },
  ];
 
  lineChartLegend = true;
  lineChartPlugins = [];
  lineChartType = 'line';
   
}

6단계: Angular Line Chart 앱 시작

이 단계에서는 터미널에서 다음 명령을 실행하여 각도 선형 차트 앱을 시작합니다.

ng serve

이 단계별 튜토리얼을 통해 이제 Angular 14 애플리케이션에서 선형 차트를 만들 수 있습니다.

1.10 GEEK