Angular 차트 성능

Angular 차트는 수백만 개의 데이터 포인트를 렌더링하고 몇 밀리초마다 업데이트하는 고성능을 위해 최적화되었습니다. 그러나 차트 성능에 영향을 미치는 여러 차트 기능이 있으며 애플리케이션에서 성능을 최적화할 때 고려해야 합니다. 이 주제에서는 Angular 차트가 애플리케이션에서 가능한 한 빨리 작동하도록 안내합니다.

60 以上のリアルタイム Angular チャート を使用して、何百万ものデータ ポイントを描画し、視覚化を構築します。これは、あらゆるアプリケーション シナリオに対応する最も広範なチャート ライブラリです。

無料で試してみる

Angular 차트 성능 예

다음 예제는 Angular 차트의 두 가지 고성능 시나리오를 보여줍니다.

고주파 Angular 차트

High-Frequency 시나리오에서 Angular Charts는 실시간으로 또는 지정된 밀리초 간격으로 업데이트되는 데이터 항목을 렌더링할 수 있습니다. 터치 장치에서 차트와 상호 작용하더라도 지연, 화면 깜박임 및 시각적 지연이 발생하지 않습니다. 다음 샘플은 High-Frequency 시나리오에서 IgxCategoryChartComponent를 보여줍니다.

EXAMPLE

MODULES

TS

HTML

SCSS

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";
import { IgxSliderModule } from "igniteui-angular";


@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxCategoryChartModule,
    IgxLegendModule,
    IgxSliderModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, NgZone, OnDestroy, 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 implements AfterViewInit, OnDestroy {

    public data: any[];

    @ViewChild("chart", { static: true })
    public chart: IgxCategoryChartComponent;

    private currValue: number = 15;
    private currIndex: number = 0;

    private shouldTick: boolean = true;
    private _timerStatusText: string = "Stop";

    private _maxPoints: number = 5000;

    private _refreshInterval: number = 10;
    private _interval: number = -1;
    private _frames: number = 0;
    private _time: Date;

    constructor(private _zone: NgZone) {
        this.data = this.generateData();
    }

    public onChangeAmountClicked() {
        this.data = this.generateData();
    }

    public onTimerStartStopClick() {
        if (this.shouldTick) {
            this.shouldTick = false;
            this._timerStatusText = "Start";
        }
        else {
            this.shouldTick = true;
            this._timerStatusText = "Stop";
        }
    }

    public onRefreshFrequencyChanged(e: any) {
        let num: number = parseInt(e.target.value, 10);

        if (isNaN(num)) {
            num = 10;
        }
        if (num < 10) {
            num = 10;
        }
        if (num > 1000) {
            num = 1000;
        }
        this._refreshInterval = num;
        this.setupInterval();
    }

    public onMaxPointsChanged(e: any) {
        let num: number = parseInt(e.target.value, 10);

        if (isNaN(num)) {
            num = 1000;
        }
        if (num < 1000) {
            num = 1000;
        }
        if (num > 1000000) {
            num = 1000000;
        }
        this._maxPoints = num;
    }

    public get maxPointsText(): string {
        return this.toShortString(this._maxPoints);
    }

    public get maxPoints(): number {
        return this._maxPoints;
    }

    @Input()
    public set maxPoints(v: number) {
        this._maxPoints = v;
    }

    public get refreshInterval(): number {
        return this._refreshInterval;
    }

    @Input()
    public set refreshInterval(v: number) {
        this._refreshInterval = v;
        this.setupInterval();
    }

    public get refreshIntervalText(): string {
        return (this._refreshInterval / 1000).toFixed(3) + "s";
    }

    public get timerStatusText() {
        return this._timerStatusText;
    }

    @Input()
    public set timerStatusText(v: string) {
        this._timerStatusText = v;
    }

    public ngOnDestroy(): void {
        if (this._interval >= 0) {
            this._zone.runOutsideAngular(() => {
                window.clearInterval(this._interval);
            });
            this._interval = -1;
        }
    }

    public ngAfterViewInit(): void {
        this._time = new Date();
        this.setupInterval();
    }

    private setupInterval(): void {
        if (this._interval >= 0) {
            this._zone.runOutsideAngular(() => {
                window.clearInterval(this._interval);
            });
            this._interval = -1;
        }

        this._zone.runOutsideAngular(() => {
            this._interval = window.setInterval(() => this.tick(),
                this.refreshInterval);
        });
    }

    private generateData(): any[] {
        const data: any[] = [];
        for (this.currIndex = 0; this.currIndex < this.maxPoints; this.currIndex++) {
            this.currValue += Math.random() * 4.0 - 2.0;
            data.push({ Label: this.currIndex.toString(), Value: this.currValue });
        }
        return data;
    }


    private tick(): void {

        if (this.shouldTick) {

            this.currValue += Math.random() * 4.0 - 2.0;
            this.currIndex++;
            const newVal = { Label: this.currIndex.toString(), Value: this.currValue };

            const oldVal = this.data[0];
            this.data.push(newVal);
            this.chart.notifyInsertItem(this.data, this.data.length - 1, newVal);
            this.data.shift();
            this.chart.notifyRemoveItem(this.data, 0, oldVal);

            this._frames++;
            const currTime = new Date();
            const elapsed = (currTime.getTime() - this._time.getTime());
            if (elapsed > 5000) {
                const fps = this._frames / (elapsed / 1000.0);
                this._time = currTime;
                this._frames = 0;
            }
        }
    }

    private toShortString(largeValue: number): string {
        let roundValue: string;

        if (largeValue >= 1000000) {
            roundValue = (largeValue / 1000000).toFixed(1);
            return roundValue + "m";
        }
        if (largeValue >= 1000) {
            roundValue = (largeValue / 1000).toFixed(0);
            return roundValue + "k";
        }

        roundValue = largeValue.toFixed(0);
        return roundValue + "";
    }
}
tsコピー

