React チャート パフォーマンス

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

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

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

    高頻度 React チャート

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

    大量のデータの React チャート

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

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

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

    データ サイズ

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

    データ構造

    React チャートは、データ ポイントの配列の配列を 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;
        }
    }
    

    データ フィルタリング

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

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

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

    チャート タイプ

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

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

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

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

    チャート アニメーション

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

    チャート注釈

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

    チャートの強調表示

    チャートの強調表示を有効にすると、React チャートのパフォーマンスがわずかに低下します。

    チャート凡例

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

    チャート マーカー

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

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

    // on CategoryChart or FinancialChart
    this.Chart.markerTypes.clear();
    this.Chart.markerTypes.add(MarkerType.None);
    
    // on LineSeries of DataChart
    this.LineSeries.markerType = MarkerType.None;
    

    チャートの解像度

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

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

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

    チャート オーバーレイ

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

    チャート トレンドライン

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

    軸のタイプ

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

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

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

    <IgrFinancialChart xAxisMode="Ordinal" />
    
    <IgrDataChart>
        <IgrCategoryXAxis label="Time" />
    </IgrDataChart>
    

    軸の間隔

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

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

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

    <IgrCategoryChart  xAxisInterval={5} yAxisInterval={50}/>
    
    <IgrFinancialChart xAxisInterval={5} yAxisInterval={50}/>
    
    <IgrDataChart>
        <IgrCategoryXAxis name="xAxis" interval={5} />
        <IgrNumericYAxis  name="yAxis" interval={50}/>
    </IgrDataChart>
    

    軸スケール

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

    軸ラベルの表示状態

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

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

    <IgrCategoryChart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed" />
    
    <IgrFinancialChart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed" />
    
    <IgrDataChart>
        <IgrCategoryXAxis name="xAxis" labelVisibility="Collapsed" />
        <IgrNumericYAxis  name="yAxis" labelVisibility="Collapsed" />
    </IgrDataChart>
    

    軸ラベルの省略形

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

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

    <IgrCategoryChart  yAxisTitle="In millions of Dollars" />
    
    <IgrFinancialChart yAxisTitle="In millions of Dollars" />
    
    <IgrDataChart>
        <IgrNumericYAxis title="In millions of Dollars" />
    </IgrDataChart>
    

    軸ラベルの範囲

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

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

    <IgrCategoryChart  xAxisLabelExtent={50} yAxisLabelExtent={50}/>
    
    <IgrFinancialChart xAxisLabelExtent={50} yAxisLabelExtent={50}/>
    
    <IgrDataChart>
        <IgrCategoryXAxis name="xAxis" labelExtent={50} />
        <IgrNumericYAxis  name="yAxis" labelExtent={50} />
    </IgrDataChart>
    

    軸その他のビジュアル

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

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

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

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

    軸ビジュアル 軸プロパティ
    すべての軸ビジュアル IntervalMinorInterval
    軸目盛 tickStroketickStrokeThicknesstickLength
    軸主グリッド線 majorStrokemajorStrokeThickness
    軸の副グリッド線 minorStrokeminorStrokeThickness
    軸主線 strokestrokeThickness
    軸タイトル titleTitleAngle
    軸ストリップ strip

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

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

    Y 軸モード

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

    チャート ペイン

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

    ズーム スライダー

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

    ボリューム タイプ

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

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

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

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

    軸コレクション

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

    シリーズ コレクション

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

    パフォーマンスが低下するシナリオ 条件付き書式設定を使用したより高速なシナリオ
    IgrLineSeries の 10 以上 単一の IgrScatterLineSeries
    IgrLineSeries の 20 以上 単一の IgrScatterPolylineSeries
    IgrScatterLineSeries の 10 以上 単一の IgrScatterPolylineSeries
    IgrPointSeries の 10 以上 単一の IgrScatterSeries
    IgrPointSeries の 20 以上 単一の IgrHighDensityScatterSeries
    IgrScatterSeries の 20 以上 単一の IgrHighDensityScatterSeries
    IgrAreaSeries の 10 以上 単一の IgrScatterPolygonSeries
    IgrColumnSeries の 10 以上 単一の IgrScatterPolygonSeries

    その他のリソース

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

    API リファレンス

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