React 積層型チャート

Ignite UI for React 積層型チャートは、データ項目の複数の値を積層エリア/ポリゴン、棒、縦棒、折れ線、またはスプラインとして描画するチャートの特別なグループに属しています。。標準の積層型チャートはデータ項目の実際の値を描画しますが、積層型 100% チャートは値を合計値のパーセンテージとして描画します。

React 積層型チャートタイプ

次の例では、ドロップダウンを使用して、React IgrDataChart コントロールで使用可能なさまざまなタイプの積層型チャートをすべて切り替えることができます。

以下のセクションは Ignite UI for React 積層型チャートの個々のタイプを示します。

React 積層型エリアチャート

積層型エリアチャートは、線分で接続されたポイントのコレクションを使用して描画され、線の下のエリアが塗りつぶされ、互いの上に積層されます。積層型エリアチャートは、エリアチャートとすべて同じ要件に従いますが、唯一の違いは、網掛けエリアが互いに積層されていることです。

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

React 積層型 100 エリアチャート

このシリーズは、生産元に関連する国のエネルギー消費量など、時間の経過とともに変化する全体の一部を表す場合があります。このような場合積層されたすべての要素を均等に表すことをお勧めします。

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

React 積層型棒チャート

積層型棒チャート、または積層型棒グラフは、チャートの横棒にさまざまなサイズのフラグメントを表示することにより、さまざまなカテゴリのデータの構成を比較するために使用されるカテゴリチャートの一種です。各棒または積層フラグメントの長さは、その全体的な値に比例します。

積層型棒チャートは、データを表すデータポイントが水平方向に隣り合って積み重ねられ、データを視覚的にグループ化するという点で、棒チャートとは異なります。各積層は正の値と負の値の両方を含みます。すべての正の値は X 軸の正の側にグループ化され、すべての負の値は X 軸の負の側にグループ化されます。

積層型棒チャートのこの例では、数値の X 軸 (チャートの下部のラベル) とカテゴリの Y 軸 (チャートの左側のラベル) があります。IgrDataChart コントロールでこのチャートタイプを作成するには、以下の例のように、データを IgrStackedBarSeries にバインドします:

React 積層型 100% 棒チャート

React 積層型 100% 棒チャートは、X 軸 (チャートの下のラベル) の値の処理を除いて、すべての点で React 積層型棒チャートと同じです。データを直接表現するのでなく、積層型棒チャートは、データポイント内のすべての値の合計の割合でデータを表します。

積層型 100% 棒チャートのこの例では、Energy Product (エネルギー積) の値は、水平棒のフラグメント内のすべてのデータの 100% 値として表示されます。IgrDataChart コントロールでこのチャートタイプを作成するには、以下の例のように、データを IgrStacked100BarSeries にバインドします:

React 積層型縦棒チャート

積層型縦棒チャートは、シリーズが横ではなく上に表示されることを除いて、すべての面で縦棒チャートと同じです。積層型縦棒チャートは、シリーズ間の結果の比較を示すために使用されます。コレクションのそれぞれの積層フラグメントは各積層の視覚的な要素を表します。各積層は正の値と負の値の両方を含みます。正の値はいずれも Y 軸の正の側にグループ化され、負の値は Y 軸の負の側にグループ化されます。積層型縦棒チャートは積層型棒チャートと同じデータプロットの概念を使用していますが、データポイントは横の線 (X 軸) に沿ってではなく、縦の線 (Y 軸) に沿って積層されます。

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

React 積層型 100% 縦棒チャート

積層型 100% 縦棒チャートは、Y 軸上の値の取り扱いを除いたすべての面で積層型縦棒チャートと同じです。データを直接表現するのでなく、積層型 100% 縦棒チャートは、データポイント内のすべての値の合計の割合でデータを表します。

以下の例は、タブレット、携帯電話、およびコンピューターを介した部門によるオンラインショッピングトラフィックについて行われた調査を示しています。IgrDataChart コントロールでこのチャートタイプを作成するには、以下の例のように、データを IgrStacked100ColumnSeries にバインドします:

React 積層型折れ線チャート

積層型折れ線チャートは、地域間で数年間に生成された再生可能電力の量など、時間の経過に伴う価値の変化を示すためによく使用されます。IgrDataChart コントロールでこのチャートタイプを作成するには、以下の例のように、データを IgrStackedLineSeries にバインドします:

React 積層型 100% 折れ線チャート

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

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

React 積層型スプラインエリアチャート

積層型スプラインエリアチャートは、曲線スプラインセグメントで接続されたポイントのコレクションを使用して描画され、曲線スプラインの下の領域が塗りつぶされ、互いに重ねて表示されます。積層型スプラインエリアチャートは、エリアチャートとすべて同じ要件に従いますが、唯一の違いは、網掛けエリアが互いに積み重なっていることです。

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

React 積層型 100% スプラインエリアチャート

積層型 100% スプラインエリアチャートは、y 軸の値の処理を除いて、すべての点で積層型スプラインエリアチャートと同じです。データを直接表現するのでなく、積層型 100% スプラインエリアチャートは、特定のデータポイント内のすべての値の合計の割合でデータを表します。チャートは、時間の経過とともに変化する全体の一部を表す場合があります。たとえば、生産元に関連する国のエネルギー消費量。このような場合、積層されたすべての要素を均等に表すことをお勧めします。

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

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

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

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

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

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

その他のリソース

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

API リファレンス

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

チャートタイプ	コントロール名	API メンバー
積層型エリア	`IgrDataChart`	`IgrStackedAreaSeries`
積層型棒	`IgrDataChart`	`IgrStackedBarSeries`
積層型縦棒	`IgrDataChart`	`IgrStackedColumnSeries`
積層型折れ線	`IgrDataChart`	`IgrStackedLineSeries`
積層型スプライン	`IgrDataChart`	`IgrStackedSplineSeries`
積層型スプラインエリア	`IgrDataChart`	`IgrStackedSplineAreaSeries`
積層型 100% エリア	`IgrDataChart`	`IgrStacked100AreaSeries`
積層型 100% 棒	`IgrDataChart`	`IgrStacked100BarSeries`
積層型 100% 縦棒	`IgrDataChart`	`IgrStacked100ColumnSeries`
積層型 100% 折れ線	`IgrDataChart`	`IgrStacked100LineSeries`
積層型 100% スプライン	`IgrDataChart`	`IgrStacked100SplineSeries`
積層型 100% スプラインエリア	`IgrDataChart`	`IgrStacked100SplineAreaSeries`

React 積層型チャート