<div class="container vertical">
    <div class="options horizontal">
        <button style="width: 5rem" (click)="onTimerStartStopClick()">{{timerStatusText}}</button>
        <label class="options-label">Refresh: </label>
        <label class="options-value">{{ refreshIntervalText }}</label>
        <input class="options-slider" type="range" min="10" max="1000" step="10"
        [value]="refreshInterval" (change)="onRefreshFrequencyChanged($event)"/>

        <button (click)="onChangeAmountClicked()" style="margin-left: 1rem;">Generate</button>
        <label class="options-label">Points: </label>
        <label class="options-value">{{maxPointsText}}</label>
        <input class="options-slider" type="range" min="1000" max="50000" step="100"
         [value]="maxPoints" (change)="onMaxPointsChanged($event)" />
    </div>

    <div class="container">
        <igx-category-chart height="100%"
            [dataSource]="data"
            yAxisLabelExtent="40"
            markerTypes="None"
            toolTipType="Default"
            xAxisEnhancedIntervalPreferMoreCategoryLabels="false"
            shouldAutoExpandMarginForInitialLabels="false"
            crosshairsDisplayMode="None"
            #chart>
        </igx-category-chart>
    </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

고용량 Angular 차트

대량 시나리오에서 Angular Charts는 100만 개의 데이터 포인트를 렌더링할 수 있으며, 최종 사용자가 확대/축소하거나 차트 콘텐츠를 탐색할 때 차트는 원활한 성능을 제공합니다. 다음 샘플은 대량 시나리오에서 IgxCategoryChartComponent를 보여줍니다.

EXAMPLE

MODULES

TS

HTML

SCSS

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";
import { IgxSliderModule } from "igniteui-angular";


@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxCategoryChartModule,
    IgxLegendModule,
    IgxSliderModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, NgZone, OnDestroy, ViewChild } from "@angular/core";
import { IgxAssigningCategoryStyleEventArgs } from "igniteui-angular-charts";
import { IgxCategoryChartComponent } from "igniteui-angular-charts";
import { IgxChartSeriesEventArgs } from "igniteui-angular-charts";
import { IgxHorizontalAnchoredCategorySeriesComponent } from "igniteui-angular-charts";

