> For the complete documentation index, see [llms.txt](https://docs.dashcomb.com/dashcomb-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dashcomb.com/dashcomb-help-center/ide/bi-component/gurafu.md).

# 棒グラフ

棒グラフは、データの比較の際によく用いられます。

Dachcombが提供している棒グラフコンポ―ネントは、管理画面の用途に合わせて、グラフの表現を変えるための機能を備えています。

<figure><img src="/files/r5y2gBbGWhnDwZiFu54r" alt=""><figcaption></figcaption></figure>

## プロパティ

棒グラフコンポーネントには、以下のプロパティが含まれています。

### 共通 <a href="#common" id="common"></a>

配置された棒グラフコンポーネントをクリックするとプロパティパネルが表示されます。

<figure><img src="/files/WVbfYb6fCv80uFBS42CB" alt=""><figcaption></figcaption></figure>

#### **オブジェクト**

棒グラフオブジェクトの変数名です。棒グラフをドラッグ＆ドロップすると、そのオブジェクトが自動的に `bargraph1`、`bargraph2`... と名付けられます。

ここで設定した変数名は、構文 `{{オブジェクト名.プロパティ}}` でオブジェクトを参照するために利用できます。

（例）`{{`bargraph1`.hidden}}` で `bargraph1` の表示状態の真偽値を取得することができます。

利用できるオブジェクトとプロパティは、[インスペクターメニュー](/dashcomb-help-center/ide/region/inspector-region.md) で確認できます。

#### 非表示

トグルスイッチをONにすると、棒グラフが非表示になります。

### データ <a href="#data" id="data"></a>

#### ソースデータ

棒グラフの描画に用いるデータセットです。ソースデータの初期値は、以下のような配列です。

```json
[
  {
    "index": 1,
    "value": 10
  },
  {
    "index": 2,
    "value": 20
  },
  {
    "index": 3,
    "value": 30
  },
  {
    "index": 4,
    "value": 40
  }
]
```

ソースデータに含まれるオブジェクトの最初のプロパティは、グラフのデータラベルとして扱われます。2つ目以降のプロパティは、棒グラフの値として扱われます。

{% hint style="info" %}
ひとつのオブジェクトに3つ以上のプロパティを持つオブジェクトが渡された場合、オブジェクトに含まれる値で複数の棒グラフをひとまとまりにして描画します。
{% endhint %}

#### 開始番号

ソースデータの配列から、グラフの描画に用いる最初のインデックス番号を指定します。ここで指定したインデックス番号から、棒グラフの描画を開始します。指定しない場合は、デフォルトで1が設定されます。

{% hint style="info" %}
開始番号は、1から数えます。JavaScript上では、配列のインデックス番号は0から始まるので、値が1だけずれることに注意してください。
{% endhint %}

#### 最大数

描画する棒グラフの最大数を指定します。指定しない場合は、ソースデータに含まれるすべてのデータがグラフに描画されます。

#### 値タイプ

棒グラフに描画する値のデータ種別を設定します。データソースのオブジェクトの`value` プロパティが対象となります。<img src="/files/EedPsLhADJoJcqGGVFHZ" alt="" data-size="line">をクリックすると、設定パネルが開きます。

<table><thead><tr><th width="180">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>データ種別</td><td>描画するデータの型を指定します。Numberのみ指定できます。</td><td></td></tr><tr><td>小数桁数</td><td>描画する小数桁数を数値で指定します。指定した桁数より多くの桁数が入力された場合、値は四捨五入されます。</td><td></td></tr><tr><td>桁区切り記号表示</td><td>トグルスイッチをONにすると、値に桁区切り記号が表示されます。</td><td></td></tr></tbody></table>

#### ラベルタイプ

棒グラフのラベル名のデータ種別を設定します。データソースのオブジェクトの`index` プロパティが対象となります。<img src="/files/EedPsLhADJoJcqGGVFHZ" alt="" data-size="line">をクリックすると、設定パネルが開きます。

選択したデータ種別によって、設定できる項目が異なります。

1. Number

<table><thead><tr><th width="180">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>小数桁数</td><td>描画する小数桁数を数値で指定します。指定した桁数より多くの桁数が入力された場合、値は四捨五入されます。</td><td></td></tr><tr><td>桁区切り記号表示</td><td>トグルスイッチをONにすると、値に桁区切り記号が表示されます。</td><td></td></tr></tbody></table>

2. Date/Time

<table><thead><tr><th width="180">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>Format</td><td>表示する日付形式を設定します。</td><td></td></tr></tbody></table>

3. String

<table><thead><tr><th width="180">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>Max Length</td><td>描画する最大文字数を指定します。指定した文字数を超えた場合は、先頭から指定の文字数までがグラフに描画されます。</td><td></td></tr></tbody></table>

#### ツールチップ表示

トグルスイッチをONにすると、グラフにマウスを載せた際にラベルと値をボックスに表示します。

#### ダウンロード表示

トグルスイッチをONにすると、描画された棒グラフを画像としてダウンロードするボタンが表示されます。

### 棒グラフ設定

棒グラフの表示設定を細かく調整できます。

<figure><img src="/files/oTWQKOw4ligJjt75p3Ba" alt=""><figcaption></figcaption></figure>

#### X軸定義

「X軸定義」ボタンをクリックすると、設定パネルが開きます。

以下の項目を設定できます。

<table><thead><tr><th width="204">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>軸名表示</td><td>トグルスイッチをONにすると、X軸の名称を表示します。</td><td></td></tr><tr><td>データラベル表示</td><td>トグルスイッチをONにすると、データラベルを表示します。</td><td></td></tr><tr><td>データラベルの間隔</td><td>データラベル表示をONにしている場合に設定できます。データラベルを表示するグラフの間隔を数値で設定します。0の場合、すべての棒グラフにデータラベルを表示します。</td><td></td></tr><tr><td>軸線表示</td><td>トグルスイッチをONにすると、X軸を直線で描画します。</td><td></td></tr><tr><td>目盛り表示</td><td>トグルスイッチをONにすると、X軸に目盛り線を表示します。</td><td></td></tr><tr><td>ラベルに目盛りを合わせる</td><td>目盛り表示をONにしている場合に設定できます。トグルスイッチをONにすると、データラベルの位置に目盛りを表示します。</td><td></td></tr><tr><td>分割線表示</td><td>トグルスイッチをONにすると、棒グラフの間に直線を表示します。</td><td></td></tr><tr><td>分割線の色</td><td>分割線表示をONにしている場合に設定できます。分割線の色を選択できます。</td><td></td></tr></tbody></table>

#### Y軸定義

「Y軸定義」ボタンをクリックすると、設定パネルが開きます。

以下の項目を設定できます。

<table><thead><tr><th width="204">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>軸名表示</td><td>トグルスイッチをONにすると、Y軸の名称を表示します。</td><td></td></tr><tr><td>データラベル表示</td><td>トグルスイッチをONにすると、データラベルを表示します。</td><td></td></tr><tr><td>軸線表示</td><td>トグルスイッチをONにすると、Y軸を直線で描画します。</td><td></td></tr><tr><td>目盛り表示</td><td>トグルスイッチをONにすると、Y軸に目盛り線を表示します。</td><td></td></tr><tr><td>分割線表示</td><td>トグルスイッチをONにすると、Y軸の間に等間隔で直線を表示します。</td><td></td></tr><tr><td>分割線の色</td><td>分割線表示をONにしている場合に設定できます。分割線の色を選択できます。</td><td></td></tr></tbody></table>

#### 展開方向

棒グラフが展開する方向を指定します。縦方向、横方向から選択します。

#### 軸レイアウト

棒グラフの軸線の描画位置を指定します。以下の4つから選択します。

1. X軸をグラフの下部、Y軸をグラフの左に描画する
2. X軸をグラフの上部、Y軸をグラフの左に描画する
3. X軸をグラフの上部、Y軸をグラフの右に描画する
4. X軸をグラフの下部、Y軸をグラフの右に描画する

#### データ順序制御

トグルスイッチをONにすると、X軸とY軸の増加方向を反転させることができます。

以下の項目を設定できます。

<table><thead><tr><th width="204">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>X-データ順序逆転</td><td>トグルスイッチをONにすると、X軸の原点を右端に配置し、左方向に値が増加するように表示します。</td><td></td></tr><tr><td>Y-データ順序逆転</td><td>トグルスイッチをONにすると、X軸の原点を上端に配置し、下方向に値が増加するように表示します。</td><td></td></tr></tbody></table>

#### データカラー

棒グラフの色を、データシリーズごとに設定できます。

#### 棒の背景

トグルスイッチをONにすると、グラフ軸上で棒が描画されない部分の色を指定できます。

#### 値表示

トグルスイッチをONにすると、グラフの値を表示します。

表示する位置は、グラフの上、グラフの中央、グラフの下部から選択します。

### 外観

<figure><img src="/files/QIeEoKYsqAoPQkJAUWQk" alt=""><figcaption></figcaption></figure>

#### 高さ

グラフを表示する高さを数値で指定します。

#### 凡例表示

トグルスイッチをONにすると、棒グラフのラベル名とグラフの色を凡例として表示します。

以下の項目で表示を調整できます。

<table><thead><tr><th width="133">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>表示位置</td><td>凡例を表示する位置を指定できます。上、下、右、左 から選択します。</td><td></td></tr><tr><td>整列</td><td>凡例の行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。</td><td></td></tr></tbody></table>

#### タイトル表示

トグルスイッチをONにすると、棒グラフのタイトルを表示します。

以下の項目で表示を調整できます。

<table><thead><tr><th width="133">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>タイトル</td><td>表示するタイトルを入力します。</td><td></td></tr><tr><td>位置</td><td>タイトルを表示する位置を指定できます。上、下から選択します。</td><td></td></tr><tr><td>整列</td><td>タイトルの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。</td><td></td></tr></tbody></table>