Blazor スプライン チャート

Ignite UI for Blazor スプライン チャートは、スプラインのスムーズなカーブに接続された点のコレクションとして描画されるカテゴリ チャートのグループに属しています。値は y 軸に表示され、カテゴリは x 軸に表示されます。スプライン チャートは時間毎のデータの変化や複数の項目を比較する場合に用いられ、プロットされた値の合計を表示することで全体に対するデータ間の関係も表します。スプライン チャートは、データ ポイントを接続する線がデータの表示を改善するためのスプライン補間とスムージング機能を持つこと以外のすべての面で折れ線チャートと同じです。

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

次の例は、データをバインドし、CategoryChart.ChartType プロパティを Spline 列挙型に設定することにより、IgbCategoryChart コントロールで Blazor スプライン チャートを作成する方法を示しています。

単一シリーズの Blazor スプライン チャート

以下の例に示すように、スプライン チャートは、ヨーロッパで 2009 年以降の 10 年間の再生可能電力量など、値の経時変化を示すためによく使用されます。

IgbCategoryChart コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、CategoryChart.ChartType プロパティを Spline に設定します:

複数シリーズの Blazor スプライン チャート

スプライン チャートを使用すると、複数のシリーズを組み合わせて、時間の経過とともにどのように変化するかを比較または確認できます。中国と米国のデータを含むデータ ソースにバインドするだけで、チャートは追加データに合わせて自動的に更新されます。

IgbCategoryChart コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、CategoryChart.ChartType プロパティを Spline に設定します:

Blazor スプライン チャートのスタイル設定

他のシリーズの複合などのより多くの機能を備えたスプライン チャートが必要な場合は、以下に示すように、マーカー、マーカー ブラシ、マーカー アウトライン、シリーズ ブラシ、シリーズ アウトラインを構成できます。

IgbCategoryChart コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、CategoryChart.ChartType プロパティを Spline に設定します:

高度なタイプのスプライン チャート

次のセクションでは、簡略化された API を使用した IgbCategoryChart コントロールの代わりに IgbDataChart コントロールを使用して作成できる、より高度なタイプの Blazor スプライン チャートについて説明します。

Blazor 積層型スプライン チャート

以下の例に示すように、積層型スプライン チャートは、地域間で数年間に生成された再生可能電力の量など、時間の経過に伴う価値の変化を示すためによく使用されます。

IgbDataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgbStackedSplineSeries にバインドします:

Blazor 積層型 100% スプライン チャート

積層型 100 スプライン チャートは、Y 軸上の値の取り扱いを除いたすべての面で積層型スプライン チャートと同じです。データを直接表現するのでなく、積層型 100% スプライン チャートは、データ ポイント内のすべての値の合計の割合でデータを表します。以下の例は、タブレット、携帯電話、およびコンピューターを介した部門によるオンライン ショッピング トラフィックについて行われた調査を示しています。

IgbDataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgbStacked100SplineSeries にバインドします:

その他のリソース

関連するチャートタイプの詳細については、以下のトピックを参照してください。

• エリア チャート
• 折れ線チャート
• 極座標チャート
• ラジアル チャート
• 積層型チャート

API リファレンス

以下のテーブルは、上記のセクションで説明した API メンバーをリストします。