@things-factory/reference-app 6.0.25 → 6.0.28

package/dist-client/helps/scene/component/chartjs.zh.md

@@ -0,0 +1,331 @@
+# **图表**
+
+## 1. 共同
+
+### 1.1. 通用属性
+
+* 主题 - 更改图表的主题。 支持“light”和“dark”
+* 范例 - 显示图表的范例。
+* 位置 - 设置系列中显示值的位置
+* 多轴 - 是否表示为左右多轴，选择多轴时，将显示Y辅助轴和Y辅助轴选项。
+
+### 1.2. X 轴
+
+* 数据键 - 要在图表上表示的数据的字段名称。 输入要在X轴中表示的数据字段名称。 显示以下数据时，它将是“DATE”。
+  ![Chart-bar-主题][chart-bar-01]
+* 标题 - X轴的标题
+* 网格线 - 网格线是否显示纵向网格
+  ![X 轴 Grid][chart-bar-08]
+* 显示刻度 - X轴是否显示刻度
+
+### 1.3. Y 轴
+
+* 标题 - 在Y轴中输入所需的标题
+* 自动计算最小值 - 选择自动计算最小值时，将自动应用最小值和刻度来计算比例
+* 最小 - 当“自动计算最小值”关闭时显示，并且可设定最小刻度。
+* 自动计算最大值 - 选择自动计算最大值时，将自动应用最大值和刻度来计算比例
+* 最大 - 当“自动计算最大值”关闭时显示，并且可设定最大刻度。
+* 刻度大小 - 设置刻度大小
+* 网格线 - 是否显示横向网格线
+  ![Y 轴 Grid][chart-bar-12]
+* 显示刻度 -Y轴是否显示刻度
+
+---
+
+## 2. 混合图表（纵向条形图表＆折线图）
+* 通过混合条形和线形来表示数据的图表。 __（混合图的属性与条形图和折线图相同。）__
+* 数据可以用条形或线形或混合使用条形和线形来表示。 当有多个系列（字段）时，可以表示为并列条形图表或堆叠条形图表。
+  ![chart-mix-chart Type][chart-mix-02]
+
+  [chart-mix-02]: ../images/chart-mix-02.png
+
+### 2.1. 系列
+* 使用按钮“+”可以添加多个系列的数据。
+* **共同**
+  * 数据键 - 定义要由系列引用的原始数据在Y轴中表示的数据的字段名称，显示以下数据时，系列的数据键为“Good”和“Bad”。
+    ![Data Refer][chart-bar-01]
+  * 类型 - 选择折线图或条形图表示系列。
+  * 标签 - 范例标签。
+  * 颜色 - 指定系列在图表上显示的颜色。
+  * 堆叠组 - 同一堆叠组中包含的系列的值被累积并以图形表示。
+    ![堆叠组][chart-bar-02]
+  * 对象轴 - 当多轴被选择时，出现对象轴字段，并且对象轴指向该系列信息所引用的轴（轴刻度）。
+    ![对象轴][chart-bar-03]
+  * 数据前缀 - 显示值时将用作该值作为前缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据前缀：$ =>结果： $100）
+  * 数据后缀 - 显示值时将用作该值作为后缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据后缀：元 =>结果： 100元）
+  * 显示值 - 确定是否在屏幕上显示系列的数据值。 选择显示值时，将出现以下项目。
+    * 字体颜色 - 设置系列中显示值的颜色
+    * 大小 - 设置系列中显示值的字体大小
+    * 位置 - 设置系列中显示值的位置
+* **如果选择类型为折线图**
+  * 线张力 - 使用直线的图形（angled），使用平滑的图形（smooth）
+  * 线厚度 - 设置线厚度
+  * 点形状 - 线上每个顶点的点形状
+  * 点大小 - 线的每个顶点的大小
+  * 填充 - 填充线绘制的面积
+
+### 2.2. X 轴
+
+* 与[通用属性](#12-x-轴)中定义的内容相同
+* 条间距 - 条形柱之间的间隙，它会影响条形的大小。
+* 刻度间距 - 刻度之间的间隙，它会影响条形的大小。
+
+### 2.3. Y 轴
+
+* 与[通用属性](#13-y-轴)中定义的内容相同
+
+### 2.4. Y辅助轴(在多轴被勾选时显示)
+
+* 与[通用属性](#13-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”
+* 范例 - 显示图表的范例。
+* 位置 - 设置系列中显示值的位置
+* 多轴 - 是否表示为左右多轴，选择多轴时，将显示Y辅助轴和Y辅助轴选项。
+
+### 3.2. 系列
+
+* 使用按钮“ +”可以添加多个系列的数据。
+* **共同**
+  * 数据键 - 定义要由系列引用的原始数据在Y轴中表示的数据的字段名称，显示以下数据时，系列的数据键为“Good”和“Bad”。
+    ![Data Refer][chart-bar-01]
+  * 标签 - 范例标签
+  * 颜色 - 指定系列在图表上显示的颜色
+  * 堆叠组 - 同一堆叠组中包含的系列的值被累积并以图形表示。
+    ![堆叠组][chart-bar-02]
+  * 对象轴 - 当多轴被选择时，出现对象轴字段，并且对象轴指向该系列信息所引用的轴（轴刻度）。
+    ![对象轴][chart-bar-03]
+  * 数据前缀 - 显示值时将用作该值作为前缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据前缀：$ =>结果： $100）
+  * 数据后缀 - 显示值时将用作该值作为后缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据后缀：元 =>结果： 100元）
+  * 显示值 - 确定是否在屏幕上显示系列的数据值。 选择显示值时，将出现以下项目。
+    * 字体颜色 - 设置系列中显示值的颜色
+    * 大小 - 设置系列中显示值的字体大小
+    * 位置 - 设置系列中显示值的位置
+
+### 3.3. X 轴
+
+* 数据键 - 要在图表上表示的数据的字段名称。 输入要在X轴中表示的数据字段名称。 显示以下数据时，它将是“DATE”。
+  ![Data Refer][chart-horizontal-bar-01]
+* 标题 - X轴的标题
+* 网格线 - 网格线是否显示纵向网格
+* 显示刻度 - X轴是否显示刻度
+
+### 3.4. Y 轴
+
+* 标题 - 在Y轴中输入所需的标题
+* 自动计算最小值 - 选择自动计算最小值时，将自动应用最小值和刻度来计算比例
+* 最小 - 当“自动计算最小值”关闭时显示，并且可设定最小刻度。
+* 自动计算最大值 - 选择自动计算最大值时，将自动应用最大值和刻度来计算比例
+* 最大 - 当“自动计算最大值”关闭时显示，并且可设定最大刻度。
+* 刻度大小 - 设置刻度大小
+* 网格线 - 是否显示横向网格线
+* 显示刻度 -Y轴是否显示刻度
+
+
+[chart-horizontal-bar-01]: ../images/chart-horizontal-bar-01.png
+
+---
+## 4. 折线图
+
+以线形表示数据的图表。
+
+### 4.1. Properties
+
+* 主题 - 更改图表的主题。 支持“light”和“dark”
+* 范例 - 显示图表的范例。
+* 位置 - 设置系列中显示值的位置
+* 多轴 - 是否表示为左右多轴，选择多轴时，将显示Y辅助轴和Y辅助轴选项。
+
+### 4.2. 系列
+
+* 使用按钮“ +”可以添加多个系列的数据。
+* **共同**
+  * 数据键 - 在系列中引用的原始数据中，要在图表中表示的数据的字段名称，当显示以下数据时，系列的数据键变为“Good”或“Bad”。
+  ![Data Refer][chart-line-01]
+  * 线张力 - 使用直线的图形（angled），使用平滑的图形（smooth）
+  * 线厚度 - 设置线厚度
+  * 标签 - 范例标签
+  * 颜色 - 指定系列在图表上显示的颜色
+  * 点形状 - 线上每个顶点的点形状
+  * 点大小 - 线的每个顶点的大小
+  * 堆叠组 - 同一堆叠组中包含的系列的值被累积并以图形表示。
+  * 填充 - The space where the line is drawn is filled in the figure that displays the data by using the color of the common inner definition.
+  * 对象轴 - 当多轴被选择时，出现对象轴字段，并且对象轴指向该系列信息所引用的轴（轴刻度）。
+  * 数据前缀 - 显示值时将用作该值作为前缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据前缀：$ =>结果： $100）
+  * 数据后缀 - 显示值时将用作该值作为后缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据后缀：元 =>结果： 100元）
+  * 显示值 - 确定是否在屏幕上显示系列的数据值。 选择显示值时，将出现以下项目。
+    * 字体颜色 - 设置系列中显示值的颜色
+    * 大小 - 设置系列中显示值的字体大小
+    * 位置 - 设置系列中显示值的位置
+
+### 4.3. X 轴
+
+* 数据键 - 要在图表上表示的数据的字段名称。 输入要在X轴中表示的数据字段名称。 显示以下数据时，它将是“DATE”。
+  ![Data Refer][chart-line-01]
+* 标题 - X轴的标题
+* 网格线 - 网格线是否显示纵向网格
+* 显示刻度 - X轴是否显示刻度
+
+### 4.4. Y 轴
+* 标题 - 在Y轴中输入所需的标题
+* 自动计算最小值 - 选择自动计算最小值时，将自动应用最小值和刻度来计算比例
+* 最小 - 当“自动计算最小值”关闭时显示，并且可设定最小刻度。
+* 自动计算最大值 - 选择自动计算最大值时，将自动应用最大值和刻度来计算比例
+* 最大 - 当“自动计算最大值”关闭时显示，并且可设定最大刻度。
+* 刻度大小 - 设置刻度大小
+* 网格线 - 是否显示横向网格线
+* 显示刻度 -Y轴是否显示刻度
+
+
+[chart-line-01]: ../images/chart-line-01.png
+
+---
+## 5. 雷达图
+
+以雷达形式表示数据的图表。 雷达图数据以多条线的形式表示。
+
+### 5.1. 通用属性
+
+* 主题 - 更改图表的主题。 支持“light”和“dark”
+* 范例 - 显示图表的范例。
+* 位置 - 设置系列中显示值的位置
+
+### 5.2. 系列
+
+* 使用按钮“ +”可以添加多个系列的数据。
+* **共同**
+  * 数据键 - 在系列中引用的原始数据中，要在图表中表示的数据的字段名称，当显示以下数据时，系列的数据键变为“Good”。
+  ![Data Refer][chart-radar-01]
+  * 标签 - 范例标签
+  * 颜色 - 指定系列在图表上显示的颜色
+  * 堆叠组 - 同一堆叠组中包含的系列的值被累积并以图形表示。
+  * 数据前缀 - 显示值时将用作该值作为前缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据前缀：$ =>结果： $100）
+  * 数据后缀 - 显示值时将用作该值作为后缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据后缀：元 =>结果： 100元）
+  * 显示值 - 确定是否在屏幕上显示系列的数据值。 选择显示值时，将出现以下项目。
+    * 字体颜色 - 设置系列中显示值的颜色
+    * 大小 - 设置系列中显示值的字体大小
+    * 位置 - 设置系列中显示值的位置
+
+### 5.3. 轴
+  * 数据键 - 要在图表上表示的数据的字段名称。 输入要在轴中表示的数据字段名称。 显示以下数据时，它将是“LINE”。
+  ![Data Refer][chart-radar-01]
+
+[chart-radar-01]: ../images/chart-radar-01.png
+
+---
+
+## 6. 极坐标图
+
+以极坐标表示数据的图表。
+
+### 6.1. 通用属性
+
+* 主题 - 更改图表的主题。 支持“light”和“dark”
+* 范例 - 显示图表的范例。
+* 位置 - 设置系列中显示值的位置
+
+### 6.2. 系列
+
+* 使用按钮“ +”可以添加多个系列的数据。
+* **共同**
+  * 数据键 - 在系列中引用的原始数据中，要在图表中表示的数据的字段名称，当显示以下数据时，系列的数据键变为“Good”。
+  ![Data Refer][chart-polar-01]
+  * 标签 - 范例标签
+  * 颜色 - 指定系列在图表上显示的颜色
+  * 数据前缀 - 显示值时将用作该值作为前缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据前缀：$ =>结果： $100）
+  * 数据后缀 - 显示值时将用作该值作为后缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据后缀：元 =>结果： 100元）
+  * 显示值 - 确定是否在屏幕上显示系列的数据值。 选择显示值时，将出现以下项目。
+    * 字体颜色 - 设置系列中显示值的颜色
+    * 大小 - 设置系列中显示值的字体大小
+    * 位置 - 设置系列中显示值的位置
+
+### 6.3. 轴
+  * 数据键 - 要在图表上表示的数据的字段名称。 输入要在轴中表示的数据字段名称。 显示以下数据时，它将是“LINE”。
+  ![Data Refer][chart-polar-01]
+
+[chart-polar-01]: ../images/chart-polar-01.png
+
+---
+
+## 7. 饼图
+
+以饼形态表示数据的图表。
+
+### 7.1. 通用属性
+
+* 主题 - 更改图表的主题。 支持“light”和“dark”
+* 范例 - 显示图表的范例。
+* 位置 - 可以在四个方向上放置：顶部，底部，左侧和右侧。
+
+### 7.2. 系列
+
+* 使用按钮“ +”可以添加多个系列的数据。
+* **共同**
+  * 数据键 - 在系列中引用的原始数据中，要在图表中表示的数据的字段名称，当显示以下数据时，系列的数据键变为“Good”。
+  ![Data Refer][chart-pie-01]
+  * Label - 范例标签
+  * Color - 指定系列在图表上显示的颜色
+  * 数据前缀 - 显示值时将用作该值作为前缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据前缀：$ =>结果： $100）
+  * 数据后缀 - 显示值时将用作该值作为后缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据后缀：元 =>结果： 100元）
+  * 显示值 - 确定是否在屏幕上显示系列的数据值。 选择显示值时，将出现以下项目。
+    * 字体颜色 - 设置系列中显示值的颜色
+    * 大小 - 设置系列中显示值的字体大小
+    * 位置 - 设置系列中显示值的位置
+
+### 7.3. 轴
+  * 数据键 - 要在图表上表示的数据的字段名称。 输入要在轴中表示的数据字段名称。 显示以下数据时，它将是“LINE”。
+  ![Data Refer][chart-pie-01]
+
+[chart-pie-01]: ../images/chart-pie-01.png
+
+---
+
+## 8. 环形图
+
+以环形形状显示数据的图表。
+
+### 8.1. 通用属性
+
+* 主题 - 更改图表的主题。 支持“light”和“dark”
+* 范例 - 显示图表的范例。
+* 位置 - 可以在四个方向上放置：顶部，底部，左侧和右侧。
+
+### 8.2. 系列
+
+* 使用按钮“ +”可以添加多个系列的数据。
+* **共同**
+  * 数据键 - 在系列中引用的原始数据中，要在图表中表示的数据的字段名称，当显示以下数据时，系列的数据键变为“Good”。
+  ![Data Refer][chart-doughnut-01]
+  * 标签 - 范例标签
+  * 颜色 - 指定系列在图表上显示的颜色
+  * 数据前缀 - 显示值时将用作该值作为前缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据前缀：$ =>结果： $100）
+  * 数据后缀 - 显示值时将用作该值作为后缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据后缀：元 =>结果： 100元）
+  * 显示值-确定是否在屏幕上显示系列的数据值。 选择显示值时，将出现以下项目。
+    * 字体颜色 - 设置系列中显示值的颜色
+    * 大小 - 设置系列中显示值的字体大小
+    * 位置 - 设置系列中显示值的位置
+
+### 8.3. 轴
+  * 数据键 - 要在图表上表示的数据的字段名称。 输入要在轴中表示的数据字段名称。 显示以下数据时，它将是“LINE”。
+  ![Data Refer][chart-doughnut-01]
+
+[chart-doughnut-01]: ../images/chart-doughnut-01.png

package/dist-client/helps/scene/component/color-image.ko.md

@@ -0,0 +1,9 @@
+# Color Image
+
+![Media][Media-01]  
+RGB (Color) image를 업로드한다.
+
+
+- Category : Media
+
+[Media-01]: ../images/media-01.png

package/dist-client/helps/scene/component/color-image.md

@@ -0,0 +1,9 @@
+# Color Image
+
+![Media][Media-01]  
+Upload an RGB (Color) image.
+
+
+- Category : Media
+
+[Media-01]: ../images/media-01.png

package/dist-client/helps/scene/component/color-image.zh.md

@@ -0,0 +1,9 @@
+# 彩色图像
+
+![Media][Media-01]  
+上传RGB(彩色)图像。
+
+
+- 类型：媒体
+
+[Media-01]: ../images/media-01.png

package/dist-client/helps/scene/component/container.ko.md

@@ -0,0 +1,7 @@
+# 컨테이너
+
+![Container][Container-01]  
+
+- Category : Container
+
+[Container-01]: ../images/container-01.png

package/dist-client/helps/scene/component/container.md

@@ -0,0 +1,9 @@
+# Container
+
+![Container][Container-01]  
+Container
+
+
+- Category : Container
+
+[Container-01]: ../images/container-01.png

package/dist-client/helps/scene/component/container.zh.md

@@ -0,0 +1,8 @@
+# 容器
+
+![Container][Container-01]  
+
+
+- 类型：容器  
+
+[Container-01]: ../images/container-01.png

package/dist-client/helps/scene/component/donut.ko.md

@@ -0,0 +1,14 @@
+# 도넛
+
+![컴포넌트-도넛][donut-01]
+
+안쪽에 구멍 뚫린 원(도넛 모양)
+- Category : Shape
+- 속성 :
+1. ratio(Number) - 안쪽 원의 크기를 조정
+![도넛-ratio적용결과][donut-02]  
+
+
+[donut-01]: ../images/donut-01.png
+
+[donut-02]: ../images/donut-02.png

package/dist-client/helps/scene/component/donut.md

@@ -0,0 +1,17 @@
+# Donut
+
+![Component-Donut][donut-01]
+
+Ring-shaped (donut shape)
+- Category : Shape
+- Property :
+1. ratio(Number) - Adjust the size of inner circle.
+![Donut-ratio application result][donut-02]  
+
+
+
+[donut-01]: ../images/donut-01.png
+{: height="200px"}
+
+[donut-02]: ../images/donut-02.png
+{: height="200px"}

package/dist-client/helps/scene/component/donut.zh.md

@@ -0,0 +1,18 @@
+
+# 圆环
+
+![组件-圆环][donut-01]
+
+环状（圆环形状）
+- 类型：形状
+- 属性：
+1. ratio(Number) - 调整内圆大小。
+![圆环-ratio适用结果][donut-02]  
+
+
+
+[donut-01]: ../images/donut-01.png
+{: height="200px"}
+
+[donut-02]: ../images/donut-02.png
+{: height="200px"}

package/dist-client/helps/scene/component/dotted-line.ko.md

@@ -0,0 +1,7 @@
+# 곧은 점선
+
+![Dash][Dash-01]
+
+- Category : Line
+
+[Dash-01]: ../images/dash-01.png

package/dist-client/helps/scene/component/dotted-line.md

@@ -0,0 +1,9 @@
+# dotted line
+
+![Dash][Dash-01]
+
+Straight dotted line.
+
+- Category : Line
+
+[Dash-01]: ../images/dash-01.png

package/dist-client/helps/scene/component/dotted-line.zh.md

@@ -0,0 +1,7 @@
+# 直虚线
+
+![Dash][Dash-01]
+
+- 类型：线
+
+[Dash-01]: ../images/dash-01.png

package/dist-client/helps/scene/component/ellipse.ko.md

@@ -0,0 +1,11 @@
+
+# 원
+
+![컴포넌트-원][ellipse-01]
+
+원(타원 포함)
+
+- Category : Shape
+
+[ellipse-01]: ../images/ellipse-01.png
+{: height="200px"}

package/dist-client/helps/scene/component/ellipse.md

@@ -0,0 +1,11 @@
+
+# ellipse 
+
+![Component-Circle][ellipse-01]
+
+Circle (including ellipse)
+
+- Category : Shape
+
+[ellipse-01]: ../images/ellipse-01.png
+{: height="200px"}

package/dist-client/helps/scene/component/ellipse.zh.md

@@ -0,0 +1,10 @@
+# 圆 
+
+![组件-圆][ellipse-01]
+
+圆（包含椭圆）
+
+- 类型：形状
+
+[ellipse-01]: ../images/ellipse-01.png
+{: height="200px"}

package/dist-client/helps/scene/component/gauge-circle.ko.md

@@ -0,0 +1,168 @@
+# gauge[ko]
+![컴포넌트-게이지(원형)][gauge-circle-01]  
+## properties
+
+1. Value(Number) - 게이지의 값.  
+<figure style="text-align: center;">
+
+![게이지-Value적용결과][gauge-circle-02]  
+
+<figurecaption>(value: 85)</figurecaption>
+</figure>
+
+2. startValue - 게이지의 시작 값.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-03]  
+
+<figurecaption>(startValue: 10)</figurecaption>
+</figure>
+
+3. endValue - 게이지의 끝 값.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-04]  
+<figurecaption>(endValue: 120)</figurecaption>
+</figure>
+
+4. step - 게이지 눈금 간격.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-05]  
+<figurecaption>(step: 30)</figurecaption>
+</figure>
+
+5. stepTextSize - 게이지 눈금 글씨 크기.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-06]  
+<figurecaption>(stepTextSize: 10)</figurecaption>
+</figure>
+
+6. subStep - 게이지 눈금 사이 간격.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-07]  
+<figurecaption>(subStep: 10)</figurecaption>
+</figure>
+
+7. stepNeedleSize - 게이지 눈금 크기.
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-08]  
+<figurecaption>(stepNeedleSize: 3)</figurecaption>
+</figure>
+
+8. startAngle - 게이지의 시작 각도. 12시 방향을 기준으로 시계방향으로 증가한다. 음수일 경우 역방향.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-09]  
+<figurecaption>(startAngle: -90)</figurecaption>
+</figure>
+
+9. endAngle - 게이지의 끝 각도. 12시 방향을 기준으로 시계방향으로 증가한다. 음수일 경우 역방향.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-10]  
+<figurecaption>(endAngle: 90)</figurecaption>
+</figure>
+
+10. textFillStyle - 게이지 눈금 글씨 색상.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-11]  
+<figurecaption>(textFillStyle: #ec5324)</figurecaption>
+</figure>
+
+11. needleFillStyle - 게이지 바늘 색상.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-12]  
+<figurecaption>(needleFillStyle: #ec5324)</figurecaption>
+</figure>
+
+12. innerCircleFillStyle - 게이지 바늘의 원의 색상.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-13]  
+<figurecaption>(innerCircleFillStyle: #ec5324)</figurecaption>
+</figure>
+
+13. stepFillStyle - 게이지 눈금 색상.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-14]  
+<figurecaption>(stepFillStyle: #ec5324)</figurecaption>
+</figure>
+
+14. colorStops - 게이지 구간별 색상. 더블클릭으로 구간을 추가할 수 있으며 마커를 드래그하여 아래로 내리면 구간을 삭제할 수 있다.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-15]  
+<figurecaption>(colorStops: <img src="{{site.baseurl}}/assets/components/color-stops-value.png" height="30" alt="color stops">)</figurecaption>
+      </figure>
+
+15. showStartValue - 게이지 시작값의 표시여부를 결정.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-16]  
+<figurecaption>(showStartValue: unchecked)</figurecaption>
+</figure>
+
+16. showEndValue - 게이지 끝값의 표시여부를 결정.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-17]  
+<figurecaption>(showEndValue: unchecked)</figurecaption>
+</figure>
+
+17. showStepLine - 게이지 눈금의 표시여부를 결정.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-18]  
+<figurecaption>(showStepLine: unchecked)</figurecaption>
+</figure>
+
+18. showStepText - 게이지 눈금 값의 표시여부를 결정.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-19]  
+<figurecaption>(showStepText: unchecked)</figurecaption>
+</figure>
+
+19. showSubStep - 게이지 보조 눈금의 표시여부를 결정.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-20]  
+<figurecaption>(showSubStep: unchecked)</figurecaption>
+</figure>
+
+20. inText - 게이지 눈금 값의 위치를 결정. (checked: 내부, unchecked: 외부)  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-21]  
+<figurecaption>(inText: unchecked)</figurecaption>
+</figure>
+
+
+[gauge-circle-01]:../images/gauge-circle-01.png
+[gauge-circle-02]:../images/gauge-circle-02.png
+[gauge-circle-03]:../images/gauge-circle-03.png
+[gauge-circle-04]:../images/gauge-circle-04.png
+[gauge-circle-05]:../images/gauge-circle-05.png
+[gauge-circle-06]:../images/gauge-circle-06.png
+[gauge-circle-07]:../images/gauge-circle-07.png
+[gauge-circle-08]:../images/gauge-circle-08.png
+[gauge-circle-09]:../images/gauge-circle-09.png
+[gauge-circle-10]:../images/gauge-circle-10.png
+[gauge-circle-11]:../images/gauge-circle-11.png
+[gauge-circle-12]:../images/gauge-circle-12.png
+[gauge-circle-13]:../images/gauge-circle-13.png
+[gauge-circle-14]:../images/gauge-circle-14.png
+[gauge-circle-15]:../images/gauge-circle-15.png
+[gauge-circle-16]:../images/gauge-circle-16.png
+[gauge-circle-17]:../images/gauge-circle-17.png
+[gauge-circle-18]:../images/gauge-circle-18.png
+[gauge-circle-19]:../images/gauge-circle-19.png
+[gauge-circle-20]:../images/gauge-circle-20.png
+[gauge-circle-21]:../images/gauge-circle-21.png