11 款最佳条形图 Custom Web Control：适用于 WinCC Unified 和 WinCC V8（免费）

为什么值得用条形图 Custom Web Control

条形图就是值班主管的思维方式。哪条线产量最高？哪个区域超出了能耗预算？哪种缺陷总是反复出现？把答案并排画成柱子，操作员还没读一个数字就先看到了异常值——这正是条形图会出现在那么多 WinCC Unified 看板上的原因。

标准工具箱里有显示单个数值的棒图（Bar）对象，也有显示时间序列的趋势控件。但要比较多个类别、堆叠各班次、画帕累托图或 OEE 瀑布图，就轮到条形图 Custom Web Control（CWC）登场了。它是一个小型 Web 应用：HTML、CSS 和 JavaScript 打包成一个 ZIP，由 WinCC Unified（TIA Portal）和 WinCC V8 在画面中运行。它开放一组接口属性，比如 alarmThreshold 或 yAxisMax，你可以把它们绑定到 HMI 变量；它还能向你的 HMI 脚本触发事件，比如某根柱子被点击。

什么样的条形图 Custom Web Control 才值得下载

上榜单之前，先亮出我们的标尺。下面是我们看重的几点，大致按“缺了它有多让人抓狂”排序：

• 一眼就能看懂。 坐标轴清晰、刻度合理、标签在一米开外也能读清。一张把一半类别名藏起来的图表，是谜题，不是显示画面。
• 限值和目标。 警告线和报警线、每根柱子各自的目标值或颜色变化，能把一张好看的图表变成告诉操作员何时该动手的工具。
• 接口要有文档。 产品说明里写明属性名，打开 TIA Portal 之前你就知道要绑定什么。只写了属性数量的说明，只能进荣誉提名。
• 图表选对用途。 看占比用堆叠图，看历史用分组图，看缺陷用帕累托图，看 OEE 损失用瀑布图：每个问题我们只选一位冠军。
• 外观要沉稳。 深色扁平背景，颜色能调得素一些，好放进秉承 ISA-101 理念的高性能画面，鲜艳的颜色留给限值。

我们是怎么挑的（以及我们没做什么）

2026 年 10 月，我们在 HMIx 目录中搜遍了所有以柱形为核心的免费 Custom Web Control：普通条形图、堆叠图、分组图、子弹图、帕累托图和瀑布图。单个进度条、菜单栏和状态时间线不在此列。每个候选都看了它的真实预览图（不是目录里那张顶着大标题的封面），并读了产品说明，看它在文档里列出了哪些属性、事件和方法。下载量只在难分高下时才拿来参考，因为上个月才发布的图表，还没来得及攒下下载量。

产品说明里没写属性名、或者预览图有明显瑕疵的图表，哪怕再受欢迎，也只能进荣誉提名。另有两个直接淘汰：一个的预览图只显示控件图标，另一个画面发白，阈值标签还粘在坐标轴上。也得先说句实话：我们评判的是预览图和文档，并没有把这些控件放进真实的 Runtime 里跑过。它们都是用 AI 生成的，每个产品页面都会提醒你：上生产之前，先在你自己的 TIA Portal 项目里测试。

11 款最佳条形图 Custom Web Control，逐一点评

每一款都附上真实预览图、我们喜欢的地方、需要留意的地方，以及产品说明中列出的属性，最后是目录缩略图：点击即可打开产品页面，免费下载这款图表。

01综合最佳

Bar Chart with Limits

如果只能留一个，那就是它。“Power Consumption, by production zone”下面是 0 到 100 刻度上的五根柱子，一条琥珀色虚线标着“Warning 70”，一条红色虚线标着“Alarm 90”。超过警告线的两个区域自己变成了琥珀色，底部的图例把规则说得清清楚楚：Normal < 70、Warning ≥ 70、Alarm ≥ 90。角落里一个小小的 kW 标签注明了单位。

产品说明记录了 13 个属性，几乎全都写明了名字：限值用 warningThreshold 和 alarmThreshold，刻度用 yAxisMax，文字用 title、subtitle 和 unit（可绑定，标签能随工艺变化），配色用 normalColorStart、normalColorEnd、warningColor 和 alarmColor，另有 showGrid 和 backgroundColor。工具提示、OnBarClicked 事件以及 refreshChart 和 clearData 方法让它更加完整。

我们喜欢的

• +画出警告和报警限值，并据此给柱子着色
• +图例自带说明，操作员一看就懂
• +接口丰富，命名清晰

