JavaScript Zoombar용 Ignite UI 사용하여 빠르게 확대/축소

프로젝트 설정

​여기를 클릭 하면 이 강의의 시작 프로젝트를 다운로드할 수 있습니다. (여기를 클릭하여 최종 프로젝트를 다운로드할 수도 있습니다.)

프로젝트를 다운로드한 후 디렉터리로 이동하여 아래 명령을 실행합니다.

• npm install
• npm start

npm install 명령을 실행하여 모든 종속성을 설치하고 npm start 명령을 실행하여 Angular 애플리케이션을 실행합니다. 프로젝트가 올바르게 설정되면 아래 이미지와 같이 Angular 애플리케이션이 실행됩니다. 애플리케이션 실행 중 오류가 발생하면 npm start 명령을 중지하고 다시 실행하세요.

1단계 구성요소 가져오기 및 선언

JavaScript Angular 구성 요소용 Ignite UI 사용하려면 해당 구성 요소를 모듈에서 가져와 선언해야 합니다. 예를 들어 Angular 애플리케이션에서 igGrid 구성 요소를 사용하려면 애플리케이션 모듈에서 IgGridComponent를 가져오고 선언합니다.

금융 앱 폴더로 이동한 다음 앱 폴더로 이동하세요. app.module.ts 파일을 열고 기존 import 문 바로 뒤에 아래에 표시된 import 문을 추가합니다.

import { IgZoombarComponent } from 'igniteui-angular2';

필수 구성 요소를 가져온 후 애플리케이션 모듈에서 이를 선언해야 합니다. AppModule의 선언 배열에 IgZoombarComponent를 추가합니다. 아래와 같이 app.module.ts에서 @NgModule 데코레이터를 수정합니다.

@NgModule({ imports: [BrowserModule, HttpModule], declarations: [AppComponent, IgDataChartComponent, InfoComponent, IndicatorChartComponent, VolumeChartComponent, IgGridComponent, GridComponent, PriceChartComponent, IgZoombarComponent, ], providers: [AppService], bootstrap: [AppComponent] })

AppModule 모듈의 선언 배열에 IgZoombarComponent를 추가했습니다. 공급자와 같은 기타 추가된 구성 요소 및 기타 속성은 후속 강의에서 검토됩니다.

Step 2 Add Zoombar

JavaScript Zoombar용 Ignite UI 사용하려면 먼저 Zoombar 구성 요소를 추가해야 합니다. app\charts 폴더에서 Volumechart.comComponent.html 파일을 열고 아래와 같이 ig-data-chart 컨트롤 바로 뒤에 ig-zoombar 컨트롤을 추가합니다.

<ig-zoombar [(options)]="zoombarOptions" widgetId="zoombar"></ig-zoombar>

3단계 줌바 옵션 속성 추가

줌바 옵션에서는 줌바에 차트를 첨부할 수 있습니다. Zoombar 옵션을 구성하려면 VolumeChartComponent 클래스에 속성을 만듭니다. app\charts 폴더에서 Volumechart.comComponent.ts 파일을 열고 생성자 바로 위에 아래 나열된 속성을 추가합니다.

private zoombarOptions: IgZoombar;

4단계 줌바에 차트 첨부

Zoombar에 차트 위젯을 추가하려면 Zoombar 옵션의 대상 속성값을 차트 위젯의 ID로 설정해야 합니다. app\charts 폴더에서 Volumechart.comComponent.ts 파일을 열고 ngOnInit() 함수의 this.chartOptions 할당 바로 뒤에 아래 코드를 추가합니다.

this.zoombarOptions = {
  target: "#volumechart"
};

Step 5 Run the Application

해당 애플리케이션으로 이동한 후 페이지 하단으로 스크롤하여 아래 이미지와 같이 추가된 Zoombar를 찾으세요.

차트는 확대/축소 막대에 복제되었으며 차트에 렌더링된 데이터 포인트 수에 관계없이 수평 스크롤 막대를 사용하여 차트 내에서 빠르고 원활하게 확대 및 축소할 수 있습니다.