@Component({
    standalone: false,
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html"
})
export class AppComponent implements AfterViewInit, OnDestroy {
    @Input()
    public scalingRatio: number = 1;

    @ViewChild("chart", { static: true })
    public chart: IgxCategoryChartComponent;

    private currValue: number = 15;
    private currIndex: number = 0;

    private _maxPoints: number = 500000;

    private _refreshMilliseconds: number = 10;
    private _interval: number = -1;
    private _frames: number = 0;
    private _time: Date;
    private _assigningData: boolean = false;
    private _data: any[];

    constructor(private _zone: NgZone) {
        this._data = this.generateData();
    }

    public onGenerateDataClicked() {
        this._data = this.generateData();
    }

    public onAssignDataClicked() {
        this._time = new Date();
        this._assigningData = true;
        this.chart.dataSource = this._data;
    }

    public onMaxPointsChanged(e: any) {
        let num: number = parseInt(e.target.value, 10);
        if (isNaN(num)) {
            num = 5000;
        }
        if (num < 5000) {
            num = 5000;
        }
        if (num > 2000000) {
            num = 2000000;
        }
        this.maxPoints = num;
    }

    public get maxPointsText(): string {
        return this.toShortString(this._maxPoints);
    }

    public get maxPoints(): number {
        return this._maxPoints;
    }
    @Input()
    public set maxPoints(v: number) {
        this._maxPoints = v;
    }

    public ngOnDestroy(): void {
        if (this._interval >= 0) {
            this._zone.runOutsideAngular(() => {
            window.clearInterval(this._interval);
            });
            this._interval = -1;
        }
    }

    public ngAfterViewInit(): void {
        this.chart.seriesAdded.subscribe((args: { sender: any, args: IgxChartSeriesEventArgs }) => {
            const cat = args.args.series as IgxHorizontalAnchoredCategorySeriesComponent;
            cat.isCustomCategoryStyleAllowed = true;
            cat.assigningCategoryStyle.subscribe((event: { sender: any, args: IgxAssigningCategoryStyleEventArgs }) => {
                if (this._assigningData) {
                    this._assigningData = false;

                    this._zone.runOutsideAngular(() => {
                        window.setTimeout(() => {}, 0);
                    });
                }
            });
        });

        this.chart.seriesRemoved.subscribe((event: { sender: any, args: IgxChartSeriesEventArgs }) => {
            const cat = event.args.series as IgxHorizontalAnchoredCategorySeriesComponent;
            cat.isCustomCategoryStyleAllowed = false;
            cat.assigningCategoryStyle.unsubscribe();
        });

        this.chart.dataSource = this._data;
    }

    private generateData(): any[] {
        const data: any[] = [];
        for (this.currIndex = 0; this.currIndex <= this.maxPoints; this.currIndex++) {
            this.currValue += Math.random() * 4.0 - 2.0;
            const label = this.toShortString(this.currIndex);
            data.push({ Label: label, Value: this.currValue });
        }
        return data;
    }

    private toShortString(largeValue: number): string {
        let roundValue: number;

        if (largeValue >= 1000000) {
            roundValue = Math.round(largeValue / 100000) / 10;
            return roundValue + "m";
        }
        if (largeValue >= 1000) {
            roundValue = Math.round(largeValue / 100) / 10;
            return roundValue + "k";
        }

        roundValue = Math.round(largeValue);
        return roundValue + "";
    }
}
tsコピー

<div class="container vertical">
    <div class="options horizontal">
        <button (click)="onGenerateDataClicked()">Generate Data</button>
        <button (click)="onAssignDataClicked()">AssignData</button>

        <label class="options-label">Data amount: {{ maxPointsText }}</label>
        <input class="options-slider" type="range" id="slider" min="5000" max="2000000" step="1000" [value]="maxPoints"
            (input)="onMaxPointsChanged($event)"/>
    </div>
    <div class="container">
        <igx-category-chart height="100%" yAxisLabelExtent="40"
        markerTypes="None"
        toolTipType="Default"
        xAxisEnhancedIntervalPreferMoreCategoryLabels="false"
        shouldAutoExpandMarginForInitialLabels="false"
        crosshairsDisplayMode="None"
        #chart>
        </igx-category-chart>
    </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