需要留意

• –发布的预览图看起来发白：卡片是灰色、标签很淡，坐标轴上方的单位还被截断了。设置好 backgroundColor，并在你的项目中检查
• –每张图只有一个序列：每个类别需要多个数值时，请看堆叠图或历史图

可绑定属性

• warningThreshold
• alarmThreshold
• yAxisMax
• title
• subtitle
• unit
• normalColorStart
• normalColorEnd
• warningColor
• alarmColor
• showGrid
• backgroundColor

Bar Chart with Limits

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

02窄屏和竖屏面板首选

Auto Adjust Bar Chart

放在哪儿都合适的那一款。五根渐变柱比较 Tank A 到 Tank E，刻度 0 到 100 m³；预览图中 Tank B 被高亮，工具提示显示“Value: 82.1 m³”。整洁、易读，每个坐标刻度上都带单位。

据产品说明，它的诀窍是能检测自身的宽高比，在竖向和横向柱子之间自动切换，所以无论是宽大的中控室显示器，还是 Unified Comfort Panel 上的窄小区域都同样适用。六个属性驱动它：data、unit、barColorStart、barColorEnd、showGrid 和 backgroundColor。点按柱子会显示工具提示并触发 BarClicked；clearSelection 可以从脚本中关闭它。

我们喜欢的

• +自动切换方向以适应空间
• +坐标轴和工具提示中都显示单位
• +只有六个属性

需要留意

• –没有限值或目标：只显示数值，仅此而已
• –预览图只展示了竖向布局，横向布局请在你自己的画面中试一试

可绑定属性

• data
• unit
• barColorStart
• barColorEnd
• showGrid
• backgroundColor

Auto Adjust Bar Chart

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

03堆叠条形图首选

Stacked Bar Chart

经典的班次报表，做得很到位。顶部是“STACKED PRODUCTION THROUGHPUT”，图例区分 Shift A（靛蓝）和 Shift B（橙色），七条生产线把两个班次堆叠在每小时 0 到 1,500 件的刻度上。总量和各班贡献，一眼看全。

数据放在 series 数组里，它决定每个堆叠层的数值和颜色；xAxisLabels 接收一个 JSON 数组作为类别。其余交给 chartTitle、yAxisTitle 和 backgroundColor。产品说明还写明了两个实用方法：exportAsImage 可把当前视图下载为 PNG，方便放进班次报告；另一个是 refreshChart。

我们喜欢的

• +一根柱子同时显示总量和各部分贡献
• +内置导出 PNG
• +接口简短，容易绑定

需要留意

• –七条线时，预览图只隔一个标一个（LINE A、C、E、G）：给它留足宽度
• –说明里没写任何事件名，如果需要点击交互，请在 TIA Portal 的接口列表中查看

可绑定属性

• series
• xAxisLabels
• chartTitle
• yAxisTitle
• backgroundColor

Stacked Bar Chart

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

04历史对比首选

Historical Bar Chart Viewer

与其说是图表，不如说是一个小型分析工具。侧边栏里有时间范围（预览图中为 2024-02-10 00:00 到 2024-02-17 23:59）、五个带复选框的参数和一个 Apply Changes 按钮；右侧是八天的分组柱，比较温度、压力、流量、湿度和电压。最高值和最低值竖着写在柱子里，还配了小箭头，极值一下就跳出来。

产品说明描述了七个核心属性：historicalData、parameters、startDate、endDate、chartTitle、yAxisLabel 和 backgroundColor。操作员修改日期时会触发 FilterChanged，你的脚本可以据此获取新数据；ParameterToggled 报告哪些序列被显示或隐藏；refreshChart 和 setTimeRange 则让其他画面可以驱动它。

我们喜欢的

• +日期范围和序列选择都内置在控件里
• +柱内突出显示最小值和最大值
• +事件现成，方便用脚本取数

需要留意

• –它不会自己读取你的归档：FilterChanged 触发时，要由你的脚本填充 historicalData
• –所有序列共用一条坐标轴，所以预览图里 220 左右的电压把另外四个参数压得很矮：把量程相近的参数放在一起

可绑定属性

• historicalData
• parameters
• startDate
• endDate
• chartTitle
• yAxisLabel
• backgroundColor

Historical Bar Chart Viewer

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

05每根柱子不同目标首选

Bar Chart with individual targets

