Angular 縦棒チャート

    Ignite UI for Angular 縦棒チャート、縦棒グラフ、または垂直棒チャートは、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、幅は同じで高さが異なる縦棒でエンコードされたデータによってすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらの縦棒は、チャートの下から上へデータ ポイント値に向かって伸びています。縦棒チャートは棒チャートと非常によく似ていますが、縦棒チャートは垂直方向 (上下) で描画され、棒チャートは水平方向 (左から右) または時計回りに 90 度回転します。

    Angular 縦棒チャートの例

    次の例に示すように、データをバインドし、chartTypeColumn 列挙型に設定することで、IgxCategoryChartComponent コントロールに Angular 縦棒チャートを作成できます。

    縦棒チャートの推奨事項

    縦棒チャートのユース ケース

    縦棒チャートにはいくつかのユース ケースがあります:

    • 関連するカテゴリのデータ値を比較する必要がある場合。
    • 一定期間のデータを比較する必要がある場合。
    • 同じデータ セットに正の値だけでなく負の値も表示する必要がある場合。
    • パン、ズーム、ドリルダウンなどのチャート操作に適した大容量のデータセットを使用する場合。

    縦棒チャートのベスト プラクティス:

    • データ比較が正確になるように Y 軸 (左軸または右軸) を常に 0 から開始する。
    • 時系列データを左から右へ並べ替える。

    以下の場合に縦棒チャートを使用しないでください:

    • 多くの (10 または 12 以上) シリーズのデータがある場合。チャートが読みやすいことを確認する必要があります。

    縦棒チャートのデータ構造:

    • データ モデルには少なくとも 1 つの数値プロパティを含む必要があります。
    • データ モデルにはラベルのためのオプションの文字列または日時プロパティを含むことができます。
    • データ ソースに少なくとも 1 つのデータ項目を含む必要があります。

    単一シリーズの Angular 縦棒チャート

    縦棒シリーズは、カテゴリ シリーズのグループに属し、チャートの下から上へデータ ポイント値に向かって延びる四角形のコレクションを使用して描画されます。

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

    複数シリーズの Angular 縦棒チャート

    縦棒チャートは、比較のためにカテゴリごとに複数の列を描画できます。IgxCategoryChartComponent コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、chartType プロパティを Column 値に設定します:

    Angular 縦棒チャートのスタイル設定

    Angular 縦棒チャートには、外観のスタイル設定と変更のための多くのオプションがあります。

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

    高度なタイプの縦棒チャート

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

    Angular ウォーターフォール チャート

    ウォーターフォール チャートはカテゴリ チャートのグループに属し、連続するデータポイント間の差を示す垂直列のコレクションを使用して描画されます。値の正/負の変化を区別するため、列は色分けされます。ウォーターフォール チャートは、外観が範囲縦棒チャートに似ていますが、各データ ポイントに必要な数値データ列は 2 つでなく 1 つのみです。

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

    Angular 積層型縦棒チャート

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

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

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

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

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

    Angular 範囲縦棒チャート

    Ignite UI for Angular 範囲縦棒チャートは、範囲チャートのグループに属し、従来のカテゴリ縦棒チャートのように下から伸びるのではなく、チャートのプロット領域の中央に表示できる垂直の長方形を使用して描画されます。このタイプのシリーズは、同じデータ ポイントの低い値と高い値の間の変化量を強調します一定期間、または複数の項目を比較します。範囲値は Y 軸に表示され、カテゴリは X 軸に表示されます。

    範囲縦棒チャートは、範囲が塗りつぶされた領域ではなく垂直柱の集まりで表されること以外は範囲エリア チャートと同じです。

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

    Angular ラジアル縦棒チャート

    ラジアル縦棒チャートは、ラジアル チャートのグループに属し、チャートの中心からデータ ポイントの位置に向かって伸びる長方形のコレクションを使用して描画されます。これはカテゴリ縦棒チャートと同じデータ プロットの概念を使用していますが、データ ポイントを横の線に並べるのではなく、データ ポイントを円でラップします。

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

    その他のリソース

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

    API リファレンス

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

    チャート タイプ コントロール名 API メンバー
    縦棒 IgxCategoryChartComponent chartType = Column
    ラジアル縦棒 IgxDataChartComponent IgxRadialColumnSeriesComponent
    範囲縦棒 IgxDataChartComponent IgxRangeColumnSeriesComponent
    積層型縦棒 IgxDataChartComponent IgxStackedColumnSeriesComponent
    積層型 100% 縦棒 IgxDataChartComponent IgxStacked100ColumnSeriesComponent
    ウォーターフォール IgxDataChartComponent IgxWaterfallSeriesComponent