棒グラフ

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

使用例

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

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

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

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

(訳注: sandbox)

名前 説明
label String 凡例とツールチップに表示されるデータセットのラベル。
xAxisID String このデータセットをプロットするx軸のID。指定されていない場合、これは最初に見つかったx軸のIDになります。
yAxisID String このデータセットをプロットするy軸のID。指定されていない場合、これは最初に見つかったy軸のIDになります。
backgroundColor Color/Color[] 棒の塗りつぶし色。を参照してください。
borderColor Color/Color[] 棒の境界線の色。を参照してください。
borderWidth Number/Number[] バーの境界線の太さ(ピクセル単位)。
borderSkipped String 境界線を引かない辺。 詳細...を参照してください。(訳注: 機能しません。)
hoverBackgroundColor Color/Color[] マウスオーバー時の棒の塗りつぶし色。
hoverBorderColor Color/Color[] マウスオーバー時の棒の境界線の色。
hoverBorderWidth Number/Number[] マウスオーバー時の境界線の太さ。

除外する境界線

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

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

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

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

設定オプション

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

名前 初期値 説明
barPercentage Number 0.9 棒の幅のカテゴリ幅に対する割合。カテゴリ内に各棒が収まるためには、0から1でなければなりません。 1.0では、棒はカテゴリ幅と等しくなり、棒は互いに隣り合わせに配置されます。詳細...。(訳注: 棒が接し合うにはcategoryPercentage == 1.0であることも必要なようです。)
categoryPercentage Number 0.8 サンプル内にカテゴリが収まるためには、0から1でなければなりません。詳細...。(訳注: カテゴリ幅のサンプル幅に対する割合。1より大きい値も可能。)
barThickness Number 手動で各棒の幅をピクセル単位で設定します。設定されていない場合は、ベースサンプルの幅が自動的に計算され、重なり合わないで使用可能な幅がすべて使用されます。次に、棒は barPercentagecategoryPercentageを使ってサイズが決められます。
maxBarThickness Number 棒の太さの上限値。
gridLines.offsetGridLines Boolean true trueの場合、グリッド線はグリッド間隔の半分だけ左に移動し、棒はグリッド線の間に置かれることになります。 falseの場合、グリッド線は棒幅の中心に移動します。

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

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

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

名前 説明
stack String このデータセットが属するグループのID(積み上げに設定されたとき、各グループは別々のstackになります)

横棒グラフ

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

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

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

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

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

results matching ""

    No results matching ""