Web Components チャート パフォーマンス

Web Components チャートは、数百万のデータ ポイントを描画し、それらを数ミリ秒ごとに更新する高性能のために最適化されています。ただし、チャートのパフォーマンスに影響を与えるいくつかのチャート機能があり、アプリケーションのパフォーマンスを最適化するときにそれらを考慮する必要があります。このトピックでは、Web Components チャートをアプリケーションで可能な限り高速に機能させる方法について説明します。

Web Components チャート パフォーマンスの例

次の例は、Web Components チャートの 2 つの高性能シナリオを示しています。

高頻度 Web Components チャート

高頻度シナリオでは、Web Components チャートは、リアルタイムまたは指定されたミリ秒間隔で更新されるデータ項目を描画できます。タッチ デバイスでチャートを操作しているときでも、ラグ、画面のちらつき、表示の遅れは発生しません。次のサンプルは、高頻度シナリオでの IgcCategoryChartComponent を示しています。

EXAMPLE

DATA

TS

HTML

CSS

export class CategoryChartSharedData {

    public static generateItems(startValue: number, maxPoints: number, useShortLabels?: boolean): any[] {

        const data: any[] = [];
        let value = startValue;
        for (let i = 0; i <= maxPoints; i++) {
            value += Math.random() * 4.0 - 2.0;
            const v = Math.round(value);
            let l = i.toString();
            if (useShortLabels) {
                l = this.toShortString(i);
            }
            data.push({ Label: l, Value: v });
        }
        return data;
    }

    public static getTemperatures(startValue: number, startYear: number, endYear: number): any[] {
        const data: any[] = [];
        let value = startValue;
        for (let i = startYear; i <= endYear; i++) {
            value += (Math.random() - 0.5) * 0.5;
            const v = Math.abs(Math.round(value * 10) / 10);
            data.push({ Label: i.toString(), Value: v });
        }
        return data;
    }

    public static getLastItem(array: any[]): any {
        if (array.length === 0) {
            return null;
        }
        return array[array.length - 1];
    }

    public static getNewItem(array: any[], index: number): any {
        const lastItem = this.getLastItem(array);
        const newValue = lastItem.Value + Math.random() * 4.0 - 2.0;
        return { Label: index.toString(), Value: newValue };
    }

    public static 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 + "";
    }

    public static addDays(date: Date, days: number): Date {
        date.setDate(date.getDate() + days);
        return date;
    }
}
tsコピー

import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { CategoryChartSharedData } from './CategoryChartSharedData';

ModuleManager.register(IgcCategoryChartModule);

export class CategoryChartHighFrequency {

    private chart: IgcCategoryChartComponent;
    public dataIndex: number = 0;
    public dataPoints: number = 100000;
    public data: any[] = [];

    public refreshMilliseconds: number = 10;
    public interval: number = -1;
    private dataInfoLabel: HTMLLabelElement;
    private refreshInfoLabel: HTMLLabelElement;
    private timerTickButton : HTMLButtonElement;
    private shouldTick: boolean = false;

    constructor() {

        this.onRefreshFrequencyChanged = this.onRefreshFrequencyChanged.bind(this);
        this.onDataGenerateClick = this.onDataGenerateClick.bind(this);
        this.onTimerButtonClick = this.onTimerButtonClick.bind(this);
        this.onDataPointsChanged = this.onDataPointsChanged.bind(this);
        this.tick = this.tick.bind(this);

        this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this.data = CategoryChartSharedData.generateItems(100, this.dataPoints, false);

        this.chart.dataSource = this.data;
        this.onChartInit();

        let slider1 = document.getElementById('slider') as HTMLInputElement;
        slider1.value = this.dataPoints.toString();
        slider1!.addEventListener('change', this.onDataPointsChanged);

        this.refreshInfoLabel = document.getElementById('refreshInfoLabel') as HTMLLabelElement;
        this.refreshInfoLabel.textContent = (this.refreshMilliseconds / 1000).toFixed(3) + 's';

        let refreshSlider = document.getElementById('refreshSlider') as HTMLInputElement;
        refreshSlider.value = this.refreshMilliseconds.toString();
        refreshSlider!.addEventListener('change', this.onRefreshFrequencyChanged);

        this.dataInfoLabel = document.getElementById('dataInfoLabel') as HTMLLabelElement;
        this.dataInfoLabel.textContent = CategoryChartSharedData.toShortString(this.dataPoints);

        let dataGenerate1 = document.getElementById('dataGenerate') as HTMLInputElement;
        dataGenerate1!.addEventListener('click', this.onDataGenerateClick);

        this.timerTickButton = document.getElementById('timerButton') as HTMLButtonElement;
        this.timerTickButton!.addEventListener('click', this.onTimerButtonClick);
    }

