Angular 積層型チャート

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

    Angular 積層型チャート タイプ

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

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

    Angular 積層型エリア チャート

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

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

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

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

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

    Angular 積層型棒チャート

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

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

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

    Angular 積層型 100% 棒チャート

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

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

    Angular 積層型縦棒チャート

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

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

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

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

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

    Angular 積層型折れ線チャート

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    その他のリソース

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

    API リファレンス

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

    チャート タイプ コントロール名 API メンバー
    積層型エリア IgxDataChartComponent IgxStackedAreaSeriesComponent
    積層型棒 IgxDataChartComponent IgxStackedBarSeriesComponent
    積層型縦棒 IgxDataChartComponent IgxStackedColumnSeriesComponent
    積層型折れ線 IgxDataChartComponent IgxStackedLineSeriesComponent
    積層型スプライン IgxDataChartComponent IgxStackedSplineSeriesComponent
    積層型スプライン エリア IgxDataChartComponent IgxStackedSplineAreaSeriesComponent
    積層型 100% エリア IgxDataChartComponent IgxStacked100AreaSeriesComponent
    積層型 100% 棒 IgxDataChartComponent IgxStacked100BarSeriesComponent
    積層型 100% 縦棒 IgxDataChartComponent IgxStacked100ColumnSeriesComponent
    積層型 100% 折れ線 IgxDataChartComponent IgxStacked100LineSeriesComponent
    積層型 100% スプライン IgxDataChartComponent IgxStacked100SplineSeriesComponent
    積層型 100% スプライン エリア IgxDataChartComponent IgxStacked100SplineAreaSeriesComponent