# **图表**

## 1. 公共

### 1.1. 公共属性

- 主题 - 更改图表的主题。支持 'light' 和 'dark'
- 图例 - 显示图表的图例。
- 位置 - 可以放置在四个方向：上（top）、下（bottom）、左（left）、右（right）。
- 双轴 - 选择是否将 Y 轴表示为两个轴（左和右）。选择时显示次要 Y 轴及其

选项。

### 1.2. X 轴

- 数据引用 - 图表表示数据的字段名。输入显示在 X 轴上的字段名。例如，对于下面的数据，输入 'Date'。  
  ![图表条形主题][chart-bar-01]
- 标题 - 输入 X 轴的标题（标签）
- 网格线 - 选择是否显示垂直网格线
  ![X轴网格][chart-bar-08]
- 刻度标记 - 选择是否显示 X 轴上的刻度标记

### 1.3. Y 轴

- 标题 - 输入 Y 轴的标题（标签）
- 自动最小值 - 自动选择最小值和步长以计算刻度
- 最小值 - 取消自动选择时设置刻度的最小值。
- 自动最大值 - 自动选择最大值和步长以计算刻度
- 最大值 - 取消自动选择时设置刻度的最大值。
- 步长 - 设置刻度间隔
- 网格线 - 选择是否显示水平网格线
  ![Y轴网格][chart-bar-12]
- 刻度标记 - 选择是否显示 Y 轴上的刻度标记

---

## 2. 混合图表（垂直条形/折线图）

- 将数据表示为条形和折线的混合图表。 **（混合图表属性与条形图和折线图相同。）**
- 可以将数据表示为条形、折线或两者的混合。如果有多个系列（字段），可以显示为平行或堆叠条形图。
  ![混合图表类型][chart-mix-02]

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

### 2.1. 系列

- 使用“+”按钮可以为数据添加多个系列。
- **公共**
  - 数据引用 - 定义每个系列在 Y 轴上表示数据的字段名。例如，对于下面的数据，系列的 Data-Key 为 'Good' 和 'Bad'。  
    ![数据引用][chart-bar-01]
  - 类型 - 定义系列是表示为折线图还是条形图。
  - 标签 - 图例名称
  - 颜色 - 定义图表上系列的颜色
  - 累积组 - 累积同组内系列的值并在图表中显示。
    ![累积组][chart-bar-02]
  - 目标轴 - 应用双轴时，显示目标轴设置字段，指示系列引用的轴（轴刻度）。
    ![目标轴][chart-bar-03]
  - 值格式 - 显示值时可以指定值的数字格式。
  - 前缀 - 显示值时应用的前缀字符（例如：data: 100, 前缀: $ => 结果: $100）
  - 后缀 - 显示值时应用的后缀字符（例如：data: 100, 后缀: 元 => 结果: 100 元）
  - 值显示 - 决定是否在屏幕上显示系列数据。
    选择值显示时，会出现以下项目。
    - 字体颜色 - 设置系列标签颜色
    - 大小 - 设置系列标签字体大小
    - 位置 - 设置系列标签位置
    - 偏移量 - 设置系列标签的相对位置
    - 旋转 - 设置系列标签的旋转角度
- **折线类型**
  - 张力 - 使用直线（角度）或平滑线
  - 边界宽度 - 设置线条厚度
  - 点形状 - 定义线条每个顶点的点形状
  - 点大小 - 定义线条每个顶点的点大小
  - 填充 - 使用公共属性颜色填充线条下方空间

### 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'
- 图例 - 显示图表的图例。
- 位置 - 可以放置在四个方向：上（top）、下（bottom）、左（left）、右（right）。
- 双轴 - 选择是否将 Y 轴表示为两个轴（左和右）。选择时显示次要 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'
- 图例 - 显示图表的图例。
- 位置 - 可以放置在四个方向：上（top）、下（bottom）、左（left）、右（right）。
- 双轴 - 选择是否将 Y 轴表示为两个轴（左和右）。选择时显示次要 Y 轴及其选项。

### 4.2. 系列

- 使用“+”按钮可以为数据添加多个系列。
- **公共**
  - 数据引用 - 定义每个系列在 Y 轴上表示数据的字段名。例如，对于下面的数据，系列的 Data-Key 为 'Good' 和 'Bad'。  
    ![数据引用][chart-line-01]
  - 张力 - 使用直线（角度）或平滑线
  - 边界宽度 - 设置线条厚度
  - 标签 - 图例名称
  - 颜色 - 定义图表上系列的颜色
  - 点形状 - 定义线条每个顶点的点形状
  - 点大小 - 定义线条每个顶点的点大小
  - 累积组 - 累积同组内系列的值并在图表中显示。
  - 填充 - 使用公共属性颜色填充线条下方空间
  - 目标轴 - 应用双轴时

，显示目标轴设置字段，指示系列引用的轴（轴刻度）。

- 前缀 - 显示值时应用的前缀字符（例如：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'
- 图例 - 显示图表的图例。
- 位置 - 可以放置在四个方向：上（top）、下（bottom）、左（left）、右（right）。

### 5.2. 系列