每条线都有自己的目标，这张图尊重这一点。五根青绿色柱子，Zone A 到 Zone E，在 0 到 120 的刻度上各自带一条浅灰色目标线：Zone A 没达标，Zone B 和 Zone D 超过目标，Zone E 正好压在线上。不需要图例，画面自己就说明了一切。

产品说明写明了刻度用的 yAxisMax，外观用的 barWidth、positiveColor、showGrid、gridColor 和 backgroundColor，以及 tooltipValueLabel 和 tooltipTargetLabel，让工具提示说你的语言（比如“Actual”和“Plan”）。BarClicked 事件为诊断弹窗打开了大门，脚本还可以用 refreshChart 和 clearData。

我们喜欢的

• +每个类别一个目标，而不是全部共用一条线
• +工具提示标签可以改名
• +外观干净、安静

需要留意

• –预览图里坐标轴数字和区域名称又小又淡
• –预览图里无论是否达标，每根柱子都是同一种颜色

可绑定属性

• yAxisMax
• barWidth
• positiveColor
• tooltipValueLabel
• tooltipTargetLabel
• showGrid
• gridColor
• backgroundColor

Bar Chart with individual targets

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

06实际值对比目标值首选

Bullet bar Chart

子弹图是看板设计师对仪表盘的回答：信息一样多，占地却只有一小部分。在标题“Process Parameters”下，四根细长的青色柱显示实际值，醒目的白色标记标出各自的目标，背后淡淡的红、黄、绿色带提示质量区间。卡片底部是 Actual/Target 图例。

产品说明列出了九个属性。parameters 数组存放数据点，title 和 subtitle 负责文字，actualColor、targetColor 和 backgroundColor 负责配色。actualBarWidth 和 targetMarkerWidth 决定实际值与设定值之间的视觉主次，horizontalOffset 微调标记在色带上的位置。另有 OnParameterSelected 事件和 refreshChart 方法，接口就齐了。

我们喜欢的

• +极小的空间里放下实际值、目标和质量区间
• +Actual/Target 图例一目了然
• +OnParameterSelected 可用于下钻弹窗

需要留意

• –预览图里图表只占了卡片左半边，四根柱子中有两根没有标签
• –背景色带非常淡：请在实际屏幕亮度下检查

可绑定属性

• parameters
• title
• subtitle
• actualColor
• targetColor
• actualBarWidth
• targetMarkerWidth
• horizontalOffset
• backgroundColor

Bullet bar Chart

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

07实时生产节拍首选

Production Parts Per Minute Chart

榜单上唯一的浅色主题，也非常实用。“Parts Count per Minute”每分钟显示一根蓝色柱（预览图中从 17:44 到 17:53），角落里有一个“Last 10 minutes”选择器，最新一根柱子上的工具提示显示 60 parts/min。生产线的心跳，尽在一张卡片里。

你通过 productionValue 和 timestamp 一次喂给它一个样本，内部滚动缓冲区最多保留 historyLength 个样本。maxYAxis 固定刻度，chartTitle、yAxisLabel、barColor 和 backgroundColor 负责样式；产品说明一共列出九个属性。下拉框切换时间窗口并触发 TimeframeChanged，SampleAdded 和 BarClicked 报告其余情况，换批次时可以用 addProductionSample 和 clearHistory 管理数据。

我们喜欢的

• +只需一个变量就能自建滚动历史
• +时间窗口可由操作员选择
• +浅色设计干净，颜色可以修改

需要留意

• –在深色 HMI 主题上浅色卡片很扎眼，除非你修改 backgroundColor 和 barColor
• –历史数据存在控件的缓冲区里：用于报表之前，先确认切换画面后它还保留了什么

可绑定属性

• productionValue
• timestamp
• historyLength
• maxYAxis
• chartTitle
• yAxisLabel
• barColor
• backgroundColor

Production Parts Per Minute Chart

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

08缺陷与停机分析首选

Pareto Chart

80/20 法则，拿来就能绑定。蓝色柱按降序统计缺陷数量，从数量为 45 的划痕一直到“Others”；一条带圆点的红线沿第二坐标轴爬升累计百分比，直到 100 %。“Defects”和“Cumulative %”两个轴标题，哪条轴是哪条一目了然。

好在你不用自己排序或累加：据产品说明，控件会自行排序并计算累计值。它有八个属性，其中包括 barColor、lineColor、leftAxisTitle、rightAxisTitle、animationDuration、showGrid 和 backgroundColor。OnPointClick 事件让操作员下钻到某种缺陷类型，refresh 和 exportAsImage 则用于更新和出报告。

