React スプライン チャート
Ignite UI for React スプライン チャートは、スプラインのスムーズなカーブに接続された点のコレクションとして描画されるカテゴリ チャートのグループに属しています。値は y 軸に表示され、カテゴリは x 軸に表示されます。スプライン チャートは時間毎のデータの変化や複数の項目を比較する場合に用いられ、プロットされた値の合計を表示することで全体に対するデータ間の関係も表します。スプライン チャートは、データ ポイントを接続する線がデータの表示を改善するためのスプライン補間とスムージング機能を持つこと以外のすべての面で折れ線チャートと同じです。
React スプライン チャートの例
次の例は、データをバインドし、chartType プロパティを Spline 列挙型に設定することにより、IgrCategoryChart コントロールで React スプライン チャートを作成する方法を示しています。
単一シリーズの React スプライン チャート
以下の例に示すように、スプライン チャートは、ヨーロッパで 2009 年以降の 10 年間の再生可能電力量など、値の経時変化を示すためによく使用されます。
IgrCategoryChart コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、chartType プロパティを Spline に設定します:
複数シリーズの React スプライン チャート
スプライン チャートを使用すると、複数のシリーズを組み合わせて、時間の経過とともにどのように変化するかを比較または確認できます。中国と米国のデータを含むデータ ソースにバインドするだけで、チャートは追加データに合わせて自動的に更新されます。
IgrCategoryChart コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、chartType プロパティを Spline に設定します:
React スプライン チャートのスタイル設定
他のシリーズの複合などのより多くの機能を備えたスプライン チャートが必要な場合は、以下に示すように、マーカー、マーカー ブラシ、マーカー アウトライン、シリーズ ブラシ、シリーズ アウトラインを構成できます。
IgrCategoryChart コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、chartType プロパティを Spline に設定します:
高度なタイプのスプライン チャート
次のセクションでは、簡略化された API を使用した IgrCategoryChart コントロールの代わりに IgrDataChart コントロールを使用して作成できる、より高度なタイプの React スプライン チャートについて説明します。
React 積層型スプライン チャート
以下の例に示すように、積層型スプライン チャートは、地域間で数年間に生成された再生可能電力の量など、時間の経過に伴う価値の変化を示すためによく使用されます。
IgrDataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgrStackedSplineSeries にバインドします:
React 積層型 100% スプライン チャート
積層型 100 スプライン チャートは、Y 軸上の値の取り扱いを除いたすべての面で積層型スプライン チャートと同じです。データを直接表現するのでなく、積層型 100% スプライン チャートは、データ ポイント内のすべての値の合計の割合でデータを表します。以下の例は、タブレット、携帯電話、およびコンピューターを介した部門によるオンライン ショッピング トラフィックについて行われた調査を示しています。
IgrDataChart コントロールでこのチャート タイプを作成するには、以下の例のように、データを IgrStacked100SplineSeries にバインドします:
その他のリソース
関連するチャートタイプの詳細については、以下のトピックを参照してください。
API リファレンス
以下のテーブルは、上記のセクションで説明した API メンバーをリストします。
| チャート タイプ | コントロール名 | API メンバー |
|---|---|---|
| スプライン | IgrCategoryChart |
chartType = Spline |
| 積層型スプライン | IgrDataChart |
IgrStackedSplineSeries |
| 積層型 100% スプライン | IgrDataChart |
IgrStacked100SplineSeries |