    public componentWillUnmount() {
        if (this.interval >= 0) {
            window.clearInterval(this.interval);
            this.interval = -1;
        }
    }

    public onChartInit(): void {
        this.setupInterval();
    }

    public onDataGenerateClick() {

        this.data = CategoryChartSharedData.generateItems(100, this.dataPoints, false);
        this.dataIndex = this.data.length;

        this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
        this.chart.dataSource = this.data;
    }

    public onTimerButtonClick() {
        this.shouldTick = !this.shouldTick;

        if (this.shouldTick) {
            this.timerTickButton.textContent = "Stop";
        }
        else {
            this.timerTickButton.textContent = "Start";
        }
    }

    public onDataPointsChanged = (e: any) => {

        let num: number = parseInt(e.target.value, 10);

        if (isNaN(num)) {
            num = 10000;
        }
        if (num < 10000) {
            num = 10000;
        }
        if (num > 1000000) {
            num = 1000000;
        }
        const info = CategoryChartSharedData.toShortString(num);
        this.dataInfoLabel.textContent = info;
        this.dataPoints = num;
    }

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

        if (isNaN(num)) {
            num = 10;
        }
        if (num < 10) {
            num = 10;
        }
        if (num > 500) {
            num = 500;
        }
        this.refreshMilliseconds = num;
        this.refreshInfoLabel.textContent = (this.refreshMilliseconds / 1000).toFixed(3) + 's';
        this.setupInterval();
    }

    public setupInterval(): void {
        if (this.interval >= 0) {
            window.clearInterval(this.interval);
            this.interval = -1;
        }

        this.interval = window.setInterval(() => this.tick(),
            this.refreshMilliseconds);
    }

    public tick(): void {
        if (this.shouldTick) {
            this.dataIndex++;
            const oldItem = this.data[0];
            const newItem = CategoryChartSharedData.getNewItem(this.data, this.dataIndex);

            // updating data source and notifying category chart
            this.data.push(newItem);
            this.chart.notifyInsertItem(this.data, this.data.length - 1, newItem);
            this.data.shift();
            this.chart.notifyRemoveItem(this.data, 0, oldItem);
        }
    }
}

new CategoryChartHighFrequency();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>CategoryChartHighFrequency</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options horizontal">
        <label class="options-label">Refresh: </label>
        <button id="timerButton">Start</button>
        <label class="options-value" id="refreshInfoLabel"></label>
        <input class="options-slider" id="refreshSlider" type="range" min="10" max="500"></input>
        <button class="options-button" id="dataGenerate">Generate</button>
        <label class="options-label">Points: </label>
        <label class="options-value" id="dataInfoLabel" >100000 </label>
        <input class="options-slider" id="slider" type="range" min="10000" max="1000000" step="1000" value="100000"></input>
    </div>

    <igc-category-chart id="chart"
        chart-type="Line"
        width="100%"
        height="calc(100% - 3rem)"
        y-axis-extent="60"
        x-axis-enhanced-interval-prefer-more-category-labels="false"
        should-consider-auto-rotation-for-initial-labels="false"
        should-auto-expand-margin-for-initial-labels="false"
        crosshairs-display-mode="None"
        auto-margin-and-angle-update-mode="None"
        marker-types="None" >
    </igc-category-chart>
</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

大量のデータの Web Components チャート