일반 성과 지침

이 섹션에서는 Angular 차트의 오버헤드와 처리 업데이트에 추가되는 지침과 차트 기능을 나열합니다.

데이터 크기

대량의 데이터 포인트(예: 10,000개 이상)가 있는 데이터 소스를 표시해야 하는 경우 다음 유형의 시리즈 중 하나와 함께 Angular IgxDataChartComponent 사용하는 것이 좋습니다. 이 시리즈는 해당 목적에 맞게 특별히 설계되었습니다.

• 카테고리 분산형 차트 또는 분산형 마커 차트 대신 분산형 HD 차트
• 범주 형 선형 차트 또는 분산 선형 차트 대신 분산형 폴리선 차트
• 범주​ ​영역 차트 또는 기둥 차트 대신 분산형 다각형 차트

데이터 구조

Angular 차트는 데이터 포인트 배열의 배열을 ItemsSource 속성에 바인딩하여 여러 데이터 소스의 렌더링을 지원합니다. 여러 데이터 소스가 단일 데이터 소스로 평면화되고 각 데이터 항목에 하나의 데이터 열이 아닌 여러 데이터 열이 포함되는 경우 차트가 훨씬 더 빠릅니다. 예를 들어:

this.CategoryChart.dataSource = FlattenDataSource.create();
this.FinancialChart.dataSource = FlattenDataSource.create();

export class FlattenDataSource {
    public static create(): any[] {
        const data: any[] = [];
        data.push({ "Year": "1996", "USA": 148, "CHN": 110 });
        data.push({ "Year": "2000", "USA": 142, "CHN": 115 });
        return data;
    }
}
// instead of this data structure:
export class MultiDataSources {
    public static create(): any[] {
        const dataSource1: any[] = [];
        dataSource1.push({ "Year": "1996", "Value": 148 });
        dataSource1.push({ "Year": "2000", "Value": 142 });
        const dataSource2: any[] = [];
        dataSource2.push({ "Year": "1996", "Value": 110 });
        dataSource2.push({ "Year": "2000", "Value": 115 });
        const multipleSources: any[] = [dataSource1, dataSource2];
        return multipleSources;
    }
}
ts

데이터 필터링

Angular IgxCategoryChartComponent 및 IgxFinancialChartComponent 컨트롤에는 데이터를 분석하고 차트 시리즈를 생성하는 기본 제공 데이터 어댑터가 있습니다. 그러나 includedProperties 및 excludedProperties 사용하여 실제로 렌더링하려는 데이터 열만 필터링하면 더 빨리 작동합니다. 예를 들어,

this.Chart.includedProperties = [ "Year", "USA", "RUS" ];
this.Chart.excludedProperties = [ "CHN",  "FRN", "GER" ];
ts

차트 성능 지침

차트 유형

​선형 차트와 같은 더 간단한 차트 유형은 데이터 포인트 간의 스플라인 라인의 복잡한 보간으로 인해 스플라인 차트 사용하는 것보다 성능이 더 빠릅니다. 따라서 Angular IgxCategoryChartComponent 또는 IgxFinancialChartComponent 컨트롤의 chartType 속성을 사용하여 더 빠르게 렌더링되는 차트 유형을 선택해야 합니다. 또는 Angular IgxDataChartComponent 컨트롤에서 시리즈 유형을 더 빠른 시리즈로 변경할 수 있습니다.

다음 표에는 각 차트 그룹의 가장 빠른 성능부터 느린 성능 순으로 차트 유형이 나열되어 있습니다.

