Chart.js - にほんご。

棒グラフ(Bar)

更新日: 2018-06-25

棒グラフ(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番目以降も同様です。

名称type説明
labelstring凡例とツールチップに表示するデータセットのラベル。
xAxisIDstringデータセットをプロットしたX軸のid。 未指定の場合は、最初のX軸のidになります。
yAxisIDstringデータセットをプロットしたY軸のid。 未指定の場合、最初のY軸のidになります。
backgroundColorcolor/color[]バーを塗りつぶす色。カラーを参照してください。
borderColorcolor/color[]枠線の色。カラーを参照してください。
borderWidthnumber/number[]枠線の太さ(px)。
borderSkippedstring枠線を表示しない「辺」。詳しくはこちら
hoverBackgroundColorcolor/color[]ホバー時の塗りつぶしの色。
hoverBorderColorcolor/color[]ホバー時の枠線の色。
hoverBorderWidthnumber/number[]ホバー時の枠線の太さ。

borderSkipped

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

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

  • bottom
  • left
  • top
  • right

設定オプション

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

名称type初期値説明
barPercentagenumber0.9バーごとの利用可能な太さの割合(0~1)。カテゴリの幅内である必要があります。 1.0の場合、カテゴリ全体の幅になり、バーが互いに隣り合います。 詳しくはこちら
categoryPercentagenumber0.8カテゴリーごとの利用可能な幅の割合(0~1)。サンプルの幅内である必要があります。 詳しくはこちら
barThicknessnumber各バーの幅を手動で設定します。 セットされていない場合、サンプルの幅は他のサンプルと重ならない範囲での最大幅になるように自動的に計算されます。 その後、barPercentagecategoryPercentageを使ってバーのサイズが設定されます。
maxBarThicknessnumberバーの幅がこの値より太くならないようになります。
gridLines.offsetGridLinesbooleantruetrueを設定した場合、バーはグリッドラインの中間になります。 グリッドラインは目盛線の半分ずつ左へずれます。 falseの場合、グリッドラインはバーの真ん中から右側にずれます。 詳しくはこちら

※こららの設定は軸設定(xAxesyAxes)内に設定すると適用されます。


offsetGridLines

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

この設定は軸設定で適用されます。 チャートに軸を追加した場合、追加した軸にそれぞれ設定する必要があります。

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

デフォルトオプション

通常、生成する全ての棒グラフに構成オプションを適用します。 グローバルオプションはChart.defaults.barに格納されます。 グローバルオプションを変更すると、変更後に生成されたチャートにのみ反映され、 すでに生成済みのチャートは変更されません。

barPercentage vs categoryPercentage

以下に、barPercentagecategoryPercentageの関係を示します。

// 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
            }]
        }
    }
});

データセットプロパティ

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

名称type説明
stackstringデータセットが含まれるグループのid。 (スタックされている場合、各グループは別々のスタックになります。)

Horizontal Bar Chart

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

使用例

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

設定オプション

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

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


© 2013 Chart.js is available under the MIT license

このコンテンツはChart.jsドキュメントを翻訳/改変したものです。