thingsboard/summary/27-图表显示设备名称配置指南.md

# 图表显示设备名称配置指南

## 问题描述

在 ThingsBoard 的时间序列图表中，图表标签只显示通用的 "Temperature" 等名称，无法区分不同设备的数据。

## 解决方案

在配置图表的数据源时，可以使用变量来自定义标签，显示设备名称。

### 配置步骤

#### 1. 进入图表配置

1. 在 Dashboard 中，点击图表组件进入编辑模式
2. 右侧会显示配置面板

#### 2. 配置数据键标签（在"数据"标签页）

1. 点击配置面板顶部的 **"数据"** 标签页
2. 找到 **"数据键"**（Data Keys）部分
3. 对于每个数据键，点击展开或编辑
4. 在 **"标签"**（Label）字段中，使用以下变量格式：

**可用的变量：**
- `${entityName}` - 设备名称（推荐）
- `${deviceName}` - 设备名称（与 entityName 相同）
- `${entityLabel}` - 设备标签（如果有设置）
- `${dsName}` - 数据源名称
- `${aliasName}` - 别名名称

**示例配置：**

```
${entityName} - 温度
```

或者：

```
${entityName}
```

或者组合使用：

```
${entityName} (${entityLabel})
```

#### 3. 具体操作示例

假设你有 4 个设备，每个设备都发送 `airport.temperature` 数据：

1. **在"数据"标签页中：**
   - 找到数据键配置区域
   - 对于 `airport.temperature` 这个数据键
   - 将标签从 `Temperature` 改为：`${entityName} - 温度`

2. **如果使用 Entity Alias：**
   - 如果使用了 Entity Alias（如 "所有设备"）
   - 标签会显示为：`设备名称 - 温度`
   - 例如：`7CTDM7H00B5EM1 - 温度`

#### 4. 图例显示

配置后，图表的图例（Legend）会显示：
- `7CTDM7H00B5EM1 - 温度`
- `7CTXM9Q00B02H2 - 温度`
- `7CTXN5K00B0AXM - 温度`
- `7CTXM9500B01LA - 温度`

这样就能清楚地区分不同设备的数据了。

## 详细配置说明

### 数据键标签格式

在 **数据** 标签页 → **数据键** → **标签** 字段中：

**格式1：仅设备名称**
```
${entityName}
```

**格式2：设备名称 + 描述**
```
${entityName} - 温度
```

**格式3：设备标签（如果有）**
```
${entityLabel}
```

**格式4：数据源名称**
```
${dsName}
```

**格式5：组合使用**
```
${entityName} (${entityLabel})
```

### 变量说明

| 变量 | 说明 | 示例值 |
|------|------|--------|
| `${entityName}` | 设备名称 | `7CTDM7H00B5EM1` |
| `${deviceName}` | 设备名称（同 entityName） | `7CTDM7H00B5EM1` |
| `${entityLabel}` | 设备标签（如果设置了） | `设备A` |
| `${dsName}` | 数据源名称 | `设备数据源` |
| `${aliasName}` | Entity Alias 名称 | `所有无人机设备` |

### 多数据源场景

如果图表中有多个数据源（多个设备），每个数据源的数据键都会使用相同的标签格式，但 `${entityName}` 会替换为对应设备的名称。

**示例：**
- 设备1 `7CTDM7H00B5EM1` 的标签：`7CTDM7H00B5EM1 - 温度`
- 设备2 `7CTXM9Q00B02H2` 的标签：`7CTXM9Q00B02H2 - 温度`

## 配置位置图示

```
配置面板
├── 数据 (Data) ← 在这里配置
│   ├── 数据源 (Datasources)
│   └── 数据键 (Data Keys)
│       └── 标签 (Label): ${entityName} - 温度
├── 外观 (Appearance)
├── 卡片 (Card)
├── 动作 (Actions)
└── 布局 (Layout)
```

## 验证配置

配置完成后：

1. **查看图例：**
   - 图表底部的图例应该显示设备名称
   - 例如：`7CTDM7H00B5EM1 - 温度`

2. **查看悬停提示：**
   - 鼠标悬停在图表线条上时
   - 提示框应该显示设备名称

3. **查看汇总表：**
   - 如果图表上方有汇总表
   - 表格中的行标题应该显示设备名称

## 常见问题

### Q1: 配置后仍然显示 "Temperature"

**原因：**
- 可能没有保存配置
- 或者变量格式不正确

**解决：**
1. 确保变量格式正确：`${entityName}` 而不是 `{entityName}` 或 `$entityName`
2. 点击 **"应用"** 按钮保存配置
3. 刷新页面查看效果

### Q2: 所有设备都显示相同的名称

**原因：**
- 可能使用了 Entity Alias，但没有正确配置多设备

**解决：**
1. 检查数据源配置
2. 确保 Entity Alias 选择了多个设备
3. 或者为每个设备单独配置数据源

### Q3: 变量显示为文本而不是设备名称

**原因：**
- 变量格式错误
- 或者数据源配置不正确

**解决：**
1. 检查变量格式：使用 `${entityName}` 而不是 `${entityName}`（注意大括号）
2. 确保数据源已正确关联到设备

## 高级配置

### 使用设备标签代替设备名称

如果设备设置了标签（Label），可以使用：

```
${entityLabel} - 温度
```

这样会显示更友好的名称，而不是设备ID。

### 组合多个变量

```
${entityName} (${entityLabel}) - 温度
```

