棒グラフ(Bar)

棒グラフ(BarChart)は、値を縦棒で表示します。 トレンドデータの表示や、複数のデータを並べて比較する際によく使われます。

使用例

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

データセットプロパティ

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

new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      backgroundColor:[
        "rgba(255, 99, 132, 0.2)",
        "rgba(255, 159, 64, 0.2)",
        "rgba(255, 205, 86, 0.2)",
        "rgba(75, 192, 192, 0.2)",
        "rgba(54, 162, 235, 0.2)",
        "rgba(153, 102, 255, 0.2)",
        "rgba(201, 203, 207, 0.2)"
      ],
      borderColor: [
        "rgb(255, 99, 132)",
        "rgb(255, 159, 64)",
        "rgb(255, 205, 86)",
        "rgb(75, 192, 192)",
        "rgb(54, 162, 235)",
        "rgb(153, 102, 255)",
        "rgb(201, 203, 207)"
      ],
    }]
  },
});

いくつかのプロパティは配列を指定することができます。 これらに配列が指定されている場合、最初の値は、最初の棒データとして適用され、 2番目の値は、2番目の棒データとして適用され、3番目以降も同様です。

全般

スタイル

各バーのスタイルは以下のプロパティで指定することができます。

undefinedの場合、関連するelements.rectangle.*にオプションにフォールバックします。

borderSkipped

この設定はバーの底に枠線を描写させないために使用します。 通常、棒グラフから派生したチャートを生成しない限り、この設定を変更する必要はありません。

以下を指定することができます。

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

注意：垂直バーチャートで負の値のバーの場合、topとbottomが反転します。 水平バーチャートのleftとrightについても同様です。

borderWidth

この値が数値の場合、borderSkippedを除いた四角形の全ての辺(left, top, right, bottom)に適用されます。 この値がオブジェクトの場合、leftプロパティは左辺のボーダー幅を表します。 同様にright、top、bottomの各プロパティも指定することができます。 未指定の辺とborderSkippedが指定された辺は無視されます。

インタラクション

各バーのインタラクションは以下のプロパティで指定することができます。

undefinedの場合、関連するelements.rectangle.*にオプションにフォールバックします。

設定オプション

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

使用例

data: {
    datasets: [{
        barPercentage: 0.5,
        barThickness: 6,
        maxBarThickness: 8,
        minBarLength: 2,
        data: [10, 20, 30, 40, 50, 60, 70]
    }]
};

barThickness

この値が数値の場合、その値が各バーの幅(px)になります。 この値が指定された場合、barPercentageとcategoryPercentageは無視されます。

'flex'を指定すると、基本となるバーの幅は前後のバーに合わせて自動的に計算されるため、 重なることなく使用可能な最大幅を取ります。 その後、barPercentageとcategoryPercentageを使ってバーのサイズを設定します。 ～Percentageに1を指定した場合、隙間無く表示されます。 データが等間隔でない場合は、幅が異なるバーを生成します。

未指定の場合(初期値)、基本となるバーの幅はバーが重ならない最小間隔で計算され、 barPercentageとcategoryPercentageを使ってバーのサイズを設定します。

スケールオプション

棒グラフは以下のslaceオプションから一意のデフォルト値を設定します。

使用例

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

offsetGridLines

trueを設定した場合、バーがグリッド線の間に入ります。 グリッドラインは目盛線間隔の半分だけ左にずれて表示されます。 falseの場合、グリッドラインはバーの真ん中から右側にずれることになります。 棒グラフではデフォルトでtrueが設定されており、 それ以外のチャートではfalseが設定されています。

デフォルトオプション

通常、生成する全ての棒グラフに構成オプションを適用します。 グローバルオプションは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軸設定のスタッキングを有効に変更します。 積み上げ棒グラフを使用することで、1つのデータ系列が複数の小さな要素で構成されていることを示すことができます。

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

データセットプロパティ

以下のプロパティは積み上げ棒グラフ特有のプロパティです。

Horizontal Bar Chart

横棒グラフ(HrizontalBarChart)は、棒グラフのバリエーションの一つです。 トレンドデータの表示や、複数のデータを並べて比較する際によく使われます。

使用例

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

設定オプション

横棒グラフには棒グラフと同じ設定オプションを指定することができます。 しかし、棒グラフのX軸に指定されたオプションは、横棒グラフのY軸に適用されます。

デフォルトの横棒グラフ設定はChart.defaults.horizontalBarで指定されています。