Blazor ラジアル縦棒チャート

Ignite UI for Blazor ラジアル縦棒チャートは、放射状チャートのグループに属し、チャートの中心からデータポイントの位置に向かって伸びる長方形のコレクションを使用して描画されます。RadialColumnSeries は ColumnSeries と同じデータ プロットの概念を使用していますが、横の線に沿って伸びるのではなく、円の周りでデータ ポイントをラップします。

Blazor ラジアル縦棒チャートの例

軸の要件

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

  • NumericRadiusAxis
  • CategoryAngleAxis

データの要件

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

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

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

モジュールの要件

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

DataChartCoreModule.Register(IgniteUIBlazor);
RadialColumnSeriesModule.Register(IgniteUIBlazor);
RadialColumnSeriesCoreModule.Register(IgniteUIBlazor);
DataChartInteractivityModule.Register(IgniteUIBlazor);

コード例

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

<DataChart Height="500px" Width="750px">
        <CategoryAngleAxis Name="angleAxis" Label="Department" />
        <NumericRadiusAxis Name="radiusAxis" />
        <RadialColumnSeries Name="series1"
            DataSource="@DataSource"
            AngleAxisName="angleAxis"
            ValueMemberPath="Budget"
            ValueAxisName="radiusAxis"
            />
</DataChart>

その他のリソース