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

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

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

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

高頻度 Blazor チャート

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

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

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

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

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

データ サイズ

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

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

データ構造

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

this.CategoryChart.DataSource = FlattenDataSource.Create();
this.FinancialChart.DataSource = FlattenDataSource.Create();

public static class FlattenDataSource
{
    public static List<FlattenDataItem> Create() {
        var data = new List<FlattenDataItem>() {
            new FlattenDataItem { Year = "1996", USA = 148, CHN = 110 },
            new FlattenDataItem { Year = "2000", USA = 142, CHN = 115 },
        };
        return data;
    }
    public class FlattenDataItem
    {
        public int USA { get; set; }
        public int CHN { get; set; }
        public int Year { get; set; }
    }
}
// instead of this data structure:
public static class MultiDataSources
{
    public static List<MultiDataItem> Create() {
        var dataSource1 = new List<MultiDataItem>() {
            new MultiDataItem { Year = "1996", Value = 148 },
            new MultiDataItem { Year = "2000", Value = 142 },
        };
        var dataSource2 = new List<MultiDataItem>() {
            new MultiDataItem { Year = "1996", Value = 110 },
            new MultiDataItem { Year = "2000", Value = 115 },
        };
        var multipleSources = new List<List<MultiDataItem>>();
        multipleSources.Add(dataSource1);
        multipleSources.Add(dataSource2);
        return multipleSources;
    }
    public class MultiDataItem
    {
        public int Value { get; set; }
        public int Year { get; set; }
    }
}

データ フィルタリング

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

this.Chart.IncludedProperties = new string[] { "Year", "USA", "RUS" };
this.Chart.ExcludedProperties = new string[] { "CHN",  "FRN", "GER" };

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

チャート タイプ

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

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

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

チャート アニメーション

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

チャート注釈

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

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

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

チャート凡例

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

チャート マーカー

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

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

// on CategoryChart or FinancialChart
this.Chart.MarkerTypes.Clear();
this.Chart.MarkerTypes.Add(MarkerType.None);

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

チャートの解像度

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

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

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

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

チャート オーバーレイ

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

チャート トレンドライン

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

軸のタイプ

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

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

<IgbFinancialChart XAxisMode="FinancialChartXAxisMode.Ordinal"/>

<IgbDataChart >
    <IgbCategoryXAxis Label="Time" />
</IgbDataChart>

軸の間隔

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

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

<IgbCategoryChart  XAxisInterval="5" YAxisInterval="50"/>

<IgbFinancialChart XAxisInterval="5" YAxisInterval="50"/>

<IgbDataChart >
    <IgbCategoryXAxis Name="xAxis" Interval="5" />
    <IgbNumericYAxis  Name="yAxis" Interval="50" />
</IgbDataChart>

軸スケール

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

軸ラベルの表示状態

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

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

<IgbCategoryChart
    XAxisLabelVisibility="Visibility.Collapsed"
    YAxisLabelVisibility="Visibility.Collapsed">
</IgbCategoryChart>

<IgbFinancialChart
    XAxisLabelVisibility="Visibility.Collapsed"
    YAxisLabelVisibility="Visibility.Collapsed">
</IgbFinancialChart>

<IgbDataChart>
    <IgbCategoryXAxis Name="xAxis" LabelVisibility="Visibility.Collapsed" />
    <IgbNumericYAxis  Name="yAxis" LabelVisibility="Visibility.Collapsed" />
</IgbDataChart>

軸ラベルの省略形

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

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

<IgbCategoryChart  YAxisTitle="In millions of Dollars"/>

<IgbFinancialChart YAxisTitle="In millions of Dollars"/>

<IgbDataChart >
    <IgbNumericYAxis Title="In millions of Dollars" />
</IgbDataChart>

軸ラベルの範囲

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

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

<IgbCategoryChart  XAxisLabelExtent="50" YAxisLabelExtent="50"/>

<IgbFinancialChart XAxisLabelExtent="50" YAxisLabelExtent="50"/>

<IgbDataChart>
    <IgbCategoryXAxis Name="xAxis" LabelExtent="50" />
    <IgbNumericYAxis  Name="yAxis" LabelExtent="50" />
</IgbDataChart>

軸その他のビジュアル

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

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

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

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

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

Y 軸モード

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

チャート ペイン

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

ズーム スライダー

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

ボリューム タイプ

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

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

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

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

軸コレクション

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

シリーズ コレクション

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

その他のリソース

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

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

API リファレンス