Pages
自定义柱状图（Custom Bargraph）
Custom Bargraph 控件是一种功能强大且可配置的组件，可将实时数据以横向或纵向柱状图的形式进行可视化。
它支持高度自定义，非常适合用于监测温度、压力或液位等模拟量。
概述
该控件不仅能持续显示绑定变量的柱状图，还可显示数值、单位、标签及报警阈值，帮助用户快速直观地理解系统状态。
主要功能
动态数据展示
- 连接实时数据变量（例如来自 CODESYS 或 MQTT）
- 柱体高度/长度实时反映当前值
数值与单位
- 可选显示当前数值
- 可添加单位后缀（如 °C、% 或 bar）以增强可读性
自定义标签
- 支持最多 两个标签（例如“输入压力”、“最大安全值”）
- 用于描述或分类当前所展示的数值含义
中间刻度标记
- 可显示最多 5 个参考刻度值
- 适用于标注“正常”、“警告”或“临界”等状态范围
报警阈值
- 支持最多 6 个报警限值定义
- 当数值进入指定阈值区间时，图形会做出视觉提示，便于操作员快速响应
可配置样式
- 可设置颜色、方向（横向或纵向）和整体样式，以匹配界面设计
典型应用场景
过程监控
- 示例：显示罐体液位或泵的压力，并在超限或欠压时发出视觉预警
环境数据监测
- 示例：展示温湿度，并通过颜色区分安全/危险区间
产线监控
- 示例：监控速度、负载或计数值，当超过设定阈值时高亮提示
SVG ID 参考表
[img_1]
以下 SVG ID 可用于将动态数据绑定到自定义柱状图中的图形元素：
| # | 元素说明 | SVG ID |
|---|---|---|
| 1 | 标签行 1 | [code_block_0] |
| 2 | 标签行 2 | [code_block_1] |
| 3 | 中间刻度值 5 | [code_block_2] |
| 4 | 中间刻度值 4 | [code_block_3] |
| 5 | 中间刻度值 3 | [code_block_4] |
| 6 | 中间刻度值 2 | [code_block_5] |
| 7 | 中间刻度值 1 | [code_block_6] |
| 8 | 当前值指示器（Thumb） | [code_block_7] |
| 9 | 主数值 | [code_block_8] |
| 10 | 单位文本 | [code_block_9] |
| 11 | 柱状图路径（外框） | [code_block_10] |
| 12 | 柱状图填充 | [code_block_11] |
| 13 | 上限阈值 1 | [code_block_12] |
| 14 | 上限阈值 2 | [code_block_13] |
| 15 | 上限阈值 3 | [code_block_14] |
| 16 | 下限阈值 1 | [code_block_15] |
| 17 | 下限阈值 2 | [code_block_16] |
| 18 | 下限阈值 3 | [code_block_17] |
| 19 | 根样式类（Root Class） | [code_block_18] |
DATA JSON 接口结构
[code_block_19]