차트 그룹	차트 종류
원형 차트	-파이 차트 -도넛 차트 -방사형 파이 차트
꺾은선형 차트	-카테고리 선형 차트 -카테고리 스플라인 차트 -단계 선형 차트 -방사형 선형 차트 -극선 선형 차트 -분산 선형 차트 -분산형 폴리라인 차트 (*) -분산형 등고선 차트 -누적 선형 차트 -누적 100% 선형 차트
면적 차트	-카테고리 영역 차트 -단계 영역 차트 -범위 영역 차트 -방사형 영역 차트 -극지방 영역 차트 -분산형 다각형 차트 (*) -분산 영역 차트 -누적 영역 차트 -누적 100% 영역 차트
기둥형 차트	-기둥 차트 -바 차트 -폭포 차트 -범위 기둥 차트 -방사형 기둥 차트 -누적 기둥 차트 -누적 바 차트 -누적형 100% 기둥 차트 -누적 100% 바 차트
스플라인 차트	-카테고리 스플라인 차트 -폴라 스플라인 차트 -분산형 스플라인 차트 -누적 스플라인 차트 -누적 100% 스플라인 차트
포인트 차트	-카테고리 분산형 차트 -분산형 HD 차트 -분산형 마커 차트 -분산형 버블 차트 -폴라 마커 차트
금융 차트	-라인 모드의 주식 차트 -열 모드의 주식 차트 -바 모드의 주식 차트 -캔들 모드의 주식 차트 -오버레이가 포함된 주식 차트 -확대/축소 창을 사용한 주식 차트 -거래량 창을 갖춘 주식형 차트 -표시창이 포함된 주식형 차트
분산형 차트	-분산형 HD 차트 -분산형 마커 차트 -분산 선형 차트 -분산형 버블 차트 -분산형 스플라인 차트 -분산 영역 차트 -분산형 등고선 차트 -분산형 폴리라인 차트 (*) -분산형 다각형 차트 (*)
방사형 차트	-방사형 선형 차트 -방사형 영역 차트 -방사형 파이 차트 -방사형 기둥 차트
극좌표 차트	-폴라 마커 차트 -극선 선형 차트 -극지방 영역 차트 -폴라 스플라인 차트 -폴라 스플라인 영역 차트
누적 차트	-누적 선형 차트 -누적 영역 차트 -누적 기둥 차트 -누적 바 차트 -누적 스플라인 차트 -누적 100% 선형 차트 -누적 100% 영역 차트 -누적형 100% 기둥 차트 -누적 100% 바 차트 -누적 100% 스플라인 차트

* 분산형 다각형 차트 및 분산형 다중선 차트는 차트에 바인딩된 데이터 소스가 많은 경우 나머지 차트보다 성능이 더 좋습니다. 자세한 내용은 시리즈 컬렉션 섹션을 참조하세요. 그렇지 않으면 다른 차트 유형이 더 빠릅니다.

차트 애니메이션

​차트 애니메이션을 활성화하면 Angular 차트에서 전환 애니메이션을 재생하는 동안 최종 렌더링 시리즈가 약간 지연됩니다.

차트 주석

콜아웃 주석, 크로스헤어 주석, 최종 값 주석과 같은 차트 주석을 활성화하면 Angular 차트의 성능이 약간 저하됩니다.

차트 하이라이트

​차트 강조 표시를 활성화하면 Angular 차트의 성능이 약간 저하됩니다.

차트 범례

런타임에 범례에 매핑된 시리즈나 데이터 항목의 제목이 자주 변경되는 경우 Angular 차트에 범례를 추가하면 성능이 저하될 수 있습니다.

차트 마커

Angular 차트에서 마커는 차트 성능 측면에서 특히 비쌉니다. 왜냐하면 차트의 레이아웃 복잡성을 높이고 특정 정보를 얻기 위해 데이터 바인딩을 수행하기 때문입니다. 또한 마커는 데이터 포인트가 많거나 바인딩된 데이터 소스가 많을 때 성능을 저하시킵니다. 따라서 마커가 필요하지 않으면 차트에서 제거해야 합니다.

이 코드 조각은 Angular 차트에서 마커를 제거하는 방법을 보여줍니다.

// on CategoryChart or FinancialChart
this.Chart.markerTypes.clear();
this.Chart.markerTypes.add(MarkerType.None);

// on LineSeries of DataChart
this.LineSeries.markerType = MarkerType.None;
ts

차트 해상도