大量データのシナリオでは、Web Components チャートは 100 万のデータ ポイントを描画できますが、エンドユーザーがチャートのコンテンツをズームイン/ズームアウトまたはナビゲートしようとしたときにチャートはスムーズなパフォーマンスを提供し続けます。次のサンプルは、大量データのシナリオでの IgcCategoryChartComponent を示しています。

EXAMPLE

DATA

TS

HTML

CSS

export class CategoryChartSharedData {

    public static generateItems(startValue: number, maxPoints: number, useShortLabels?: boolean): any[] {

        const data: any[] = [];
        let value = startValue;
        for (let i = 0; i <= maxPoints; i++) {
            value += Math.random() * 4.0 - 2.0;
            const v = Math.round(value);
            let l = i.toString();
            if (useShortLabels) {
                l = this.toShortString(i);
            }
            data.push({ Label: l, Value: v });
        }
        return data;
    }

    public static getTemperatures(startValue: number, startYear: number, endYear: number): any[] {
        const data: any[] = [];
        let value = startValue;
        for (let i = startYear; i <= endYear; i++) {
            value += (Math.random() - 0.5) * 0.5;
            const v = Math.abs(Math.round(value * 10) / 10);
            data.push({ Label: i.toString(), Value: v });
        }
        return data;
    }

    public static getLastItem(array: any[]): any {
        if (array.length === 0) {
            return null;
        }
        return array[array.length - 1];
    }

    public static getNewItem(array: any[], index: number): any {
        const lastItem = this.getLastItem(array);
        const newValue = lastItem.Value + Math.random() * 4.0 - 2.0;
        return { Label: index.toString(), Value: newValue };
    }

    public static 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 + "";
    }

    public static addDays(date: Date, days: number): Date {
        date.setDate(date.getDate() + days);
        return date;
    }
}
tsコピー

import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { CategoryChartSharedData } from './CategoryChartSharedData';

ModuleManager.register(IgcCategoryChartModule);

export class CategoryChartHighVolume {

    private chart: IgcCategoryChartComponent;
    public dataPoints: number = 500000;

    public dataInfo: string = CategoryChartSharedData.toShortString(this.dataPoints);
    public data: any[] = [];
    private dataInfoLabel: HTMLLabelElement;

    constructor() {

        this.onDataPointsChanged = this.onDataPointsChanged.bind(this);
        this.onDataGenerateClick = this.onDataGenerateClick.bind(this);

        this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
        this.chart.dataSource = CategoryChartSharedData.generateItems(0, this.dataPoints, true);

        let slider1 = document.getElementById('dataPointsSlider') as HTMLInputElement;
        slider1!.addEventListener('change', this.onDataPointsChanged);

        let DataGenerate1 = document.getElementById('DataGenerate') as HTMLButtonElement;
        DataGenerate1!.addEventListener('click', this.onDataGenerateClick);
    }

    public onDataPointsChanged = (e: any) => {
        this.dataPoints = e.target.value;
        const info = CategoryChartSharedData.toShortString(this.dataPoints);
        this.dataPoints = this.dataPoints;
        this.dataInfo = info;

        this.dataInfoLabel = document.getElementById('dataInfoLabel') as HTMLLabelElement;
        this.dataInfoLabel.textContent = this.dataPoints.toString();
    }

    public onDataGenerateClick = (e: any) => {
        if (this.dataPoints === undefined) {
            this.dataPoints = 10000;
        }
        this.generateData();
    }

    public generateData() {
        this.chart.dataSource = CategoryChartSharedData.generateItems(0, this.dataPoints, true);
    }
}

new CategoryChartHighVolume();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>CategoryChartHighVolume</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options horizontal">
        <label class="options-label">Data Points: </label>
        <label class="options-value" id="dataInfoLabel"> 500000 </label>
        <input id="dataPointsSlider" class="options-slider" type="range" min="10000" max="1000000" step="1000"
            value=500000 />
        <button id="DataGenerate">Generate Data</button>
    </div>
    <igc-category-chart id="chart"
        width="100%"
        height="calc(100% - 3rem)"
        chart-type="Line"
        tool-tip-type="Default"
        y-axis-extent="60"
        x-axis-enhanced-interval-prefer-more-category-labels="false"
        should-consider-auto-rotation-for-initial-labels="false"
        should-auto-expand-margin-for-initial-labels="false"
        crosshairs-display-mode="None"
        auto-margin-and-angle-update-mode="None"
        marker-types="None" >
    </igc-category-chart>
