Angular チャート パフォーマンス
Angular チャートは、数百万のデータ ポイントを描画し、それらを数ミリ秒ごとに更新する高性能のために最適化されています。ただし、チャートのパフォーマンスに影響を与えるいくつかのチャート機能があり、アプリケーションのパフォーマンスを最適化するときにそれらを考慮する必要があります。このトピックでは、Angular チャートをアプリケーションで可能な限り高速に機能させる方法について説明します。
Angular チャート パフォーマンスの例
次の例は、Angular チャートの 2 つの高性能シナリオを示しています。
高頻度 Angular チャート
高頻度シナリオでは、Angular チャートは、リアルタイムまたは指定されたミリ秒間隔で更新されるデータ項目を描画できます。タッチ デバイスでチャートを操作しているときでも、ラグ、画面のちらつき、表示の遅れは発生しません。次のサンプルは、高頻度シナリオでの IgxCategoryChartComponent を示しています。
大量のデータの Angular チャート
大量データのシナリオでは、Angular チャートは 100 万のデータ ポイントを描画できますが、エンドユーザーがチャートのコンテンツをズームイン/ズームアウトまたはナビゲートしようとしたときにチャートはスムーズなパフォーマンスを提供し続けます。次のサンプルは、大量データのシナリオでの IgxCategoryChartComponent を示しています。
一般的なパフォーマンス ガイドライン
このセクションでは、Angular チャートのオーバーヘッドと処理の更新に追加されるガイドラインとチャート機能を一覧表示します。
データ サイズ
多数のデータ ポイント (10,000 以上など) を含むデータ ソースをプロットする必要がある場合は、その目的のために特別にデザインされた次のタイプのシリーズのいずれかで Angular IgxDataChartComponent を使用することをお勧めします。
- カテゴリ ポイント チャート や散布マーカー チャート の代わりに散布高密度チャート
- カテゴリ折れ線チャート や散布折れ線チャート の代わりに散布ポリライン チャート
- カテゴリ エリア チャート や縦棒チャート の代わりに散布ポリゴン チャート
データ構造
Angular チャートは、データ ポイントの配列の配列を 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;
}
}
データ フィルタリング
Angular IgxCategoryChartComponent および IgxFinancialChartComponent コントロールには、データを分析して一連のチャートを生成するデータ アダプターが組み込まれています。ただし、includedProperties と excludedProperties を使用して、実際に描画するデータ列のみをフィルタリングすると、より高速に動作します。例:
this.Chart.includedProperties = [ "Year", "USA", "RUS" ];
this.Chart.excludedProperties = [ "CHN", "FRN", "GER" ];
チャート パフォーマンス ガイドライン
チャート タイプ
折れ線チャートなどの単純なチャート タイプは、データ ポイント間のスプライン線の補間が複雑であるため、スプライン チャートを使用するよりもパフォーマンスが速くなります。したがって、Angular IgxCategoryChartComponent の chartType プロパティまたは IgxFinancialChartComponent コントロールを使用して、描画が高速なチャートのタイプを選択する必要があります。または、Angular IgxDataChartComponent コントロールで、シリーズのタイプをより高速なシリーズに変更することもできます。
次の表に、チャートの各グループで、パフォーマンスが速いものから遅いものの順にチャートのタイプを示します。
* チャートに多数のデータ ソースがバインドされている場合、散布ポリゴン チャートと散布ポリライン チャートのパフォーマンスは他のチャートよりも優れていることに注意してください。詳細については、シリーズ コレクションセクションを参照してください。それ以外の場合は、他のチャートのタイプの方が高速です。
チャート アニメーション
チャート アニメーションを有効にすると、トランジションイン アニメーションを再生している間、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;
チャートの解像度
resolution プロパティをより大きな値に設定するとパフォーマンスは向上しますが、プロットされた系列の線のグラフィカルな忠実度は低下します。このようなわけで、忠実度が受け入れられなくなるまで値を大きくする可能性があります。
このコード スニペットは、Angular チャートの解像度を下げる方法を示しています。
// on CategoryChart or FinancialChart:
this.Chart.Resolution = 10;
// on LineSeries of DataChart:
this.LineSeries.Resolution = 10;
チャート オーバーレイ
チャート オーバーレイを有効にすると、Angular チャートのパフォーマンスがわずかに低下します。
チャート トレンドライン
チャート トレンドラインを有効にすると、Angular チャートのパフォーマンスがわずかに低下します。
軸のタイプ
データ ポイント間の時間間隔に基づくスペースが重要でない場合は、DateTime をサポートする x 軸の使用はお勧めしません。代わりに、順序/カテゴリ軸を使用する必要があります。これは、データを結合する方法がより効率的であるためです。また、順序/カテゴリ軸は、時間ベースの x 軸のようにデータのソートを実行しません。
[!Note]
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>
軸の間隔
デフォルトでは、Angular チャートは、データの範囲に基づいて yAxisInterval を自動的に計算します。したがって、軸のグリッド線と軸のラベルが多すぎないように、軸の間隔を特に小さい値に設定することは避けてください。また、多くの軸グリッド線または軸ラベルが必要ない場合は、yAxisInterval プロパティを自動的に計算された軸間隔よりも大きい値に増やすことを検討することをお勧めします。
[!Note] チャートのパフォーマンスが低下するため、軸の副間隔を設定することはお勧めしません。
このコード スニペットは、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>
軸スケール
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>
軸ラベルの省略形
ただし、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>
軸ラベルの範囲
実行時に、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>
軸その他のビジュアル
追加の軸ビジュアル (軸タイトルなど) を有効にしたり、デフォルト値を変更したりすると、Angular チャートのパフォーマンスが低下する可能性があります。
たとえば、IgxCategoryChartComponent または IgxFinancialChartComponent コントロールでこれらのプロパティを変更します。
または、IgxDataChartComponent コントロールの IgxAxisComponent のプロパティを変更します。
| 軸ビジュアル | 軸プロパティ |
|---|---|
| すべての軸ビジュアル | Interval、MinorInterval |
| 軸目盛 | tickStroke 、tickStrokeThickness、tickLength |
| 軸主グリッド線 | majorStroke、majorStrokeThickness |
| 軸の副グリッド線 | minorStroke、minorStrokeThickness |
| 軸主線 | stroke、strokeThickness |
| 軸タイトル | title、TitleAngle |
| 軸ストリップ | strip |
ファイナンシャル チャートのパフォーマンス
上記のパフォーマンスガイドラインに加えて、Angular IgxFinancialChartComponent コントロールには、パフォーマンスに影響を与える次の独自の機能があります。
Y 軸モード
PercentChange モードを使用するよりも必要な操作が少ないため、パフォーマンスを向上させるには、yAxisMode オプションを Numeric に設定することをお勧めします。
チャート ペイン
indicatorTypes および overlayTypes オプションを使用して複数のペインを設定した場合、パフォーマンスが低下する可能性があり、少数の財務指標および単一の財務オーバーレイを使用することをお勧めします。
ズーム スライダー
zoomSliderType オプションを None に設定すると、チャート パフォーマンスを向上し、その他のインジケーターおよびボリューム ペインのために垂直スペースを利用可能になります。
ボリューム タイプ
volumeType プロパティの設定はチャート パフォーマンスに次の影響を与える可能性があります:
None- ボリューム ペインが表示されないため、最も簡易です。Line- 描画するのにより手間がかかるボリューム タイプです。データ ポイントの大量を描画するか、複数のデータ ソースをプロットする場合に使用することをお勧めします。Area-Lineボリューム タイプより描画に手間がかかります。Column-Areaボリューム タイプより描画に手間がかかります。1 つ ～ 3 つの株のボリューム データを描画する場合にお勧めします。
データ チャートのパフォーマンス
一般的なパフォーマンス ガイドラインに加えて、Angular IgxDataChartComponent コントロールには、パフォーマンスに影響を与える次の固有の機能があります。
軸コレクション
IgxDataChartComponent コントロールの Axes コレクションに追加する軸が多すぎると、チャートのパフォーマンスが低下するため、シリーズ間で軸の共有をお勧めします。
シリーズ コレクション
また、Angular IgxDataChartComponent コントロールの IgxSeriesComponent コレクションに多くのシリーズを追加すると、各シリーズに独自の描画キャンバスがあるため、描画にオーバーヘッドが追加されます。これは、データ チャートに 10 を超えるシリーズがある場合に特に重要です。複数のデータ ソースを組み合わせてフラット化したデータ ソースにし (データ構造セクションを参照)、次のシリーズの条件付き書式設定機能を使用することをお勧めします。
| パフォーマンスが低下するシナリオ | 条件付き書式設定を使用したより高速なシナリオ |
|---|---|
IgxLineSeriesComponent の 10 以上 |
単一の IgxScatterLineSeriesComponent |
IgxLineSeriesComponent の 20 以上 |
単一の IgxScatterPolylineSeriesComponent |
IgxScatterLineSeriesComponent の 10 以上 |
単一の IgxScatterPolylineSeriesComponent |
IgxPointSeriesComponent の 10 以上 |
単一の IgxScatterSeriesComponent |
IgxPointSeriesComponent の 20 以上 |
単一の IgxHighDensityScatterSeriesComponent |
IgxScatterSeriesComponent の 20 以上 |
単一の IgxHighDensityScatterSeriesComponent |
IgxAreaSeriesComponent の 10 以上 |
単一の IgxScatterPolygonSeriesComponent |
IgxColumnSeriesComponent の 10 以上 |
単一の IgxScatterPolygonSeriesComponent |
その他のリソース
関連するチャート タイプの詳細については、以下のトピックを参照してください。
- エリア チャート
- 棒チャート
- バブル チャート
- 縦棒チャート
- ドーナツ チャート
- 円チャート
- ポイント チャート
- 極座標チャート
- ラジアル チャート
- シェープ チャート
- スプライン チャート
- 散布図
- 積層型チャート
- ステップ チャート
- 株価チャート
- チャート アニメーション
- チャート注釈
- チャートのハイライト表示
- チャート マーカー
- チャート オーバーレイ
- チャート トレンドライン
API リファレンス
以下は、上記のセクションで説明した API メンバーのリストです。
resolutionindicatorTypesoverlayTypesvolumeTypezoomSliderTypexAxisModeyAxisModexAxisIntervalyAxisIntervalxAxisMinorIntervalyAxisMinorIntervalxAxisLabelVisibilityyAxisLabelVisibilityyAxisIsLogarithmic
GitHub