我们喜欢的

• +排序和累计百分比都替你算好
• +双坐标轴，标题清楚
• +可导出图片，方便质量会议

需要留意

• –白底上的浅灰标签太淡；提高对比度，或者换成深色 backgroundColor
• –预览图里五个类别只标出了三个

可绑定属性

• barColor
• lineColor
• leftAxisTitle
• rightAxisTitle
• animationDuration
• showGrid
• backgroundColor

Pareto Chart

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

09OEE 损失分析首选

OEE Waterfall Chart

榜单上最完整的看板。卡片顶部是“LINE-01 • PRIMARY PACKAGING”和“OEE Waterfall Analysis”，一个标签显示 Net OEE 79.9 %，目标为 80.0 %；瀑布从 100 % 计划时间出发，依次扣除停机损失（−11.5 %）、速度损失（−7.1 %）和缺陷损失（−1.5 %），最终落到 79.9 %。下方三张卡片显示可用率 88.5 %、性能 92.0 % 和质量 98.2 %，每张都附有计算公式。

产品说明写明了基准用的 targetOee，标题栏用的 equipmentTag 和 panelTitle，卡片用的文字属性如 availabilityLabel 和 performanceFormula，以及 backgroundColor。OEE 越过目标时触发 TargetThresholdCrossed，FactorCardClicked 用于打开详细分析，setFactors 一次性更新三个因子，画面永远不会出现更新了一半的数据。它是榜单上最新的一款，2026 年 9 月发布。

我们喜欢的

• +展示效率损失在哪里，而不只是最终数字
• +因子卡片附带公式，非常适合班次会议
• +setFactors 一次更新全部数据

需要留意

• –布局很宽：需要较大的区域才能保持易读
• –预览图里计划时间那根柱子只比背景深一点点

可绑定属性

• targetOee
• equipmentTag
• panelTitle
• availabilityLabel
• performanceFormula
• backgroundColor

OEE Waterfall Chart

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

10多变量设备健康首选

Synchronized Bar and Radar Chart

同样五个数字，两种看法。左边的“Process Metrics”把温度、压力、振动、流量和负载画成青到蓝的柱子，刻度 0 到 100，每根柱子背后都有一条深色轨道。右边的“System Footprint”把同样的指标画成绿色雷达形状。柱子方便精确比较；雷达图则给设备画出一枚你会慢慢认熟的“指纹”。

产品说明写明了 alarmThreshold（数值超限时柱子和雷达点变红）、渐变用的 barColorStart 和 barColorEnd、barChartTitle 和 radarChartTitle、showTooltips 以及 backgroundColor。所有指标都通过一个结构化数组管理。脚本方面有 OnMetricSelected 事件和 refreshCharts 方法。

我们喜欢的

• +精确数值和整体形状并排呈现
• +一个报警阈值同时为两张图着色
• +天生适合电机和泵的状态画面

需要留意

• –预览图里两张图的上下都留了大片空白
• –雷达图的轴标签偏小：放到面板上之前先检查

可绑定属性

• alarmThreshold
• barChartTitle
• radarChartTitle
• barColorStart
• barColorEnd
• showTooltips
• backgroundColor

Synchronized Bar and Radar Chart

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

11展厅与访客屏首选

Futuristic Bar Chart

不是每块屏幕都放在中控室。“SYSTEM LOAD MONITOR”以霓虹青色在淡淡的网格上发光，三根宽柱——Zone Alpha、Beta 和 Gamma——在 0 到 100 % 的刻度上从青色渐变到粉色。参观走廊的大屏或展会演示，放的就是这种图。

六个属性都很简单：数据用 bars 数组，刻度用 maxValue，再加上 title、showGrid、可选 CRT 效果的 showScanlines 和 backgroundColor。交互方面有 BarClicked 事件和 refreshChart 方法。

我们喜欢的

• +视觉冲击力强，拍照很出效果
• +只有六个属性
• +扫描线和网格可选

需要留意

• –围绕三根柱子设计：不适合很长的类别列表
• –霓虹风格与沉稳的 ISA-101 画面背道而驰；别放进操作员的主视图

可绑定属性

• bars
• maxValue
• title
• showGrid
• showScanlines
• backgroundColor

Futuristic Bar Chart

免费 · WinCC Unified & V8 · CWC (.zip)

↓查看并免费下载✦用 AI 编辑

