Blazor 範囲エリア チャート

Ignite UI for Blazor 範囲エリア チャートは、範囲チャートのグループに属し、線の間の領域が塗りつぶされた 2 本の線を使用してレンダリングされます。このタイプのシリーズは、同じデータ ポイントの低い値と高い値の間の変化量を強調します一定期間、または複数のアイテムを比較します。範囲値は y 軸に表示され、カテゴリは x 軸に表示されます。RangeAreaSeries は、範囲が塗りつぶされた領域ではなく垂直柱の集まりで表されること以外は RangeColumnSeries と同じです。

Blazor 範囲エリア チャートの例

軸の要件

Blazor データ チャート コンポーネントはさまざまなタイプの軸を提供しますが、RangeAreaSeries で使用できるのは以下のタイプの軸のみです。

  • CategoryXAxis
  • OrdinalTimeXAxis
  • TimeXAxis
  • NumericYAxis

データの要件

RadialAreaSeries には以下のデータ要件があります。

  • データソースはデータ項目の配列またはリストである必要があります。
  • データソースにはデータ項目を少なくとも 1 つ含む必要があり、含まれない場合はチャートで RangeAreaSeries がレンダリングされません。
  • すべてのデータ項目には、カテゴリ軸の Label プロパティにマッピングする必要があるラベルデータ列（文字列または日時）を少なくとも1つ含める必要があります (CategoryXAxis など)。
  • すべてのデータ項目には、RangeAreaSeries の HighMemberPath プロパティと LowMemberPath プロパティを使用してマップする必要がある少なくとも 2 つの数値データ列が含まれている必要があります。

上記データ要件を満たすデータソースとして SampleRangeData を使用できます。

モジュールの要件

RangeAreaSeries を作成するには、以下のモジュールが必要です。

DataChartCoreModule.Register(IgniteUIBlazor);
RadialPieSeriesModule.Register(IgniteUIBlazor);
RadialPieSeriesCoreModule.Register(IgniteUIBlazor);
DataChartInteractivityModule.Register(IgniteUIBlazor);

コード例

このコードは、RangeAreaSeries を使用して Ignite UI for Blazor データ チャートのインスタンスを作成し、それをデータソースにバインドする方法を示します。

<DataChart Height="500px" Width="750px">
        <CategoryXAxis Name="xAxis" Label="Year" DataSource="@DataSource"/>
        <NumericYAxis  Name="yAxis" />
        <RangeAreaSeries Name="series1" 
            XAxisName="xAxis"           YAxisName="yAxis"
            DataSource="@DataSource"
            LowMemberPath="Low"
            HighMemberPath="High" />
</DataChart>

その他のリソース