Angular 棒チャート

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

Angular 棒チャートの例

次の例に示すように、データソースを複数の IgxBarSeriesComponent にバインドすることにより、IgxDataChartComponent コントロールに Angular 棒チャートを作成できます。

棒チャートの推奨事項

Angular 棒チャートはプロジェクトに適していますか?

Angular 棒チャートには、データまたはデータを使用して正しいストーリーを伝える方法に基づいたいくつかの種類が含まれています:

グループ化された棒チャート
積層型棒チャート
極座標型棒チャート
積層型 100 棒チャート

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

チャートを選択するための一般的なユースケースはいくつかあります:

時間の経過に伴う傾向またはデータのカテゴリの数値の変化を表示したい場合
1 つ以上のデータ系列のデータ値を比較したい場合
部分と全体の比較を表示したい場合
カテゴリの上位または下位のパーセンテージを表示したい場合
サブカテゴリにグループ化された複数のデータポイントの分析 (積層型棒)

これらのユースケースは、一般的に次のシナリオで使用されます:

セールスマネージメント
インベントリマネージメント
株価チャート
数値または時系列値を比較する任意の文字列値

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

数値軸を 0 から開始します。
棒には単色を使用します。
各棒を区切るスペースが棒自体の幅の 1/2 であることを確認します。
ランキング、または順序付けられたカテゴリ (項目) の比較は、昇順または降順でソートされていることを確認します。
読みやすくするために、Y 軸 (チャートの左側のラベル) のカテゴリ値を右揃えにします。

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

データが多すぎるため、Y 軸がスペースに収まらないか、判読できません。
詳細な時系列分析が必要なときは、時系列を含む折れ線チャートを検討してください。

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

データソースはデータ項目の配列またはリストである必要があります。
データソースに少なくとも 1 つのデータ項目を含む必要があります。
リストには、少なくとも 1 つのデータ列 (文字列または日時) が含まれている必要があります。
リストには、少なくとも 1 つの数値データ列が含まれている必要があります。

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

棒チャートは、カテゴリシリーズのグループに属し、チャートの左から右へデータポイント値に向かって延びる四角形のコレクションを使用して描画されます。IgxDataChartComponent コントロールでこのチャートタイプを作成するには、以下の例のように、データを IgxBarSeriesComponent にバインドします:

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

棒チャートは、比較のためにカテゴリごとに複数の棒を描画できます。この例では、棒チャートは人気のある映画フランチャイズの興行収益を比較しています。IgxDataChartComponent コントロールでこのチャートタイプを作成するには、以下の例のように、データを複数の IgxBarSeriesComponent にバインドします:

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

棒チャートのスタイルを設定でき、パーセント比較を示すために各棒に注釈値を使用できます。IgxDataChartComponent コントロールでこのチャートタイプを作成するには、以下の例のように、データを IgxBarSeriesComponent にバインドし、IgxCalloutLayerComponent を追加します。

Angular 積層型棒チャート

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

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

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

Angular 積層型 100% 棒チャート

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

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

その他のリソース

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

API リファレンス

以下は、上記のセクションで説明されている API メンバーのリストです。