荣誉提名：另外 5 款值得一看的条形图

这些控件都不错，没挤进前十一，原因是产品说明里没写属性名，或者预览图里有值得先检查的瑕疵。点击任意缩略图即可打开产品页面。

• 

  Modern Bar Chart

  2026 年 10 月目录中下载量最高的条形图：十二根月度柱，带数值标签和靛蓝到青绿的渐变。预览图是西班牙语（“Rendimiento Operativo”，ENE 到 DIC），柱子超出了卡片底部；说明里写了十个属性、两个事件和两个方法，但没列出名字。

  查看产品 →
• 

  Grouped Bars Charts

  Historical Bar Chart Viewer 的近亲，带 7 Days、30 Days 和 All 快捷按钮、附单位的参数卡片，数值写在柱子里。十三个属性；如果你更喜欢快捷范围而不是手动输入日期，就选它。

  查看产品 →
• 

  Grouped Bar Chart

  分组条形图，带可搜索的参数侧边栏、Select All 和 Clear All 按钮以及日期范围。据说明有十个属性；预览图比较空，只有三组细柱。

  查看产品 →
• 

  Bar Chart with limit

  霓虹渐变柱，超过 alarmThreshold 时变红，可选发光效果，共 16 个属性。预览图里看不到阈值线，尽管说明里列出了 showThresholdLine：值得检查一下。

  查看产品 →
• 

  Monthly Energy Bar Chart

  根据 PLC 累计值计算月度能耗，并为超过 consumptionSetpoint 的柱子着色。想法很好；只是预览图白底上的标签非常淡，坐标轴顶端的数值还显示成了 1,650.0000000000002。

  查看产品 →

如何在 WinCC Unified（以及 WinCC V8）中使用条形图 Custom Web Control

精简版，留给已经选好图表的你。我们的 Custom Web Control 指南配有示意图和截图，每一步都讲得很细。

1. 1

   下载 ZIP

   打开产品页面，用免费账号登录，然后下载图表。下载的 ZIP 中包含说明文档，以及名为 {GUID}.zip 的控件包：你需要的是这个内部文件。

2. 2

   复制到你的 TIA Portal 项目中

   把 {GUID}.zip 文件保持压缩状态，复制到项目文件夹下的 UserFiles\CustomControls 中（如果这两个文件夹不存在，就自己新建）。不要解压。

3. 3

   刷新“我的控件”并拖到画面上

   在 TIA Portal 中，打开工具（Tools）任务卡，展开“我的控件”（My controls）窗格，然后点击更新按钮。图表会出现在列表中：把它拖到画面上，并给标签留出足够的空间。

4. 4

   绑定并测试属性

   选中控件，在巡视窗口（Inspector window）中打开“属性 → 属性 → 接口”（Interface）。这些图表大多以数组或 JSON 字符串的形式接收数据（data、series、bars……），所以先把它绑定到一个内部字符串变量，再添加一个 I/O 域或一段写入几个数值的测试脚本，然后启动 Runtime。柱子表现正常后，再换成真实的 PLC 数据。

5. 5

   在 WinCC V8 中

   本文所有入选图表的产品页面都标注了兼容 WinCC V8。控件包是同一个；在该环境中导入和组态 Custom Web Controls 时，请按照 WinCC V8 的文档操作。

进阶提示：图表只负责显示数据，所以绑定属性时请保留“只读”（Read only）勾选。只有控件本身需要回写变量的属性，才取消勾选，产品说明里也有这样的提醒。另外，把刻度（yAxisMax、maxValue、maxYAxis……）固定为工艺的实际范围：每次更新都跳动的刻度，会让柱子之间根本没法比较。

常见问题

我们的结论

如果只下载一个，就选 Bar Chart with Limits：警告线和报警线会自动为柱子着色，图例操作员一看就懂。每个类别一个目标，选 Bar Chart with individual targets 或小巧的 Bullet bar Chart；看班次，选 Stacked Bar Chart；看历史，选 Historical Bar Chart Viewer；看实时产量，选 Production Parts Per Minute Chart；看质量，选 Pareto Chart；看效率，选 OEE Waterfall Chart。设备健康交给 Synchronized Bar and Radar Chart，窄面板交给 Auto Adjust Bar Chart，访客屏交给 Futuristic Bar Chart。

如果你的工厂提出的问题这些都回答不了（现实中总是如此），别忘了，做出它们的那个生成器，离你只有一次点击。