Angular 차트 애니메이션
애니메이션을 사용하면 새 데이터 소스를 로드할 때 시리즈를 쉽게 만들 수 있습니다. 사용 가능한 애니메이션은 관련된 시리즈 유형에 따라 다릅니다. 예를 들어 열 계열은 x축에서 상승하여 애니메이션되고, 선 계열은 y축 원점에서 그려 애니메이션됩니다.
Ignite UI for Angular에서 애니메이션은 비활성화되지만 isTransitionInEnabled
속성을 true로 설정하여 활성화할 수 있습니다. 거기에서 transitionInDuration
속성을 설정하여 애니메이션이 완료되는 데 걸리는 시간을 결정하고 transitionInMode
설정하여 발생하는 애니메이션 유형을 결정할 수 있습니다.
Angular 차트 애니메이션 예제
다음 예에서는 선형 차트 애니메이션이 기본값으로 설정된 경우 transitionInMode
- "자동." 이 예의 상단에 있는 드롭다운 및 슬라이더를 사용하면 transitionInMode
그리고 transitionInDuration
, 각각 지원되는 다양한 애니메이션이 다양한 속도에서 어떻게 보이는지 확인할 수 있습니다.
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxCategoryChartModule, IgxLegendModule } from "igniteui-angular-charts";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxCategoryChartModule,
IgxLegendModule
],
providers: [],
schemas: []
})
export class AppModule {}
ts
import { ChangeDetectionStrategy, Component, ViewChild } from "@angular/core";
import { IgxCategoryChartComponent } from "igniteui-angular-charts";
@Component({
standalone: false,
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent {
public transitionInMode: string = "Auto";
public transitionInInterval: string = "1000";
public data: any[];
@ViewChild("chart", { static: true })
public chart: IgxCategoryChartComponent;
constructor() {
this.data = this.generateData();
}
public onChangeAmountClicked() {
this.data = this.generateData();
}
public OnTransitionIntervalChange(e: any) {
this.transitionInInterval = e.target.value;
}
private generateData(): any[] {
const data: any[] = [
{ Year: "2009", Europe: 31, China: 21, USA: 19 },
{ Year: "2010", Europe: 43, China: 26, USA: 24 },
{ Year: "2011", Europe: 66, China: 29, USA: 28 },
{ Year: "2012", Europe: 69, China: 32, USA: 26 },
{ Year: "2013", Europe: 58, China: 47, USA: 38 },
{ Year: "2014", Europe: 40, China: 46, USA: 31 },
{ Year: "2015", Europe: 78, China: 50, USA: 19 },
{ Year: "2016", Europe: 13, China: 90, USA: 52 },
{ Year: "2017", Europe: 78, China: 132, USA: 50 },
{ Year: "2018", Europe: 40, China: 134, USA: 34 },
{ Year: "2019", Europe: 80, China: 96, USA: 38 }
];
return data;
}
}
ts
<div class="container vertical">
<div class="options horizontal">
<label class="options-label">Transition Type: </label>
<select [(ngModel)]="transitionInMode">
<option>AccordionFromBottom</option>
<option>AccordionFromCategoryAxisMaximum</option>
<option>AccordionFromCategoryAxisMinimum</option>
<option>AccordionFromLeft</option>
<option>AccordionFromRight</option>
<option>AccordionFromTop</option>
<option>AccordionFromValueAxisMaximum</option>
<option>AccordionFromValueAxisMinimum</option>
<option>Expand</option>
<option>FromZero</option>
<option>SweepFromBottom</option>
<option>SweepFromCategoryAxisMaximum</option>
<option>SweepFromCategoryAxisMinimum</option>
<option>SweepFromCenter</option>
<option>SweepFromLeft</option>
<option>SweepFromRight</option>
<option>SweepFromTop</option>
<option>SweepFromValueAxisMaximum</option>
<option>SweepFromValueAxisMinimum</option>
<option>Auto</option>
</select>
<button (click)="onChangeAmountClicked()">Reload Chart</button>
<input class="options-slider" type="range" min="50" max="2000" step="50"
[value]="transitionInInterval" (change)="OnTransitionIntervalChange($event)" />
<label class="options-label">{{transitionInInterval}}ms</label>
</div>
<div class="container">
<igx-category-chart height="100%"
chartType="line"
[dataSource]="data"
isTransitionInEnabled="true"
[transitionInMode]="transitionInMode"
[transitionInDuration]="transitionInInterval"
yAxisLabelExtent="40"
computedPlotAreaMarginMode="series"
#chart>
</igx-category-chart>
</div>
</div>
html
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
추가 리소스
다음 항목에서 관련 차트 기능에 대한 자세한 내용을 확인할 수 있습니다.
API 참조
다음은 위 섹션에서 언급된 API 멤버 목록입니다.