🎨 智能颜色显示系统演示
根据每个数据流的历史范围动态计算颜色,两位小数精度显示
正常 (良好范围)
中等 (一般范围)
警告 (偏离范围)
异常 (极值范围)
🌡️ 温度监控
范围通常在 18-35°C,值越接近中等温度越好
sensor001
卧室温度
19.5
°C
sensor001
客厅温度
24.2
°C
sensor001
阳台温度
31.8
°C
💧 湿度监控
范围通常在 30-85%,适中湿度最佳
sensor002
卧室湿度
35.2
%
sensor002
客厅湿度
58.7
%
sensor002
浴室湿度
78.9
%
🔋 电池电压监控
范围通常在 3.2-4.2V,高电压表示电池健康
device003
传感器A电池
3.4
V
device003
传感器B电池
3.8
V
device003
传感器C电池
4.1
V
⚡ 简化版本对比
不带Tooltip的轻量级显示
temperature
19.5
temperature
24.2
temperature
31.8
humidity
35.2
humidity
58.7
humidity
78.9
battery
3.4
battery
3.8
💡 工作原理
1. 动态范围计算: 系统会查询每个数据流的历史最小值和最大值,而不是使用固定阈值。
2. 智能类型识别: 自动识别数据类型(如电池、信号强度使用反转逻辑,高值为好)。
3. 两位小数精度: 自动处理数值精度,整数显示为整数,小数保留两位。
4. 缓存优化: 使用 sessionStorage 缓存统计数据,适配无服务器环境。
5. 回退机制: 如果无法获取历史数据,自动回退到基于数据类型的预设阈值。