Pages

旋转条形图（Rotating Bargraph）

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

概述

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

核心功能

旋转可视化

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

条形图功能

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

实时变量绑定

• 可绑定至 CODESYS、MQTT 等数据源实现实时数据更新
• 条形图与旋转部分可绑定相同或不同变量

数值与单位显示

• 可选项：显示当前数值和单位（如 °、N、RPM）
• 在图形基础上增加清晰的数值信息

自定义标签与样式

• 可添加自定义标签、样式并自定义颜色主题以匹配整体界面
• 同时支持数值型与符号型信息展示

典型应用场景

导航仪表

• 示例：显示船舶航向、舵角或风向

工业监控

• 示例：展示阀门、转盘等机械部件的旋转位置

方向反馈

• 示例：可视化来自陀螺仪或罗盘传感器的角度反馈

SVG ID 参考表

使用以下 SVG ID 将数据绑定至旋转条形图中的各个图形元素：

代码示例（Code Snippet Example）

<g id="rotateGroup">
    <g id="barPathArea">
      <path class="cls-7" d="M790.25,432.42H209.11a50.72,50.72,0,0,0-50.72,50.72v33.6a50.72,50.72,0,0,0,50.72,50.72H790.25A50.72,50.72,0,0,0,841,516.74v-33.6A50.72,50.72,0,0,0,790.25,432.42Zm36.29,79.89a42.16,42.16,0,0,1-42.16,42.16H215.62a42.16,42.16,0,0,1-42.16-42.16V487.79a42.16,42.16,0,0,1,42.16-42.16H784.38a42.16,42.16,0,0,1,42.16,42.16Z" transform="translate(0.82 0.52)"/>
      <line class="cls-8" x1="330.01" y1="432.84" x2="330.01" y2="446.15"/>
      <line class="cls-8" x1="415.42" y1="432.83" x2="415.42" y2="446.14"/>
      <line class="cls-8" x1="244.61" y1="432.83" x2="244.61" y2="446.14"/>
      <line class="cls-8" x1="330.01" y1="555" x2="330.01" y2="568.15"/>
      <line class="cls-8" x1="415.42" y1="554.99" x2="415.42" y2="568.14"/>
      <line class="cls-8" x1="244.61" y1="554.99" x2="244.61" y2="568.14"/>
      <line class="cls-8" x1="672.38" y1="432.81" x2="672.38" y2="446.12"/>
      <line class="cls-8" x1="757.78" y1="432.8" x2="757.78" y2="446.11"/>
      <line class="cls-8" x1="586.98" y1="432.8" x2="586.98" y2="446.11"/>
      <line class="cls-8" x1="672.38" y1="554.97" x2="672.38" y2="568.12"/>
      <line class="cls-8" x1="757.78" y1="554.96" x2="757.78" y2="568.11"/>
      <line class="cls-8" x1="586.98" y1="554.96" x2="586.98" y2="568.11"/>
    </g>
    <g id="barLFillArea">
      <rect id="barLFill" class="cls-9" x="360.31" y="446.15" width="140.19" height="108.84"/>
      <line class="cls-10" x1="360.31" y1="432.94" x2="360.31" y2="568.2"/>
    </g>
    <rect id="barPath" class="cls-12" x="208.49" y="446.11" width="584.84" height="106.58"/>
    <line id="thumb" class="cls-11" x1="500.82" y1="432.94" x2="500.82" y2="568.2"/>
  </g> ```