​resolution 속성을 더 높은 값으로 설정하면 성능이 향상되지만 플롯된 계열 선의 그래픽 충실도가 낮아집니다. 따라서 충실도가 허용되지 않을 때까지 늘릴 수 있습니다.

이 코드 조각은 Angular 차트의 해상도를 낮추는 방법을 보여줍니다.

// on CategoryChart or FinancialChart:
this.Chart.Resolution = 10;

// on LineSeries of DataChart:
this.LineSeries.Resolution = 10;
ts

차트 오버레이

​차트 오버레이를 활성화하면 Angular 차트의 성능이 약간 저하됩니다.

차트 추세선

​차트 추세선을 활성화하면 Angular 차트의 성능이 약간 저하됩니다.

축 유형

데이터 포인트 사이의 시간 범위를 기준으로 데이터 포인트 사이의 공백이 중요하지 않은 경우 DateTime 지원과 함께 x축을 사용하지 않는 것이 좋습니다. 대신, 데이터를 통합하는 방식이 더 효율적이기 때문에 순서/범주 축을 사용해야 합니다. 또한 순서/범주 축은 시간 기반 X축처럼 데이터에 대한 정렬을 수행하지 않습니다.

IgxCategoryChartComponent는 이미 순서/범주 축을 사용하므로 해당 속성을 변경할 필요가 없습니다.

이 코드 조각은 IgxFinancialChartComponent 및 IgxDataChartComponent 컨트롤에서 x축을 순서/범주로 지정하는 방법을 보여줍니다.

<igx-financial-chart xAxisMode="Ordinal"></igx-financial-chart>

<igx-data-chart>
    <igx-category-x-axis label="Time"></igx-category-x-axis>
</igx-data-chart>
html

축 간격

기본적으로 Angular 차트는 데이터 범위에 따라 yAxisInterval 자동으로 계산합니다. 따라서 축 간격을 특히 작은 값으로 설정하지 않는 것이 좋으며, 너무 많은 축 그리드선과 축 레이블을 렌더링하지 않도록 해야 합니다. 또한 많은 축 그리드선이나 축 레이블이 필요하지 않은 경우 yAxisInterval 속성을 자동으로 계산된 축 간격보다 더 큰 값으로 늘리는 것을 고려할 수 있습니다.

차트 성능이 저하되므로 축 마이너 간격을 설정하지 않는 것이 좋습니다.

이 코드 조각은 Angular 차트에서 축의 주요 간격을 설정하는 방법을 보여줍니다.

<igx-category-chart xAxisInterval="5" yAxisInterval="50"></igx-category-chart>

<igx-financial-chart xAxisInterval="5" yAxisInterval="50"></igx-financial-chart>

<igx-data-chart>
    <igx-category-x-axis name="xAxis" interval="5"></igx-category-x-axis>
    <igx-numeric-y-axis name="yAxis" interval="50"></igx-numeric-y-axis>
</igx-data-chart>
html

축 규모

​yAxisIsLogarithmic 속성을 false로 설정하는 것은 더 높은 성능을 위해 권장됩니다. 로그 눈금으로 축 범위와 축 레이블 값을 계산하는 것보다 필요한 작업이 적기 때문입니다.

축 레이블 가시성

마커와 마찬가지로 축 레이블도 템플릿과 바인딩을 사용하기 때문에 비용이 많이 들고 데이터 컨텍스트가 자주 변경될 수 있습니다. 레이블을 사용하지 않는 경우 레이블을 숨기거나 간격을 늘려 축 레이블 수를 줄여야 합니다.

이 코드 조각은 Angular 차트에서 축 레이블을 숨기는 방법을 보여줍니다.

<igx-category-chart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed">
</igx-category-chart>

<igx-financial-chart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed">
</igx-financial-chart>

<igx-data-chart>
    <igx-category-x-axis name="xAxis" labelVisibility="Collapsed"></igx-category-x-axis>
    <igx-numeric-y-axis name="yAxis" labelVisibility="Collapsed"></igx-numeric-y-axis>
</igx-data-chart>
html

축 레이블 약어