显示效果：`7CTDM7H00B5EM1 (设备A) - 温度`

## Y 轴显示实际数值配置

### 问题描述

如果 Y 轴显示的是比例尺（如 0-100）而不是实际数值（如 18、19、20、21），需要配置 Y 轴设置。

### 配置步骤

#### 1. 进入 Y 轴配置

1. 在图表配置面板中，点击 **"外观"**（Appearance）标签页
2. 找到 **"Y 轴"**（Y Axes）部分
3. 展开 Y 轴配置（通常是 "default"）

#### 2. 配置 Y 轴标签显示

在 Y 轴配置中，确保以下设置：

1. **显示刻度标签**（Show Tick Labels）：**开启** ✓
   - 这个选项必须开启，否则不会显示数值

2. **小数位数**（Decimals）：设置合适的数值
   - 例如：`0`（显示整数）或 `1`（显示一位小数）
   - 对于温度数据，通常设置为 `0` 或 `1`

3. **单位**（Units）：可选
   - 例如：`°C` 或 `℃`（如果显示温度）

#### 3. 配置位置

```
配置面板
├── 外观 (Appearance) ← 在这里配置
│   └── Y 轴 (Y Axes)
│       └── default
│           ├── 显示刻度标签 (Show Tick Labels): ✓ 开启
│           ├── 小数位数 (Decimals): 0 或 1
│           └── 单位 (Units): °C (可选)
```

#### 4. 具体操作

1. **打开 Y 轴配置：**
   - 点击 "外观" 标签页
   - 找到 "Y 轴" 部分
   - 点击展开 "default" Y 轴配置

2. **启用标签显示：**
   - 找到 "显示刻度标签"（Show Tick Labels）开关
   - 确保它是 **开启** 状态（绿色/蓝色）

3. **设置小数位数：**
   - 找到 "小数位数"（Decimals）字段
   - 设置为 `0`（整数）或 `1`（一位小数）

4. **重要 - 清空最小值/最大值（让 Y 轴自动调整）：**
   - 找到 "最小值"（Min）字段
   - **清空该字段**（留空，不要填 0 或其他值）
   - 找到 "最大值"（Max）字段
   - **清空该字段**（留空，不要填 100 或其他值）
   - 这样 Y 轴会根据实际数据自动调整范围，而不是固定显示 0-100

5. **可选 - 设置单位：**
   - 找到 "单位"（Units）字段
   - 输入 `°C` 或 `℃`（如果需要显示温度单位）

6. **保存配置：**
   - 点击 **"应用"** 按钮保存

### Y 轴配置说明

| 配置项 | 说明 | 推荐值 |
|--------|------|--------|
| **显示刻度标签** | 控制是否在 Y 轴上显示数值 | 开启 ✓ |
| **小数位数** | 控制数值显示的小数位数 | 0（整数）或 1（一位小数） |
| **单位** | 显示在 Y 轴标签后的单位 | `°C`（温度）或留空 |
| **最小值** | Y 轴的最小值（可选） | 留空（自动） |
| **最大值** | Y 轴的最大值（可选） | 留空（自动） |

### 验证配置

配置完成后：

1. **查看 Y 轴：**
   - Y 轴左侧应该显示实际数值
   - 例如：`10`, `15`, `20`, `25`, `30`
   - 而不是比例尺或百分比

2. **查看数值格式：**
   - 如果设置了单位，应该显示：`10°C`, `15°C`, `20°C`
   - 如果设置了小数位数，应该显示对应的小数位

### 常见问题

#### Q1: Y 轴仍然显示比例尺

**原因：**
- "显示刻度标签" 选项未开启
- 或者小数位数设置不正确

**解决：**
1. 确保 "显示刻度标签" 开关是 **开启** 状态
2. 检查小数位数设置（建议设置为 `0` 或 `1`）
3. 点击 "应用" 保存配置
4. 刷新页面查看效果

#### Q2: Y 轴数值显示不完整

**原因：**
- 可能数值太大或太小，需要设置合适的范围

**解决：**
1. 在 Y 轴配置中设置 "最小值"（Min）和 "最大值"（Max）
2. 或者保持为空，让系统自动计算

#### Q4: Y 轴范围与汇总表数据不一致

**问题描述：**
- 汇总表显示最大值、最小值、平均值都是 20 左右
- 但 Y 轴显示到 100，图表刻度范围过大

**原因：**
- Y 轴的 "最大值" 被固定设置为 100
- 应该设置为自动，让系统根据实际数据范围计算

**解决：**
1. 在 Y 轴配置中找到 "最大值"（Max）字段
2. **清空**该字段（留空），让系统自动计算
3. 同样，将 "最小值"（Min）字段也**清空**（留空）
4. 点击 "应用" 保存配置

**配置后效果：**
- Y 轴会自动根据数据的实际范围调整
- 如果数据在 20-30°C 之间，Y 轴会显示类似 15-35°C 的范围（包含一些边距）
- 这样图表会更清晰地显示数据变化

#### Q3: Y 轴数值格式不正确

**原因：**
- 小数位数设置不合适
- 或者单位设置不正确

**解决：**
1. 调整 "小数位数" 设置
2. 检查 "单位" 设置是否正确
3. 对于温度数据，建议小数位数为 `0` 或 `1`

## 参考

- ThingsBoard Widget 配置文档：https://thingsboard.io/docs/user-guide/ui/widgets/
- 数据源变量：https://thingsboard.io/docs/user-guide/ui/widgets/#datasource-variables