# **Chart**

## 1. 共通

### 1.1. 共通属性

- テーマ - チャートのテーマを変更。'light'と'dark'の 2 つをサポート
- 凡例 - チャートの凡例を表示。
- 位置 - 上(top)、下(bottom)、左(left)、右(right)の 4 方向に配置可能。
- 二軸 - Y 軸を左右 2 軸で表示するかどうか。二軸を選択した場合、補助 Y 軸とそのオプションが表示される。

### 1.2. X 軸

- データ参照 - チャートが表示するデータのフィールド名。X 軸に表示するデータのフィールド名を入力する。以下のようなデータを表示する場合、'Date'となる。  
  ![Chart-bar-theme][chart-bar-01]
- タイトル - X 軸の希望するタイトル（ラベル）を入力
- グリッドライン - 垂直方向のグリッドライン表示の有無
  ![X軸グリッド][chart-bar-08]
- 目盛り表示 - X 軸の目盛り表示の有無

### 1.3. Y 軸

- タイトル - Y 軸の希望するタイトル（ラベル）を入力
- 最小値自動 - 最小値を自動選択する場合、自動的に最小値とステップを適用して目盛りを計算
- 最小値 - 最小値自動選択を解除した場合、目盛りの最小値を設定可能。
- 最大値自動 - 最大値を自動選択する場合、自動的に最大値とステップを適用して目盛りを計算
- 最大値 - 最大値自動選択を解除した場合、目盛りの最大値を設定可能。
- ステップ - 目盛り間隔を設定
- グリッドライン - 水平方向のグリッドライン表示の有無
  ![Y軸グリッド][chart-bar-12]
- 目盛り表示 - Y 軸の目盛り表示の有無

---

## 2. Mix Chart（垂直バー/ラインチャート）

- データをバーとラインの形状を混ぜて表現するチャート。 **（ミックスチャートの属性は、バーとラインチャートと同じです。）**
- データをバーまたはラインの形で表現したり、バーとラインをミックスして表現可能。複数のシリーズ（フィールド）がある場合、並列バーまたは積み上げバーで表現可能。
  ![chart-mix-チャートタイプ][chart-mix-02]

  [chart-mix-02]: ../images/chart-mix-02.png

### 2.1. シリーズ

- "+"ボタンを使用して、複数のシリーズをデータに追加可能。
- **共通**
  - データ参照 - 各シリーズが Y 軸に表現するデータのフィールド名を定義する。以下のようなデータを表示する場合、シリーズの Data-Key は 'Good'と 'Bad'となる。  
    ![Data Refer][chart-bar-01]
  - タイプ - シリーズをライン(line)チャートで表現するか、バー(bar)チャートで表現するかを定義する。
  - ラベル - 凡例名
  - 色 - チャートに表現されるシリーズの色を指定する。
  - 積み上げグループ - 同じ積み上げグループに含まれるシリーズの値を積み上げてグラフに表現する。
    ![積み上げグループ][chart-bar-02]
  - 対象軸 - 二軸を適用する場合、対象軸の設定フィールドが表示される。対象軸はそのシリーズが参照する軸（軸の目盛り）を指す。
    ![対象軸][chart-bar-03]
  - 値形式 - 値が表示されるときの数値形式を指定可能。
  - 接頭辞 - 値が表示されるとき（マウスオーバー、値表示など）、値の接頭辞として適用する文字（例: data: 100, 接頭辞: $ => 結果: $100）
  - 接尾辞 - 値が表示されるとき（マウスオーバー、値表示など）、値の接尾辞として適用する文字（例: data: 100, 接尾辞: 円 => 結果: 100 円）
  - 値表示 - そのシリーズのデータを画面に表示するかどうかを決定する。
    値表示が選択されると、以下の項目が表示される。
    - フォント色 - シリーズラベルの色を設定
    - サイズ - シリーズラベルのフォントサイズを設定
    - 位置 - シリーズラベルのフォント位置を設定
    - オフセット - シリーズラベルの相対位置（位置に対する相対位置を意味する）
    - 回転 - シリーズラベルの回転角度