- 使用“+”按钮可以为数据添加多个系列。
- **公共**
  - 数据引用 - 定义每个系列在 Y 轴上表示数据的字段名。例如，对于下面的数据，系列的 Data-Key 为 'Good' 和 'Bad'。  
    ![数据引用][chart-radar-01]
  - 标签 - 图例名称
  - 颜色 - 定义图表上系列的颜色
  - 累积组 - 累积同组内系列的值并在图表中显示。
  - 值格式 - 显示值时可以指定值的数字格式。
  - 前缀 - 显示值时应用的前缀字符（例如：data: 100, 前缀: $ => 结果: $100）
  - 后缀 - 显示值时应用的后缀字符（例如：data: 100, 后缀: 元 => 结果: 100 元）
  - 值显示 - 决定是否在屏幕上显示系列数据。
    选择值显示时，会出现以下项目。
    - 字体颜色 - 设置系列标签颜色
    - 大小 - 设置系列标签字体大小
    - 位置 - 设置系列标签位置
    - 偏移量 - 设置系列标签的相对位置
    - 旋转 - 设置系列标签的旋转角度

### 5.3. 轴

- 数据引用 - 定义每个系列在 Y 轴上表示数据的字段名。例如，对于下面的数据，引用的字段名为 'line'。
  ![数据引用][chart-radar-01]

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

---

## 6. 极坐标图

用极坐标表示数据的图表。

### 6.1. 公共属性

- 主题 - 更改图表的主题。支持 'light' 和 'dark'
- 图例 - 显示图表的图例。
- 位置 - 可以放置在四个方向：上（top）、下（bottom）、左（left）、右（right）。

### 6.2. 系列

- 使用“+”按钮可以为数据添加多个系列。
- **公共**
  - 数据引用 - 定义每个系列在 Y 轴上表示数据的字段名。例如，对于下面的数据，系列的 Data-Key 为 'Good'。  
    ![数据引用][chart-polar-01]
  - 标签 - 图例名称
  - 颜色 - 定义图表上系列的颜色
  - 值格式 - 显示值时可以指定值的数字格式。
  - 前缀 - 显示值时应用的前缀字符（例如：data: 100, 前缀: $ => 结果: $100）
  - 后缀 - 显示值时应用的后缀字符（例如：data: 100, 后缀: 元 => 结果: 100 元）
  - 值显示 - 决定是否在屏幕上显示系列数据。
    选择值显示时，会出现以下项目。
    - 字体颜色 - 设置系列标签颜色
    - 大小 - 设置系列标签字体大小
    - 位置 - 设置系列标签位置
    - 偏移量 - 设置系列标签的相对位置
    - 旋转 - 设置系列标签的旋转角度

### 6.3. 轴

- 数据引用 - 定义每个系列在 Y 轴上表示数据的字段名。例如，对于下面的数据，引用的字段名为 'hobby'。
  ![数据引用][chart-polar-01]

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

---

## 7. 饼图

用圆形表示数据的图表。

### 7.1. 公共属性

- 主题 - 更改图表的主题。支持 'light' 和 'dark'
- 图例 - 显示图表的图例。
- 位置 - 可以放置在四个方向：上（top）、下（bottom）、左（left）、右（right）。

### 7.2. 系列

- 使用“+”按钮可以为数据添加多个系列。
- **公共**
  - 数据引用 - 定义每个系列在 Y 轴上表示数据的字段名。例如，对于下面的数据，系列的 Data-Key 为 'Good'。  
    ![数据引用][chart-pie-01]
  - 标签 - 图例名称
  - 颜色 - 定义图表上系列的颜色
  - 值格式 - 显示值时可以指定值的数字格式。
  - 前缀 - 显示值时应用的前缀字符（例如：data: 100, 前缀: $ => 结果: $100）
  - 后缀 - 显示值时应用的后缀字符（例如：data: 100, 后缀: 元 => 结果: 100 元）
  - 值显示 - 决定是否在屏幕上显示系列数据。
    选择值显示时，会出现以下项目。
    - 字体颜色 - 设置系列标签颜色
    - 大小 - 设置系列标签字体大小
    - 位置 - 设置系列标签位置
    - 偏移量 - 设置系列标签的相对位置
    - 旋转 - 设置系列标签的旋转角度

### 7.3. 轴

- 数据引用 - 定义每个系列在 Y 轴上表示数据的字段名。例如，对于下面的数据，引用的字段名为 'line'。
  ![数据引用][chart-pie-01]

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

---

## 8. 甜甜圈图

![组件-甜甜圈图][chart-doughnut-01]

用甜甜圈形状表示数据的图表。

### 8.1. 公共属性

- 主题 - 更改图表的主题。支持 'light' 和 'dark'
- 图例 - 显示图表的图例。
- 位置 - 可以放置在四个方向：上（top）、下（bottom）、左（left）、右（right）。

### 8.2. 系列

- 使用“+”按钮可以为数据添加多个系列。
- **公共**
  - 数据引用 - 定义每个系列在 Y 轴上表示数据的字段名。例如，对于下面的数据，系列的 Data-Key 为 'Good'。  
    ![数据引用][chart-doughnut-01]
  - 标签 - 图例名称
  - 颜色 - 定义图表上系列的颜色
  - 值格式 - 显示值时可以指定值的数字格式。
  - 前缀 - 显示值时应用的前缀字符（例如：data: 100, 前缀: $ => 结果: $100）
  - 后缀 - 显示值时应用的后缀字符（例如：data: 100, 后缀: 元 => 结果: 100 元）
  - 值显示 - 决定是否在屏幕上显示系列数据。
    选择值显示时，会出现以下项目。
    - 字体颜色 - 设置系列标签颜色
    - 大小 - 设置系列标签字体大小
    - 位置 - 设置

系列标签位置 - 偏移量 - 设置系列标签的相对位置 - 旋转 - 设置系列标签的旋转角度

### 8.3. 轴

- 数据引用 - 定义每个系列在 Y 轴上表示数据的字段名。例如，对于下面的数据，引用的字段名为 'line'。
  ![数据引用][chart-doughnut-01]

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