358 lines
9.5 KiB
Markdown
358 lines
9.5 KiB
Markdown
# 图表显示设备名称配置指南
|
||
|
||
## 问题描述
|
||
|
||
在 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
|
||
|