Blazor 極座標エリア チャート

Ignite UI for Blazor 極座標エリア チャートは、極座標チャートのグループに属し、頂点または角がデータポイントの極座標 (角度/半径) 座標にある塗りつぶされた多角形の形状を持っています。PolarAreaSeriesScatterSeries と同じデータ プロットの概念を使用していますが、横の線に沿って伸びるのではなく、円の周りでデータ ポイントをラップします。他のシリーズ タイプと同じように、複数の PolarAreaSeries は同じデータ チャートにプロットでき、データセットの相違点を示すために互いにオーバーレイできます。

Blazor 極座標エリア チャートの例

軸の要件

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

  • NumericRadiusAxis
  • NumericAngleAxis

データの要件

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

  • データソースはデータ項目の配列またはリストである必要があります。
  • データソースにはデータ項目を少なくとも 1 つ含む必要があり、含まれない場合はチャートで PolarAreaSeries がレンダリングされません。
  • すべてのデータ項目には、極座標シリーズの AngleMemberPathRadiusMemberPath プロパティを使用してマッピングする必要がある少なくとも 2 つの数値データ列 (PolarAreaSeries など)を含める必要があります。

極座標シリーズのデータポイントの位置は、「極」と呼ばれる、固定方向からの角度 (角度座標) と固定点 (デカルト座標の原点に類似) からの距離 (半径座標) によって決まります。極から始まって外側を指す線は角度軸 (NumericAngleAxis) のグリッド線で、極を囲む同心円状の輪は半径軸 (NumericRadiusAxis) のグリッド線です。

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

モジュールの要件

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

DataChartCoreModule.Register(IgniteUIBlazor);
DataChartPolarModule.Register(IgniteUIBlazor);
DataChartPolarCoreModule.Register(IgniteUIBlazor);
DataChartInteractivityModule.Register(IgniteUIBlazor);

コード例

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

<DataChart Height="500px" Width="750px">
        <NumericAngleAxis Name="angleAxis" StartAngleOffset="-90" />
        <NumericRadiusAxis Name="radiusAxis" />
        <PolarAreaSeries Name="series1"
            DataSource="@DataSource"
            AngleAxisName="angleAxis"
            AngleMemberPath="Direction"
            RadiusAxisName="radiusAxis"
            RadiusMemberPath="WindSpeed" />
</DataChart>

その他のリソース