</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

一般的なパフォーマンス ガイドライン

このセクションでは、Web Components チャートのオーバーヘッドと処理の更新に追加されるガイドラインとチャート機能を一覧表示します。

データ サイズ

多数のデータ ポイント (10,000 以上など) を含むデータ ソースをプロットする必要がある場合は、その目的のために特別にデザインされた次のタイプのシリーズのいずれかで Web Components IgcDataChartComponent を使用することをお勧めします。

• カテゴリ ポイント チャート や散布マーカー チャート の代わりに散布高密度チャート
• カテゴリ折れ線チャート や散布折れ線チャート の代わりに散布ポリライン チャート
• カテゴリ エリア チャート や縦棒チャート の代わりに散布ポリゴン チャート

データ構造

Web Components チャートは、データ ポイントの配列の配列を DataSource プロパティにバインドすることにより、複数のデータ ソースの描画をサポートします。複数のデータ ソースが単一のデータ ソースにフラット化され、各データ項目に 1 つのデータ列だけでなく複数のデータ列が含まれる場合、チャートははるかに高速になります。例えば:

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

データ フィルタリング

Web Components IgcCategoryChartComponent および IgcFinancialChartComponent コントロールには、データを分析して一連のチャートを生成するデータ アダプターが組み込まれています。ただし、includedProperties と excludedProperties を使用して、実際に描画するデータ列のみをフィルタリングすると、より高速に動作します。例:

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

チャート パフォーマンス ガイドライン

チャート タイプ

折れ線チャートなどの単純なチャート タイプは、データ ポイント間のスプライン線の補間が複雑であるため、スプライン チャートを使用するよりもパフォーマンスが速くなります。したがって、Web Components IgcCategoryChartComponent の chartType プロパティまたは IgcFinancialChartComponent コントロールを使用して、描画が高速なチャートのタイプを選択する必要があります。または、Web Components IgcDataChartComponent コントロールで、シリーズのタイプをより高速なシリーズに変更することもできます。

次の表に、チャートの各グループで、パフォーマンスが速いものから遅いものの順にチャートのタイプを示します。

チャート グループ	チャート タイプ
円チャート	- 円チャート - ドーナツ チャート - ラジアル円チャート
折れ線チャート	- カテゴリ折れ線チャート - カテゴリ スプライン チャート - ステップ折れ線チャート - ラジアル折れ線チャート - 極座標折れ線チャート - 散布折れ線チャート - 散布ポリライン チャート (*) - 散布等高線チャート - 積層型折れ線チャート - 積層型 100% 折れ線チャート
エリア チャート	- カテゴリ エリア チャート - ステップ エリア チャート - 範囲エリア チャート - ラジアル エリア チャート - 極座標エリア チャート - 散布ポリゴン チャート (*) - 散布エリア チャート - 積層型エリア チャート - 積層型 100% エリア チャート
縦棒チャート	- 縦棒チャート - 棒チャート - ウォーターフォール チャート - 範囲縦棒チャート - ラジアル縦棒チャート - 積層型縦棒チャート - 積層型棒チャート - 積層型 100% 縦棒チャート - 積層型 100% 棒チャート
スプライン チャート	- カテゴリ スプライン チャート - 極座標スプライン チャート - 散布スプライン チャート - 積層型スプライン チャート - 積層型 100% スプライン チャート
ポイント チャート	- カテゴリ ポイント チャート - 散布高密度チャート - 散布マーカー チャート - 散布バブル チャート - 極座標型マーカーチャート
ファイナンシャル チャート	- 折れ線モードの株価チャート - 縦棒モードの株価チャート - 棒モードの株価チャート - ローソク足モードの株価チャート - オーバーレイ付き株価チャート - ズーム ペイン付き株価チャート - ボリューム ペイン付き株価チャート - インジケーター ペイン付き株価チャート
散布図	- 散布高密度チャート - 散布マーカー チャート - 散布折れ線チャート - 散布バブル チャート - 散布スプライン チャート - 散布エリア チャート - 散布等高線チャート - 散布ポリライン チャート (*) - 散布ポリゴン チャート (*)
ラジアル チャート	- ラジアル折れ線チャート - ラジアル エリア チャート - ラジアル円チャート - ラジアル縦棒チャート
極座標チャート	- 極座標型マーカー チャート - 極座標型折れ線チャート - 極座標エリア チャート - 極座標スプライン チャート - 極座標スプライン エリア チャート
積層型チャート	- 積層型折れ線チャート - 積層型エリア チャート - 積層型縦棒チャート - 積層型棒チャート - 積層型スプライン チャート - 積層型 100% 折れ線チャート - 積層型 100% エリア チャート - 積層型 100% 縦棒チャート - 積層型 100% 棒チャート - 積層型 100% スプライン チャート