- **タイプが line の場合**
  - 緊張度 - 直線を使用したグラフ（angled）、滑らかな線を使用したグラフ（smooth）
  - 境界部分の幅 - ラインの太さを設定
  - ポイントの形状 - ラインの各頂点のポイントの形状を定義
  - ポイントのサイズ - ラインの各頂点のポイントのサイズを定義
  - 塗りつぶし - 共通属性の色を使用して、データを表現する図形を塗りつぶす。

### 2.2. X 軸

- 一般 - [共通属性](#1.2.-X軸)で定義された内容と同じ
- バー間隔 - バーとバーの間隔で、バーのサイズに影響を与える。
- 目盛り間隔 - 目盛り間の間隔で、バーのサイズに影響を与える。

### 2.3. Y 軸

- [共通属性](#1.3.-Y軸)で定義された内容と同じ

### 2.4. 補助 Y 軸（二軸選択時に表示）

- 設定属性は Y 軸の設定方法と同じ。

[chart-bar-01]: ../images/chart-bar-01.png
[chart-bar-02]: ../images/chart-bar-02.png
[chart-bar-03]: ../images/chart-bar-03.png
[chart-bar-08]: ../images/chart-bar-08.png
[chart-bar-12]: ../images/chart-bar-12.png

---

## 3. 水平バー チャート

データを水平バーの形で表現するチャート。複数のフィールドがある場合、並列バーまたは積み上げバーで表現可能。

### 3.1. 共通属性

- テーマ - チャートのテーマを変更。'light'と'dark'の 2 つをサポート
- 凡例 - チャートの凡例を表示。
- 位置 - 上(top)、下(bottom)、左(left)、右(right)の 4 方向に配置可能。
- 二軸 - Y 軸を左右 2 軸で表示するかどうか。二軸を選択した場合、補助 Y 軸とそのオプションが表示される。

### 3.2. シリーズ

- "+"ボタンを使用して、複数のシリーズをデータに追加可能。
- **共通**
  - データ参照 - 各シリーズが Y 軸に表現するデータのフィールド名を定義する。以下のようなデータを表示する場合、シリーズの Data-Key は 'Good'と 'Bad'となる。
  - ラベル - 凡例名
  - 色 - チャートに表現されるシリーズの色を指定する。
  - 積み上げグループ - 同じ積み上げグループに含まれるシリーズの値を積み上げてグラフに表現する。
  - 対象軸 - 二軸を適用する場合、対象軸の設定フィールドが表示される。対象軸はそのシリーズが参照する軸（軸の目盛り）を指す。
  - 値形式 - 値が表示されるときの数値形式を指定可能。
  - 接頭辞 - 値が表示されるとき（マウスオーバー、値表示など）、値の接頭辞として適用する文字（例: data: 100, 接頭辞: $ => 結果: $100）
  - 接尾辞 - 値が表示されるとき（マ

ウスオーバー、値表示など）、値の接尾辞として適用する文字（例: data: 100, 接尾辞: 円 => 結果: 100 円）

- 値表示 - そのシリーズのデータを画面に表示するかどうかを決定する。
  値表示が選択されると、以下の項目が表示される。
  - フォント色 - シリーズラベルの色を設定
  - サイズ - シリーズラベルのフォントサイズを設定
  - 位置 - シリーズラベルのフォント位置を設定
  - オフセット - シリーズラベルの相対位置（位置に対する相対位置を意味する）
  - 回転 - シリーズラベルの回転角度

### 3.3. X 軸

- データ参照 - チャートが表示するデータのフィールド名。X 軸に表示するデータのフィールド名を入力する。以下のようなデータを表示する場合、'Date'となる。
- タイトル - X 軸の希望するタイトル（ラベル）を入力
- グリッドライン - 垂直方向のグリッドライン表示の有無
- 目盛り表示 - X 軸の目盛り表示の有無

### 3.4. Y 軸

- タイトル - Y 軸の希望するタイトル（ラベル）を入力
- 最小値自動 - 最小値を自動選択する場合、自動的に最小値とステップを適用して目盛りを計算
- 最小値 - 最小値自動選択を解除した場合、目盛りの最小値を設定可能。
- 最大値自動 - 最大値を自動選択する場合、自動的に最大値とステップを適用して目盛りを計算
- 最大値 - 最大値自動選択を解除した場合、目盛りの最大値を設定可能。
- ステップ - 目盛り間隔を設定
- グリッドライン - 水平方向のグリッドライン表示の有無
- 目盛り表示 - Y 軸の目盛り表示の有無

[chart-horizontal-bar-01]: ../images/chart-horizontal-bar-01.png

---

## 4. ラインチャート

データをラインの形で表現するチャート。（重複する属性はバー チャートを参照）

### 4.1. 属性

- テーマ - チャートのテーマを変更。'light'と'dark'の 2 つをサポート
- 凡例 - チャートの凡例を表示。
- 位置 - 上(top)、下(bottom)、左(left)、右(right)の 4 方向に配置可能。
- 二軸 - Y 軸を左右 2 軸で表示するかどうか。二軸を選択した場合、補助 Y 軸とそのオプションが表示される。

### 4.2. シリーズ

- "+"ボタンを使用して、複数のシリーズをデータに追加可能。
- **共通**
  - データ参照 - 各シリーズが Y 軸に表現するデータのフィールド名を定義する。以下のようなデータを表示する場合、シリーズの Data-Key は 'Good'と 'Bad'となる。  
    ![Data Refer][chart-line-01]
  - 緊張度 - 直線を使用したグラフ（angled）、滑らかな線を使用したグラフ（smooth）
  - 境界部分の幅 - ラインの太さを設定
  - ラベル - 凡例名
  - 色 - チャートに表現されるシリーズの色を指定する。
  - ポイントの形状 - ラインの各頂点のポイントの形状を定義
  - ポイントのサイズ - ラインの各頂点のポイントのサイズを定義
  - 積み上げグループ - 同じ積み上げグループに含まれるシリーズの値を積み上げてグラフに表現する。
  - 塗りつぶし - 共通属性の色を使用して、データを表現する図形を塗りつぶす。
  - 対象軸 - 二軸を適用する場合、対象軸の設定フィールドが表示される。対象軸はそのシリーズが参照する軸（軸の目盛り）を指す。
  - 値形式 - 値が表示されるときの数値形式を指定可能。
  - 接頭辞 - 値が表示されるとき（マウスオーバー、値表示など）、値の接頭辞として適用する文字（例: data: 100, 接頭辞: $ => 結果: $100）
  - 接尾辞 - 値が表示されるとき（マウスオーバー、値表示など）、値の接尾辞として適用する文字（例: data: 100, 接尾辞: 円 => 結果: 100 円）
  - 値表示 - そのシリーズのデータを画面に表示するかどうかを決定する。
    値表示が選択されると、以下の項目が表示される。
    - フォント色 - シリーズラベルの色を設定
    - サイズ - シリーズラベルのフォントサイズを設定
    - 位置 - シリーズラベルのフォント位置を設定
    - オフセット - シリーズラベルの相対位置（位置に対する相対位置を意味する）
    - 回転 - シリーズラベルの回転角度

### 4.3. X 軸

- データ参照 - チャートが表示するデータのフィールド名。X 軸に表示するデータのフィールド名を入力する。以下のようなデータを表示する場合、'Date'となる。
- タイトル - X 軸の希望するタイトル（ラベル）を入力
- グリッドライン - 垂直方向のグリッドライン表示の有無
- 目盛り表示 - X 軸の目盛り表示の有無

### 4.4. Y 軸

- タイトル - Y 軸の希望するタイトル（ラベル）を入力
- 最小値自動 - 最小値を自動選択する場合、自動的に最小値とステップを適用して目盛りを計算
- 最小値 - 最小値自動選択を解除した場合、目盛りの最小値を設定可能。
- 最大値自動 - 最大値を自動選択する場合、自動的に最大値とステップを適用して目盛りを計算
- 最大値 - 最大値自動選択を解除した場合、目盛りの最大値を設定可能。
- ステップ - 目盛り間隔を設定
- グリッドライン - 水平方向のグリッドライン表示の有無
- 目盛り表示 - Y 軸の目盛り表示の有無

[chart-line-01]: ../images/chart-line-01.png

---

## 5. レーダーチャート

データをレーダー形状で表現するチャート。円形チャートのデータを複数のラインで表現。

### 5.1. 共通属性

- テーマ - チャートのテーマを変更。'light'と'dark'の 2 つをサポート
- 凡例 - チャートの凡例を表示。
- 位置 - 上(top)、下(bottom)、左(left)、右(right)の 4 方向に配置可能。

### 5.2. シリーズ

- "+"ボタンを使用して、複数のシリーズをデータに追加可能。
- **共通**
  - データ参照 - 各シリーズが Y 軸に表現するデータのフィールド名を定義する。以下のようなデータを表示する場合、シリーズの Data-Key は 'Good'と 'Bad'となる。  
    ![Data Refer][chart-radar-01]
  - ラベル - 凡例名
  - 色 - チャートに表現されるシリーズの色を指定する。
  - 積み上げグループ - 同じ積み上げグループに含まれるシリーズの値を積み上げてグラフに表現する。
  - 値形式 - 値が表示されるときの数値形式を指定可能。
  - 接頭辞 - 値が表示されるとき（マウスオーバー、値表示など）、値の接頭辞として適用する文字（例: data: 100, 接頭辞: $ => 結果: $100）
  - 接尾辞 - 値が表示されるとき（マウスオーバー、値表示など）、値の接尾辞として適用する文字（例: data: 100, 接尾辞

: 円 => 結果: 100 円）

- 値表示 - そのシリーズのデータを画面に表示するかどうかを決定する。
  値表示が選択されると、以下の項目が表示される。
  - フォント色 - シリーズラベルの色を設定
  - サイズ - シリーズラベルのフォントサイズを設定
  - 位置 - シリーズラベルのフォント位置を設定
  - オフセット - シリーズラベルの相対位置（位置に対する相対位置を意味する）
  - 回転 - シリーズラベルの回転角度

### 5.3. 軸

- データ参照 - 各シリーズが Y 軸に表現するデータのフィールド名を定義する。以下のようなデータを表示する場合、参照データは 'line'となる。
  ![Data Refer][chart-radar-01]

[chart-radar-01]: ../images/chart-radar-01.png

---

## 6. ポーラーチャート

データを極座標の形で表現するチャート。

### 6.1. 共通属性

- テーマ - チャートのテーマを変更。'light'と'dark'の 2 つをサポート
- 凡例 - チャートの凡例を表示。
- 位置 - 上(top)、下(bottom)、左(left)、右(right)の 4 方向に配置可能。

### 6.2. シリーズ

- "+"ボタンを使用して、複数のシリーズをデータに追加可能。
- **共通**
  - データ参照 - 各シリーズが Y 軸に表現するデータのフィールド名を定義する。以下のようなデータを表示する場合、シリーズの Data-Key は 'Good'となる。  
    ![Data Refer][chart-polar-01]
  - ラベル - 凡例名
  - 色 - チャートに表現されるシリーズの色を指定する。
  - 値形式 - 値が表示されるときの数値形式を指定可能。
  - 接頭辞 - 値が表示されるとき（マウスオーバー、値表示など）、値の接頭辞として適用する文字（例: data: 100, 接頭辞: $ => 結果: $100）
  - 接尾辞 - 値が表示されるとき（マウスオーバー、値表示など）、値の接尾辞として適用する文字（例: data: 100, 接尾辞: 円 => 結果: 100 円）
  - 値表示 - そのシリーズのデータを画面に表示するかどうかを決定する。
    値表示が選択されると、以下の項目が表示される。
    - フォント色 - シリーズラベルの色を設定
    - サイズ - シリーズラベルのフォントサイズを設定
    - 位置 - シリーズラベルのフォント位置を設定
    - オフセット - シリーズラベルの相対位置（位置に対する相対位置を意味する）
    - 回転 - シリーズラベルの回転角度

### 6.3. 軸

- データ参照 - 各シリーズが Y 軸に表現するデータのフィールド名を定義する。以下のようなデータを表示する場合、参照データは 'hobby'となる。
  ![Data Refer][chart-polar-01]

[chart-polar-01]: ../images/chart-polar-01.png

---

## 7. パイチャート

データを円形で表現するチャート。

### 7.1. 共通属性

- テーマ - チャートのテーマを変更。'light'と'dark'の 2 つをサポート
- 凡例 - チャートの凡例を表示。
- 位置 - 上(top)、下(bottom)、左(left)、右(right)の 4 方向に配置可能。

### 7.2. シリーズ

- "+"ボタンを使用して、複数のシリーズをデータに追加可能。
- **共通**
  - データ参照 - 各シリーズが Y 軸に表現するデータのフィールド名を定義する。以下のようなデータを表示する場合、シリーズの Data-Key は 'Good'となる。  
    ![Data Refer][chart-pie-01]
  - ラベル - 凡例名
  - 色 - チャートに表現されるシリーズの色を指定する。
  - 値形式 - 値が表示されるときの数値形式を指定可能。
  - 接頭辞 - 値が表示されるとき（マウスオーバー、値表示など）、値の接頭辞として適用する文字（例: data: 100, 接頭辞: $ => 結果: $100）
  - 接尾辞 - 値が表示されるとき（マウスオーバー、値表示など）、値の接尾辞として適用する文字（例: data: 100, 接尾辞: 円 => 結果: 100 円）
  - 値表示 - そのシリーズのデータを画面に表示するかどうかを決定する。
    値表示が選択されると、以下の項目が表示される。
    - フォント色 - シリーズラベルの色を設定
    - サイズ - シリーズラベルのフォントサイズを設定
    - 位置 - シリーズラベルのフォント位置を設定
    - オフセット - シリーズラベルの相対位置（位置に対する相対位置を意味する）
    - 回転 - シリーズラベルの回転角度

### 7.3. 軸

- データ参照 - 各シリーズが Y 軸に表現するデータのフィールド名を定義する。以下のようなデータを表示する場合、参照データは 'line'となる。
  ![Data Refer][chart-pie-01]

[chart-pie-01]: ../images/chart-pie-01.png

---

## 8. ドーナツチャート

![コンポーネント-Chart-doughnut][chart-doughnut-01]

データをドーナツの形で表現するチャート。

### 8.1. 共通属性

- テーマ - チャートのテーマを変更。'light'と'dark'の 2 つをサポート
- 凡例 - チャートの凡例を表示。
- 位置 - 上(top)、下(bottom)、左(left)、右(right)の 4 方向に配置可能。

### 8.2. シリーズ

- "+"ボタンを使用して、複数のシリーズをデータに追加可能。
- **共通**
  - データ参照 - 各シリーズが Y 軸に表現するデータのフィールド名を定義する。以下のようなデータを表示する場合、シリーズの Data-Key は 'Good'となる。  
    ![Data Refer][chart-doughnut-01]
  - ラベル - 凡例名
  - 色 - チャートに表現されるシリーズの色を指定する。
  - 値形式 - 値が表示されるときの数値形式を指定可能。
  - 接頭辞 - 値が表示されるとき（マウスオーバー、値表示など）、値の接頭辞として適用する文字（例: data: 100, 接頭辞: $ => 結果: $100）
  - 接尾辞 - 値が表示されるとき（マウスオーバー、値表示など）、値の接尾辞として適用する文字（例: data: 100, 接尾辞: 円 => 結果: 100 円）
  - 値表示 - そのシリーズのデータを画面に表示するかどうかを決定する。
    値表示が選択されると、以下の項目が表示される。
    - フォント色 - シリーズラベルの色を設定
    - サイズ - シリーズラベルのフォントサイズを設定
    - 位置 - シリーズラベルのフォント位置を設定
    - オフセット - シリーズラベルの相対位置（位置に対する相対位置を意味する）
    - 回転 - シリーズラベルの回転角度

### 8.3. 軸

- データ参照 - 各シリーズが Y 軸に表現するデータのフィールド名を定義する。以下のようなデータを表示する場合、参照データは 'line'となる。
  ![Data Refer][chart-doughnut-01]

[chart-doughnut-01]: ../images/chart-doughnut-01.png