Pages
旋转条形图(Rotating Bargraph)
Rotating Bargraph(旋转条形图) 是一种动态图形控件,将标准条形图的功能与旋转功能相结合。
它不仅可以通过条形填充展示变量值,还包含一个 rotateGroup 元素,可根据实时数值旋转,适用于如罗盘、方位角指示器或船舶仪表等方向性应用。
概述
与标准的 Custom Bargraph(自定义条形图) 类似,Rotating Bargraph 能实时显示数据并支持数值、单位和阈值显示。
其额外的旋转功能使其能够可视化方向或角度数据,为操作员提供更丰富的反馈。
核心功能
旋转可视化
- 包含一个
rotateGroupSVG 元素,可根据实时变量旋转 - 适合显示角度类数据,例如罗盘方向、风向、雷达扫描角度等
条形图功能
- 支持水平或垂直填充的条形图展示
- 可配置阈值、警报和中间参考刻度
实时变量绑定
- 可绑定至 CODESYS、MQTT 等数据源实现实时数据更新
- 条形图与旋转部分可绑定相同或不同变量
数值与单位显示
- 可选项:显示当前数值和单位(如 °、N、RPM)
- 在图形基础上增加清晰的数值信息
自定义标签与样式
- 可添加自定义标签、样式并自定义颜色主题以匹配整体界面
- 同时支持数值型与符号型信息展示
典型应用场景
导航仪表
- 示例:显示船舶航向、舵角或风向
工业监控
- 示例:展示阀门、转盘等机械部件的旋转位置
方向反馈
- 示例:可视化来自陀螺仪或罗盘传感器的角度反馈
SVG ID 参考表
[img_1]
使用以下 SVG ID 将数据绑定至旋转条形图中的各个图形元素:
| # | 元素说明 | SVG ID |
|---|---|---|
| 1 | 条形轨道路径 | [code_block_2] |
| 2 | 条形填充区域 | [code_block_3] |
| 3 | 拇指(当前值指示器) | [code_block_4] |
| 4 | 旋转中心容器 | rotateGroup |
代码示例(Code Snippet Example)
[code_block_6]
rotateGroup