하지만 Angular 차트는 yAxisAbbreviateLargeNumbers true로 설정된 경우 축 레이블에 표시된 큰 숫자(예: 10,000+)의 약어를 지원합니다. 대신 데이터 항목에서 큰 값을 공통 인수로 나누어 사전 처리한 다음 yAxisTitle 데이터 값을 약어하는 데 사용되는 인수를 나타내는 문자열로 설정하는 것이 좋습니다.

이 코드 조각은 Angular 차트에서 축 제목을 설정하는 방법을 보여줍니다.

<igx-category-chart yAxisTitle="In millions of Dollars"></igx-category-chart>

<igx-financial-chart yAxisTitle="In millions of Dollars"></igx-financial-chart>

<igx-data-chart>
    <igx-numeric-y-axis title="In millions of Dollars"></igx-numeric-y-axis>
</igx-data-chart>
html

축 레이블 범위

런타임 시 Angular 차트는 가장 긴 값을 가진 레이블을 기준으로 y축의 레이블 범위를 조정합니다. 이는 데이터 범위가 변경되고 레이블을 자주 업데이트해야 하는 경우 차트 성능을 저하시킬 수 있습니다. 따라서 차트 성능을 개선하기 위해 디자인 타임에 레이블 범위를 설정하는 것이 좋습니다.

다음 코드 조각은 Angular 차트에서 y축 레이블에 대한 고정 범위를 설정하는 방법을 보여줍니다.

<igx-category-chart xAxisLabelExtent="50" yAxisLabelExtent="50"></igx-category-chart>

<igx-financial-chart xAxisLabelExtent="50" yAxisLabelExtent="50"></igx-financial-chart>

<igx-data-chart>
    <igx-category-x-axis name="xAxis" labelExtent="50"></igx-category-x-axis>
    <igx-numeric-y-axis name="yAxis" labelExtent="50"></igx-numeric-y-axis>
</igx-data-chart>
html

Axis 기타 시각적 요소

추가 축 시각적 요소(예: 축 제목)를 활성화하거나 기본값을 변경하면 Angular 차트의 성능이 저하될 수 있습니다.

예를 들어 IgxCategoryChartComponent 또는 IgxFinancialChartComponent 컨트롤에서 다음 속성을 변경하면 다음과 같습니다.

축 비주얼	X축 속성	Y축 속성
모든 축 시각적	xAxisInterval xAxisMinorInterval	yAxisInterval yAxisMinorInterval
축 눈금	xAxisTickStroke xAxisTickStrokeThickness xAxisTickLength	yAxisTickStroke yAxisTickStrokeThickness yAxisTickLength
축 주요 격자선	xAxisMajorStroke xAxisMajorStrokeThickness	yAxisMajorStroke yAxisMajorStrokeThickness
축 보조 격자선	xAxisMinorStroke xAxisMinorStrokeThickness	yAxisMinorStroke yAxisMinorStrokeThickness
축 본선	xAxisStroke xAxisStrokeThickness	yAxisStroke yAxisStrokeThickness
축 제목	xAxisTitle xAxisTitleAngle	yAxisTitle yAxisTitleAngle
축 스트립	xAxisStrip	yAxisStrip

또는 IgxDataChartComponent 컨트롤에서 IgxAxisComponent의 속성을 변경합니다.

축 비주얼	축 속성
모든 축 시각적 요소	Interval, MinorInterval
축 눈금	TickStroke , TickStrokeThickness, TickLength
축 주요 격자선	MajorStroke, MajorStrokeThickness
축 보조 격자선	MinorStroke, MinorStrokeThickness
축 본선	Stroke, StrokeThickness
축 제목	chartTitle, TitleAngle
축 스트립	Strip

금융 차트 성과

위의 성능 지침 외에도 Angular IgxFinancialChartComponent 컨트롤은 성능에 영향을 미치는 다음과 같은 고유한 기능을 가지고 있습니다.

Y축 모드

설정 yAxisMode 옵션 Numeric를 사용하는 것보다 더 적은 작업이 필요하므로 더 높은 성능을 위해 권장됩니다. PercentChange 방법.

차트 창

