Pages

自定义柱状图（Custom Bargraph）

Custom Bargraph 控件是一种功能强大且可配置的组件，可将实时数据以横向或纵向柱状图的形式进行可视化。
它支持高度自定义，非常适合用于监测温度、压力或液位等模拟量。

概述

该控件不仅能持续显示绑定变量的柱状图，还可显示数值、单位、标签及报警阈值，帮助用户快速直观地理解系统状态。

主要功能

动态数据展示

• 连接实时数据变量（例如来自 CODESYS 或 MQTT）
• 柱体高度/长度实时反映当前值

数值与单位

• 可选显示当前数值
• 可添加单位后缀（如 °C、% 或 bar）以增强可读性

自定义标签

• 支持最多 两个标签（例如“输入压力”、“最大安全值”）
• 用于描述或分类当前所展示的数值含义

中间刻度标记

• 可显示最多 5 个参考刻度值
• 适用于标注“正常”、“警告”或“临界”等状态范围

报警阈值

• 支持最多 6 个报警限值定义
• 当数值进入指定阈值区间时，图形会做出视觉提示，便于操作员快速响应

可配置样式

• 可设置颜色、方向（横向或纵向）和整体样式，以匹配界面设计

典型应用场景

过程监控

• 示例：显示罐体液位或泵的压力，并在超限或欠压时发出视觉预警

环境数据监测

• 示例：展示温湿度，并通过颜色区分安全/危险区间

产线监控

• 示例：监控速度、负载或计数值，当超过设定阈值时高亮提示

SVG ID 参考表

以下 SVG ID 可用于将动态数据绑定到自定义柱状图中的图形元素：

DATA JSON 接口结构

{
    "value": "20",
    "label1": "Custom Bar label 1",
    "label2": "Custom Bar label 2",
    "unit": "",
    "ticks": [
        "0",
        "10",
        "20",
        "50",
        "100"
    ],
    "parameters": {
        "pMin": -20,
        "pMax": 200,
        "pLimitHi1": {
            "enabled": true,
            "value": 150
        },
        "pLimitHi2": {
            "enabled": true,
            "value": 170
        },
        "pLimitHi3": {
            "enabled": true,
            "value": 190
        },
        "pLimitLo1": {
            "enabled": true,
            "value": 20
        },
        "pLimitLo2": {
            "enabled": true,
            "value": -10
        },
        "pLimitLo3": {
            "enabled": true,
            "value": -15
        }
    },
    "theme": {
        "barBorder": "",
        "barPath": "",
        "barLFill": "",
        "barRFill": "",
        "thumb": ""
    },
    "general": {
        "rootClass": ""
    }
}