Blazor 棒チャート

Ignite UI for Blazor 棒チャートはカテゴリチャートのグループに属し、チャートの左から右にデータポイントの値に向かって伸びる長方形のコレクションを使用して描画されます。BarSeries は、ColumnSeries と同じデータプロットの概念を使用していますが、データポイントは、水平 (x 軸) でなく垂直軸 (y 軸) に沿って拡大します。つまり、棒チャートは縦棒チャートのように描画されますが、時計回りに 90 度回転します。

Blazor 棒チャートの例

軸の要件

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

NumericXAxis
CategoryYAxis

データの要件

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

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

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

モジュールの要件

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

DataChartCoreModule.Register(IgniteUIBlazor);
DataChartCategoryModule.Register(IgniteUIBlazor);
DataChartCategoryCoreModule.Register(IgniteUIBlazor);
DataChartInteractivityModule.Register(IgniteUIBlazor);

コード例

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

<DataChart Height="500px" Width="700px">
    <NumericXAxis Name="xAxis" />
    <CategoryYAxis Name="yAxis" />

    <BarSeries
        XAxisName="xAxis"
        YAxisName="yAxis"
        ValueMemberPath="USA"
        DataSource="@data" />
</DataChart>

Blazor 棒チャート