Pages

旋转条形图(Rotating Bargraph)

Rotating Bargraph(旋转条形图) 是一种动态图形控件,将标准条形图的功能与旋转功能相结合。
它不仅可以通过条形填充展示变量值,还包含一个 rotateGroup 元素,可根据实时数值旋转,适用于如罗盘、方位角指示器或船舶仪表等方向性应用。


概述

与标准的 Custom Bargraph(自定义条形图) 类似,Rotating Bargraph 能实时显示数据并支持数值、单位和阈值显示。
其额外的旋转功能使其能够可视化方向或角度数据,为操作员提供更丰富的反馈。


核心功能

旋转可视化

  • 包含一个 rotateGroup SVG 元素,可根据实时变量旋转
  • 适合显示角度类数据,例如罗盘方向、风向、雷达扫描角度等

条形图功能

  • 支持水平或垂直填充的条形图展示
  • 可配置阈值、警报和中间参考刻度

实时变量绑定

  • 可绑定至 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