React 縦棒チャート

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

    React 縦棒チャートの例

    Ignite UI for React カテゴリ縦棒チャートは、複数のデータ ソースのデータ項目をカテゴリにグループ化し、それらを縦棒または長方形として描画します。値は Y 軸に表示され、カテゴリは X 軸に表示されます。

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

    縦棒チャートの推奨事項

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    React 縦棒チャートには、外観のスタイル設定と変更のための多くのオプションがあります。たとえば、以下のサンプルは、縦棒の外観を変更し、マーカー テンプレートを使用して、対応する列の上 (または下) に項目の値を表示する方法を示しています。

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

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

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

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

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

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

    React 積層型縦棒チャート

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

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

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

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

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

    React 範囲縦棒チャート

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

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

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

    React ラジアル縦棒チャート

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

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

    その他のリソース

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

    API メンバー

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

    チャート タイプ コントロール名 API メンバー
    縦棒 IgrCategoryChart chartType = IgrColumn
    ラジアル縦棒 IgrDataChart IgrRadialColumnSeries
    範囲縦棒 IgrDataChart IgrRangeColumnSeries
    積層型縦棒 IgrDataChart IgrStackedColumnSeries
    積層型 100% 縦棒 IgrDataChart IgrStacked100ColumnSeries
    ウォーターフォール IgrDataChart IgrWaterfallSeries