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