# **图表**

## 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