​indicatorTypes 및 overlayTypes 옵션을 사용하여 많은 창을 설정하면 성능이 저하될 수 있으므로 몇 가지 재무 지표와 하나의 재무 오버레이를 사용하는 것이 좋습니다.

줌 슬라이더

​zoomSliderType 옵션을 로 None 설정하면 차트 성능이 향상되고 다른 지표와 볼륨 창에 더 많은 수직 공간이 활성화됩니다.

볼륨 유형

​volumeType 속성을 설정하면 차트 성능에 다음과 같은 영향을 미칠 수 있습니다.

• None- 볼륨 창을 표시하지 않기 때문에 가장 저렴합니다.
• Line- 렌더링하는 데 더 비싼 볼륨 유형이며 많은 데이터 포인트를 렌더링하거나 많은 데이터 소스를 플로팅할 때 권장됩니다.
• Area- 볼륨 유형보다 렌더링하는 데 더 비쌉니다 Line.
• Column- 볼륨 유형보다 Area 렌더링 비용이 많이 들며 1-3 주식의 볼륨 데이터를 렌더링 할 때 권장됩니다.

데이터 차트의 성능

일반적인 성능 지침 외에도 Angular IgxDataChartComponent 컨트롤은 성능에 영향을 미치는 다음과 같은 고유한 기능을 갖추고 있습니다.

축 컬렉션

축을 너무 많이 추가하면 Axes의 컬렉션 IgxDataChartComponent 컨트롤을 사용하면 차트 성능이 저하되므로 권장됩니다. 축 공유 시리즈 사이.

시리즈 컬렉션

또한 Angular IgxDataChartComponent 컨트롤의 IgxSeriesComponent 컬렉션에 많은 시리즈를 추가하면 각 시리즈에 고유한 렌더링 캔버스가 있기 때문에 렌더링 오버헤드가 추가됩니다. 이는 데이터 차트에 10개가 넘는 시리즈가 있는 경우 특히 중요합니다. 여러 데이터 소스를 결합해 데이터 소스를 평평하게 만든 다음(데이터 구조 섹션 참조) 다음 시리즈의 조건부 스타일 지정 기능을 사용하는 것이 좋습니다.

성능 저하 시나리오	조건부 스타일을 사용한 더 빠른 시나리오
10개 이상IgxLineSeriesComponent	하나의IgxScatterLineSeriesComponent
20개 이상IgxLineSeriesComponent	하나의IgxScatterPolylineSeriesComponent
10개 이상IgxScatterLineSeriesComponent	하나의IgxScatterPolylineSeriesComponent
10개 이상IgxPointSeriesComponent	하나의IgxScatterSeriesComponent
20개 이상IgxPointSeriesComponent	하나의IgxHighDensityScatterSeriesComponent
20개 이상IgxScatterSeriesComponent	하나의IgxHighDensityScatterSeriesComponent
10개 이상IgxAreaSeriesComponent	하나의IgxScatterPolygonSeriesComponent
10개 이상IgxColumnSeriesComponent	하나의IgxScatterPolygonSeriesComponent

추가 리소스

다음 항목에서 관련 차트 유형에 대한 자세한 내용을 확인할 수 있습니다.

• 영역 차트
• 바 차트
• 거품형 차트
• 기둥 차트
• 도넛 차트
• 파이 차트
• 분산형 차트
• 극좌표형 차트
• 방사형 차트
• 형상 차트
• 스플라인 차트
• 분산형 차트
• 누적 차트
• 단계 차트
• 주식 차트
• 차트 애니메이션
• 차트 주석
• 차트 하이라이트
• 차트 마커
• 차트 오버레이
• 차트 추세선

API 참조

다음 표에는 위 섹션에서 언급된 API 멤버가 나열되어 있습니다.

• resolution
• indicatorTypes
• overlayTypes
• volumeType
• zoomSliderType
• xAxisMode
• yAxisMode
• xAxisInterval
• yAxisInterval
• xAxisMinorInterval
• yAxisMinorInterval
• xAxisLabelVisibility
• yAxisLabelVisibility
• yAxisIsLogarithmic