Angular 縦棒チャート

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

Angular 縦棒チャートの例

次の例に示すように、データをバインドし、chartType を Column 列挙型に設定することで、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`