Blazor 範囲縦棒チャート

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

Blazor 範囲縦棒チャートの例

軸の要件

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

  • CategoryXAxis
  • OrdinalTimeXAxis
  • TimeXAxis
  • NumericYAxis

データの要件

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

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

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

モジュールの要件

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

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

コード例

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

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

その他のリソース