#棒グラフ

棒グラフは、データ値を縦棒で表示する方法を提供します。傾向データを表示したり、複数のデータセットを並べて比較したりするために使用されることがあります。

const config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
};

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40],
    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)'
    ],
    borderWidth: 1
  }]
};

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

名前空間:

• data.datasets[index]- このデータセットのみのオプション
• options.datasets.bar- すべての棒データセットのオプション
• options.elements.bar- すべてのオプションバー要素
• options- チャート全体のオプション

棒グラフを使用すると、データセットごとに多数のプロパティを指定できます。 これらは、特定のデータセットの表示プロパティを設定するために使用されます。例えば、 バーの色は通常このように設定されます。 だけdataオプションはデータセット名前空間で指定する必要があります。

これらすべての値がundefined、で説明されているスコープにフォールバックします。オプションの解決策

#データセット構成の例

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

#全般的

#スタイリング

各バーのスタイルは、次のプロパティで制御できます。

これらすべての値がundefined、関連付けられたものへのフォールバックelements.bar.*オプション。

#ボーダースキップされました

この設定は、塗りつぶしの基部にバー ストロークを描画しないようにするか、境界線の半径を無効にするために使用されます。 一般に、グラフ タイプを作成する場合を除き、これを変更する必要はありません。 棒グラフから派生したものです。

オプションは次のとおりです。

• 'start'
• 'end'
• 'middle'(積み上げバーでのみ有効: バー間の境界線はスキップされます)
• 'bottom'
• 'left'
• 'top'
• 'right'
• false(国境を越えないでください)
• true(すべての境界線をスキップ)

#境界線の幅

この値が数値の場合、長方形のすべての辺 (左、上、右、下) に適用されます。borderSkipped。この値がオブジェクトの場合、leftプロパティは左側の境界線の幅を定義します。同様に、right、top、 とbottomプロパティも指定できます。省略された境界線とborderSkippedスキップされます。

#境界半径

この値が数値の場合、四角形のすべての角 (topLeft、topRight、bottomLeft、bottomRight) に適用されます (ただし、長方形に接する角は除きます)。borderSkipped。この値がオブジェクトの場合、topLeftプロパティは、左上隅の境界線の半径を定義します。同様に、topRight、bottomLeft、 とbottomRightプロパティも指定できます。省略されたコーナーと接触するコーナーborderSkippedスキップされます。たとえば、top境界線がスキップされ、コーナーの境界線の半径topLeftとtopRightもスキップされます。

#インフレ金額

このオプションを使用すると、バーの描画に使用される四角形を膨張させることができます。これは、次の場合にバー間のアーティファクトを非表示にするために使用できます。barPercentage*categoryPercentageは 1 です。デフォルト値は'auto'ほとんどの場合、機能するはずです。

#インタラクション

各バーとの相互作用は、次のプロパティで制御できます。

これらすべての値がundefined、関連付けられたものへのフォールバックelements.bar.*オプション。

#バーパーセンテージ

各バーがカテゴリの幅内に収まる使用可能な幅のパーセント (0 ～ 1)。 1.0 はカテゴリ全体の幅を取り、バーを互いに隣接して配置します。もっと...

#カテゴリパーセンテージ

各カテゴリの利用可能な幅のパーセント (0 ～ 1) がサンプル幅内に収まる必要があります。もっと...

#バーの厚さ

この値が数値の場合、各バーの幅にピクセル単位で適用されます。これが施行されると、barPercentageとcategoryPercentage無視されます。

に設定されている場合'flex'の場合、基本サンプル幅は前後のサンプルに基づいて自動的に計算され、重複することなく利用可能な幅全体が取得されます。次に、バーのサイズを次のように設定します。barPercentageとcategoryPercentage。パーセンテージ オプションが 1 の場合、ギャップはありません。このモードでは、データが等間隔でない場合に、異なる幅のバーが生成されます。

設定されていない場合 (デフォルト)、ベースのサンプル幅はバーの重なりを防ぐ最小の間隔を使用して計算され、バーのサイズは以下を使用して決定されます。barPercentageとcategoryPercentage。このモードでは、常に同じサイズのバーが生成されます。

#最大バーの厚さ

バーのサイズがこれより太くならないようにこれを設定します。

#スケール構成

棒グラフは、関連する構成から次の構成に固有のデフォルト値を設定します。scaleオプション:

#スケール構成例

options = {
    scales: {
        x: {
            grid: {
              offset: true
            }
        }
    }
};

#グリッド線のオフセット

true の場合、特定のデータ ポイントのバーがグリッド線の間に収まります。グリッド線は、グリッド線間のスペースである目盛り間隔の半分だけ左に移動します。 false の場合、グリッド線はバーの中央を真下に移動します。これは、棒グラフのカテゴリ スケールでは true に設定されますが、他のスケールまたはグラフ タイプではデフォルトで false に設定されます。

#デフォルトのオプション

作成されたすべての棒グラフに構成設定を適用することが一般的です。グローバル棒グラフ設定は次の場所に保存されます。Chart.overrides.bar。グローバル オプションを変更すると、変更後に作成されたグラフにのみ影響します。既存のチャートは変更されません。

#barパーセンテージとカテゴリパーセンテージ

以下に、バーのパーセンテージ オプションとカテゴリのパーセンテージ オプションの関係を示します。

// 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.0||1.0|
Category:        |   .5   |
Sample:     |==================|

#データ構造

サポートされているすべてのデータ構造棒グラフで使用できます。

#積み上げ棒グラフ

X 軸と Y 軸の設定を変更して積み上げを有効にすることで、棒グラフを積み上げ棒グラフに構成できます。積み上げ棒グラフを使用すると、1 つのデータ系列が多数の小さな部分からどのように構成されているかを示すことができます。

const stackedBar = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        scales: {
            x: {
                stacked: true
            },
            y: {
                stacked: true
            }
        }
    }
});

#横棒グラフ

水平棒グラフは、垂直棒グラフのバリエーションです。傾向データを表示したり、複数のデータセットを並べて比較したりするために使用されることがあります。 これを達成するには、indexAxisオプションオブジェクトのプロパティを'y'。 このプロパティのデフォルトは次のとおりです'x'したがって、垂直バーが表示されます。

const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
  }
};

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    axis: 'y',
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    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)'
    ],
    borderWidth: 1
  }]
};

#横棒グラフの構成オプション

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

#内部データ形式

{x, y, _custom}どこ_custom積み上げ棒のプロパティを定義するオプションのオブジェクトです。{start, end, barStart, barEnd, min, max}。startとendは入力値です。この二つが繰り返されるのは、barStart(原点に近い)、barEnd(原点からさらに遠い)、minとmax。