@operato/scene-chartjs 1.3.17 → 1.3.22

package/helps/scene/component/chartjs.ja.md

@@ -0,0 +1,364 @@
+# **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