棒グラフ

棒グラフは、データ値を縦棒で表示する方法を提供します。トレンドデータを表示するとか、複数のデータセットを並べて比較するときに使用されます。

使用例

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

データセットのプロパティ

棒グラフでは、各データセットに対していくつかのプロパティを指定できます。 これらは、特定のデータセットの表示プロパティを設定するために使用されます。 例えば、バーの色は一般にこの方法で設定されます。

一部のプロパティは配列として指定できます。プロパティに配列値が設定されている場合、最初の値は最初の棒に適用され、2番目の値は2番目の棒に適用されます。

(訳注: sandbox)

除外する境界線

borderSkipped設定は、塗りつぶしの底辺に棒の境界線を描かないようにするために使用されます。一般に、これは、棒グラフから派生したチャートタイプを作成する場合を除いて、変更する必要はありません。

(訳注: data.datasets.borderSkippedは機能しません(Issue3293)。代わりに、options.elements.rectangle.borderSkippedを使用することができます。 4辺のうち1辺のみ除外することが出来ます。2辺のみ、1辺のみの描画を指定することは出来ません。)

選択肢は次のとおりです。

• 'bottom'
• 'left'
• 'top'
• 'right'

設定オプション

棒グラフには、以下の設定オプションが定義されています。 このオプションは、グローバルチャート設定オプションChart.defaults.globalとマージされ、チャートに渡されるオプションを形成します。

barThickness

このオプションが数値の場合は、各棒の幅に適用されます（ピクセル単位）。これが指定されると、barPercentageとcategoryPercentageは無視されます。 flexに設定した場合、ベースサンプル幅は、前後のサンプルに基づいて自動的に計算され、重なり合わない最大幅を取ります。 次に、棒は barPercentageとcategoryPercentageを使ってサイズが決められます。この２つのPercentageオプションが1の場合は隙間ができません。このflexモードでは、データが均等の間隔で置かれていないと、幅の異なる棒が生成されます。 このオプションが設定されていなければ（デフォルト）、棒が重なり合わない最小の間隔を使ってベースサンプル幅が計算され、棒はbarPercentageとcategoryPercentageを使ってサイズが決められます。このモードでは、常に同じ幅の棒が生成されます。

offsetGridLines

trueの場合、グリッド線はグリッド間隔の半分だけ左に移動し、棒はグリッド線の間に置かれることになります。 falseの場合、グリッド線は棒幅の中心に移動します。デフォルトは、カテゴリスケールの棒グラフではtrueに設定され、他のスケールや他のグラフタイプではfalseに設定されています。

この設定は軸設定に適用されます。 グラフに軸が追加されている場合は、新しい軸ごとにこの設定を行う必要があります。

options = {
    scales: {
        xAxes: [{
            gridLines: {
                offsetGridLines: true
            }
        }]
    }
}

デフォルトオプション

作成されるすべての棒グラフに構成オプションを適用したいと思うのが普通です。棒グラフのグローバル設定は、Chart.defaults.barに格納されています。グローバルオプションを変更すると、変更後に作成されたチャートにのみ影響します。既存のグラフは変更されません。

barPercentage vs categoryPercentage

以下に、barPercentageのオプションとcategoryPercentageのオプションとの関係を示します。

// categoryPercentage: 1.0
// barPercentage: 1.0
Bar:        | 1.0 | 1.0 |
Category:   |    1.0    |
Sample:     |===========|

// categoryPercentage: 1.0
// barPercentage: 0.5
Bar:          |.5|  |.5|
Category:  |      1.0     |
Sample:    |==============|

// categoryPercentage: 0.5
// barPercentage: 1.0
Bar:            |1.||1.|
Category:       |  .5  |
Sample:     |==============|

データ構造

棒グラフのデータセットの dataプロパティは、数値の配列として指定されます。データ配列の各点は、x軸上の同じインデックスにあるラベルに対応します。

data: [20, 10]

時間スケールを使用する場合、データセットを x/y座標として指定することもできます。

data: [{x:'2016-12-25', y:20}, {x:'2016-12-26', y:10}]

積み上げ棒グラフ

棒グラフは、X軸およびY軸の積み上げ設定(staked)を有効にすることにより、積み上げ棒グラフとして構成することができます。 積み上げ棒グラフを使用すると、1つのデータ系列がいくつかの小さな部分で構成されていることを示すことができます。

var stackedBar = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});

データセットのプロパティ

次のデータセットプロパティは積み上げ棒グラフに固有のものです。

横棒グラフ

横棒グラフ(horizontal bar chart)は、縦棒グラフの別の形です。 トレンドデータを表示するとか、複数のデータセットを並べて比較するときに使用されます。

例

var myBarChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    options: options
});

横棒グラフ設定オプション

横棒グラフの設定オプションは棒グラフと同じです。 ただし、棒グラフのx軸に指定されたオプションは、横棒グラフのy軸に適用されます。

横棒グラフの設定の初期値は Chart.defaults.horizontalBarで指定されています。