Blazor スプライン エリア チャート

Ignite UI for Blazor スプライン エリア チャートは、カテゴリ チャートのグループに属し、スプラインの下の領域が塗りつぶされたスプラインの滑らかな曲線で接続されたポイントのコレクションを使用して描画されます。値は y 軸に表示され、カテゴリは x 軸に表示されます。SplineAreaSeries は時間毎のデータの変化や複数の項目を比較する場合に用いられ、プロットされた値の合計を表示することで全体に対するデータ間の関係も表します。Blazor スプライン エリア チャートは、データ ポイントを接続するラインにスプライン補間とデータの表示を改善するスムージングがあること以外は Blazor エリア チャートと同じです。

Blazor スプライン エリア チャートの例

軸の要件

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

  • CategoryXAxis
  • OrdinalTimeXAxis
  • TimeXAxis
  • NumericYAxis

データの要件

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

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

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

モジュールの要件

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

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

コード例

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

<DataChart Height="500px" Width="700px">
    <CategoryXAxis Name="xAxis" />
    <NumericYAxis Name="yAxis" />
    <SplineAreaSeries
        Name="series1"
        XAxisName="xAxis"
        YAxisName="yAxis"
        ValueMemberPath="USA" />
</DataChart>

その他のリソース