# 円グラフ

円グラフは、データの割合構成を確認するためによく用いられます。

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

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-f1378fef575c222ea8a142c3c78928deff5dc0ac%2FBI%20Component%EF%BC%9A%E5%86%86%E3%82%B0%E3%83%A9%E3%83%95_01.png?alt=media" alt=""><figcaption></figcaption></figure>

## プロパティ

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

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

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

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-7389e4e15fa4cceff2941b20a0b455adfd28f8fe%2FBI%20Component%EF%BC%9A%E5%86%86%E3%82%B0%E3%83%A9%E3%83%95_02.png?alt=media" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

#### 非表示

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

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

#### ソースデータ

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

```json
[
  {
    "index": "Data1",
    "value": 10
  },
  {
    "index": "Data2",
    "value": 20
  },
  {
    "index": "Data3",
    "value": 30
  },
  {
    "index": "Data4",
    "value": 40
  }
]
```

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

{% hint style="info" %}
3つ以上のプロパティを持つオブジェクトが渡された場合、各オブジェクトから同じプロパティ番号の値をまとめて円グラフを描画します。
{% endhint %}

#### 開始番号

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

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

#### 最大数

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

#### 値タイプ

円グラフに描画する値のデータ種別を設定します。データソースのオブジェクトの`value` プロパティが対象となります。<img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-bf2b2a2112d9bea221c44e20f2c4db36faa2badd%2F%E5%B1%95%E9%96%8B%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3.png?alt=media" 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="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-bf2b2a2112d9bea221c44e20f2c4db36faa2badd%2F%E5%B1%95%E9%96%8B%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3.png?alt=media" 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="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-bc0f848257564d433acb3d73d9289fa015bcf0ed%2FBI%20Component%EF%BC%9A%E5%86%86%E3%82%B0%E3%83%A9%E3%83%95_03.png?alt=media" alt=""><figcaption></figcaption></figure>

#### ナイチンゲールモード

トグルスイッチをONにすると、グラフの扇形の半径の大きさを、値の比率に応じて描画します。

{% hint style="info" %}
ナイチンゲールモードを使用する場合、複数のデータシリーズを描画することはできません。
{% endhint %}

#### データシリーズ

データシリーズごとに、グラフを描画する半径を指定します。

#### データカラー

円グラフの扇形の色を指定します。

#### 角丸サイズ

グラフの扇形の角の丸めのサイズを指定します。

#### 枠線太さ

円グラフの扇形を囲む枠線の太さを指定します。

#### ラベル表示

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

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

<table><thead><tr><th width="180">項目名</th><th>設定内容</th><th data-hidden></th></tr></thead><tbody><tr><td>データ名</td><td>トグルスイッチをONにすると、データラベル名を表示しま</td><td></td></tr><tr><td>値</td><td>トグルスイッチをONにすると、描画しているデータの値を表示します。</td><td></td></tr><tr><td>パーセンテージ</td><td>トグルスイッチをONにすると、データの値が占める割合をパーセンテージで表示します。表示する小数桁数を指定することができます。</td><td></td></tr><tr><td>整列</td><td>ラベル表示の位置を指定できます。対応する扇形の近くに配置する、円グラフの外側に揃えて配置する（ラベルを省略表示）、円グラフの内側に揃えて配置する の3つから選択します。</td><td></td></tr></tbody></table>

### 外観

#### 高さ

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

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-8aa7926895beacbdc4b38ad2dd19bc9669ad9f5c%2FBI%20Component%EF%BC%9A%E5%86%86%E3%82%B0%E3%83%A9%E3%83%95_04.png?alt=media" 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>