* チャートに多数のデータ ソースがバインドされている場合、散布ポリゴン チャートと散布ポリライン チャートのパフォーマンスは他のチャートよりも優れていることに注意してください。詳細については、シリーズ コレクションセクションを参照してください。それ以外の場合は、他のチャートのタイプの方が高速です。

チャート アニメーション

チャート アニメーションを有効にすると、トランジションイン アニメーションを再生している間、Web Components チャートの最終描画シリーズがわずかに遅れます

チャート注釈

コールアウト注釈、十字線注釈、最終値注釈などのチャート注釈を有効にすると、Web Components チャートのパフォーマンスがわずかに低下します。

チャートのハイライト表示

チャートのハイライト表示を有効にすると、Web Components チャートのパフォーマンスがわずかに低下します。

チャート凡例

凡例を Web Components チャートに追加すると、凡例にマップされたシリーズまたはデータ項目のタイトルが実行時に頻繁に変更される場合、パフォーマンスが低下する可能性があります。

チャート マーカー

Web Components チャートでは、チャート マーカーはチャートのレイアウトの複雑さを増し、特定の情報を取得するためにデータ バインディングを実行するため、チャートのパフォーマンスに関しては特に手間がかかります。また、データ ポイントが多い場合、またはバインドされているデータ ソースが多い場合、マーカーはパフォーマンスを低下させます。したがって、マーカーが不要な場合は、チャートから削除する必要があります。

以下のコード例は、Web Components チャートからマーカーを削除する方法を示します。

// 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 プロパティをより大きな値に設定するとパフォーマンスは向上しますが、プロットされた系列の線のグラフィカルな忠実度は低下します。このようなわけで、忠実度が受け入れられなくなるまで値を大きくする可能性があります。

このコード スニペットは、Web Components チャートの解像度を下げる方法を示しています。

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

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

チャート オーバーレイ

チャート オーバーレイを有効にすると、Web Components チャートのパフォーマンスがわずかに低下します。

チャート トレンドライン

チャート トレンドラインを有効にすると、Web Components チャートのパフォーマンスがわずかに低下します。

軸のタイプ

データ ポイント間の時間間隔に基づくスペースが重要でない場合は、DateTime をサポートする x 軸の使用はお勧めしません。代わりに、順序/カテゴリ軸を使用する必要があります。これは、データを結合する方法がより効率的であるためです。また、順序/カテゴリ軸は、時間ベースの x 軸のようにデータのソートを実行しません。

IgcCategoryChartComponent はすでに順序/カテゴリ軸を使用しているため、そのプロパティを変更する必要はありません。

このコード スニペットは、IgcFinancialChartComponent および IgcDataChartComponent コントロールで x 軸を順序付け/カテゴリ化する方法を示しています。

<igc-financial-chart x-axis-mode="Ordinal"></igc-financial-chart>

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

軸の間隔

デフォルトでは、Web Components チャートは、データの範囲に基づいて yAxisInterval を自動的に計算します。したがって、軸のグリッド線と軸のラベルが多すぎないように、軸の間隔を特に小さい値に設定することは避けてください。また、多くの軸グリッド線または軸ラベルが必要ない場合は、yAxisInterval プロパティを自動的に計算された軸間隔よりも大きい値に増やすことを検討することをお勧めします。

チャートのパフォーマンスが低下するため、軸の副間隔を設定することはお勧めしません。

このコード スニペットは、Web Components チャートで軸の主間隔を設定する方法を示しています。

<igc-category-chart x-axis-interval="5" y-axis-interval="50"></igc-category-chart>

<igc-financial-chart x-axis-interval="5" y-axis-interval="50"></igc-financial-chart>

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

軸スケール

yAxisIsLogarithmic プロパティを false に設定すると、パフォーマンスを向上させるために推奨されます。対数目盛で軸範囲と軸ラベルの値を計算するよりも操作が少なくて済むためです。

軸ラベルの表示状態

マーカーと同じように、軸ラベルはテンプレートとバインドを使用し、データ コンテキストが頻繁に変更されるために、軸ラベルも負荷がかかります。ラベルを使用しない場合は、非表示にするか、間隔を長くして軸ラベルの数を減らす必要があります。

このコード スニペットは、Web Components チャートで軸ラベルを非表示にする方法を示しています。

<igc-category-chart x-axis-label-visibility="Collapsed" y-axis-label-visibility="Collapsed">
</igc-category-chart>

<igc-financial-chart x-axis-label-visibility="Collapsed" y-axis-label-visibility="Collapsed">
</igc-financial-chart>

<igc-data-chart>
    <igc-category-x-axis name="xAxis" label-visibility="Collapsed"></igc-category-x-axis>
    <igc-numeric-y-axis name="yAxis" label-visibility="Collapsed"></igc-numeric-y-axis>
</igc-data-chart>
html

軸ラベルの省略形

ただし、Web Components チャートは、yAxisAbbreviateLargeNumbers が true に設定されている場合に、軸ラベルに表示される大きな数値 (10,000 以上など) の省略形をサポートします。代わりに、データ 項目の大きな値を公約数で除算して前処理し、yAxisTitle をデータ値の省略形に使用される約数を表す文字列に設定することをお勧めします。

このコード スニペットは、Web Components チャートで軸のタイトルを設定する方法を示しています。

<igc-category-chart y-axis-title="In millions of Dollars"></igc-category-chart>

<igc-financial-chart y-axis-title="In millions of Dollars"></igc-financial-chart>

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

軸ラベルの範囲

実行時に、Web Components チャートは、最も長い値を持つラベルに基づいて、y 軸上のラベルの範囲を調整します。これにより、データの範囲やラベルを頻繁に更新する必要がある場合に、チャートのパフォーマンスが低下する可能性があります。そのため、チャート パフォーマンスを向上させるためにデザイン時にラベル範囲を設定することをお勧めします。

次のコード スニペットは、Web Components チャートの y 軸のラベルに固定されたラベル範囲を設定する方法を示します。

<igc-category-chart x-axis-label-extent="50" y-axis-label-extent="50"></igc-category-chart>

<igc-financial-chart x-axis-label-extent="50" y-axis-label-extent="50"></igc-financial-chart>

<igc-data-chart>
    <igc-category-x-axis name="xAxis" label-extent="50"></igc-category-x-axis>
    <igc-numeric-y-axis name="yAxis" label-extent="50"></igc-numeric-y-axis>
</igc-data-chart>
html

軸その他のビジュアル

追加の軸ビジュアル (軸タイトルなど) を有効にしたり、デフォルト値を変更したりすると、Web Components チャートのパフォーマンスが低下する可能性があります。

たとえば、IgcCategoryChartComponent または IgcFinancialChartComponent コントロールでこれらのプロパティを変更します。

軸ビジュアル	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

または、IgcDataChartComponent コントロールの IgcAxisComponent のプロパティを変更します。

軸ビジュアル	軸プロパティ
すべての軸ビジュアル	Interval、MinorInterval
軸目盛	tickStroke 、tickStrokeThickness、tickLength
軸主グリッド線	majorStroke、majorStrokeThickness
軸の副グリッド線	minorStroke、minorStrokeThickness
軸主線	stroke、strokeThickness
軸タイトル	title、TitleAngle
軸ストリップ	strip

ファイナンシャル チャートのパフォーマンス

上記のパフォーマンスガイドラインに加えて、Web Components IgcFinancialChartComponent コントロールには、パフォーマンスに影響を与える次の独自の機能があります。

Y 軸モード

PercentChange モードを使用するよりも必要な操作が少ないため、パフォーマンスを向上させるには、yAxisMode オプションを Numeric に設定することをお勧めします。

チャート ペイン

indicatorTypes および overlayTypes オプションを使用して複数のペインを設定した場合、パフォーマンスが低下する可能性があり、少数の財務指標および単一の財務オーバーレイを使用することをお勧めします。

ズーム スライダー

zoomSliderType オプションを None に設定すると、チャート パフォーマンスを向上し、その他のインジケーターおよびボリューム ペインのために垂直スペースを利用可能になります。

ボリューム タイプ

volumeType プロパティの設定はチャート パフォーマンスに次の影響を与える可能性があります:

• None - ボリューム ペインが表示されないため、最も簡易です。
• Line - 描画するのにより手間がかかるボリューム タイプです。データ ポイントの大量を描画するか、複数のデータ ソースをプロットする場合に使用することをお勧めします。
• Area - Line ボリューム タイプより描画に手間がかかります。
• Column - Area ボリューム タイプより描画に手間がかかります。1 つ ～ 3 つの株のボリューム データを描画する場合にお勧めします。

データ チャートのパフォーマンス

一般的なパフォーマンス ガイドラインに加えて、Web Components IgcDataChartComponent コントロールには、パフォーマンスに影響を与える次の固有の機能があります。

軸コレクション

IgcDataChartComponent コントロールの Axes コレクションに追加する軸が多すぎると、チャートのパフォーマンスが低下するため、シリーズ間で軸の共有をお勧めします。

シリーズ コレクション

また、Web Components IgcDataChartComponent コントロールの IgcSeriesComponent コレクションに多くのシリーズを追加すると、各シリーズに独自の描画キャンバスがあるため、描画にオーバーヘッドが追加されます。これは、データ チャートに 10 を超えるシリーズがある場合に特に重要です。複数のデータ ソースを組み合わせてフラット化したデータ ソースにし (データ構造セクションを参照)、次のシリーズの条件付き書式設定機能を使用することをお勧めします。

パフォーマンスが低下するシナリオ	条件付き書式設定を使用したより高速なシナリオ
IgcLineSeriesComponent の 10 以上	単一の IgcScatterLineSeriesComponent
IgcLineSeriesComponent の 20 以上	単一の IgcScatterPolylineSeriesComponent
IgcScatterLineSeriesComponent の 10 以上	単一の IgcScatterPolylineSeriesComponent
IgcPointSeriesComponent の 10 以上	単一の IgcScatterSeriesComponent
IgcPointSeriesComponent の 20 以上	単一の IgcHighDensityScatterSeriesComponent
IgcScatterSeriesComponent の 20 以上	単一の IgcHighDensityScatterSeriesComponent
IgcAreaSeriesComponent の 10 以上	単一の IgcScatterPolygonSeriesComponent
IgcColumnSeriesComponent の 10 以上	単一の IgcScatterPolygonSeriesComponent

その他のリソース

関連するチャート タイプの詳細については、以下のトピックを参照してください。

• エリア チャート
• 棒チャート
• バブル チャート
• 縦棒チャート
• ドーナツ チャート
• 円チャート
• ポイント チャート
• 極座標チャート
• ラジアル チャート
• シェープ チャート
• スプライン チャート
• 散布図
• 積層型チャート
• ステップ チャート
• 株価チャート
• チャート アニメーション
• チャート注釈
• チャートのハイライト表示
• チャート マーカー
• チャート オーバーレイ
• チャート トレンドライン

API リファレンス

以下は、上記のセクションで説明した API メンバーのリストです。

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