饼图、桑基图和热力图：9 款最佳 Custom Web Control，适用于 WinCC Unified 和 WinCC V8（免费）

为什么饼图、桑基图和热力图 Custom Web Control 能补上真正的空缺

每个工厂都有一些趋势曲线答不好的问题。这一班的时间都去哪儿了：生产、换型、空闲还是故障？哪条产线最耗能？一周里哪个小时总是负荷偏高？饼图回答第一个，桑基图回答第二个，热力图回答第三个——而 WinCC 的标准对象都不是为它们设计的。

这正是图表 Custom Web Control（CWC）的用武之地。CWC 是一个小型 Web 应用：HTML、CSS 和 JavaScript 打包成一个 ZIP，由 WinCC Unified（TIA Portal）和 WinCC V8 在画面中运行。大多数图表类 CWC 通过 slices、nodes 或 heatmapData 这类属性，以数组或 JSON 字符串的形式接收数据：你的 HMI 变量和脚本提供数字，控件负责画出来。很多控件还会触发 SliceClicked 或 CellClicked 之类的事件，点一下扇区或单元格就能打开详情画面。

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

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

• 图表要对得上问题。 整体中的占比用饼图，流向用桑基图，随时间变化的规律用热力图，多个变量与参考值对比用雷达图。图表再好看，答错了问题也只是添乱。
• 在面板上看得清。 标签不被截断，数值或百分比真能读出来，色标一看就懂。花哨的渐变代替不了一个清晰的数字。
• 数据约定要干净。 数据放在一个有文档的属性里（slices、links、heatmapData、points），你就清楚变量或脚本到底要写什么。
• 交互要有去处。 扇区、节点或单元格上的点击事件，能把一张图变成导航。只写了属性数量的说明，只能进荣誉提名。
• 每种用途一位冠军。 饼图或环形图、双环饼图、雷达图、两款桑基图、两款热力图、一款漏斗图和一款散点图：问题不同，工具也不同。

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

2026 年 11 月，我们在 HMIx 目录中搜遍了所有绘制饼图、环形图、雷达图、桑基图、热力图、漏斗图、散点图或气泡图的免费 Custom Web Control。棒图和趋势图已经有各自的文章，所以不在此列。每个候选都看了它的真实预览图（不是目录里那张顶着大标题的封面），读了产品说明；作者在图库里发布了 TIA Portal 截图的，也一并看了，以确认它在文档里列出了哪些属性、事件和方法。下载量只在难分高下时才拿来参考。

产品页面没写属性名的控件，只能进荣誉提名。我们淘汰了一款气泡图——它的坐标轴写着“Efficiency (%)”，刻度却一路到 70,000——还有一款已经在棒图文章里入选过的图表。也得先说句实话：我们评判的是预览图和文档，并没有把这些控件放进真实的 Runtime 里跑过。它们都是用 AI 生成的，每个产品页面都会提醒你：上生产之前，先在你自己的 TIA Portal 项目里测试。

9 款最佳饼图、桑基图、热力图及其他图表 Custom Web Control，逐一点评

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

01综合最佳（饼图或环形图）

Pie Chart

如果只能留一个，那就是它，因为它回答的正是你最常被问到的问题：时间都去哪儿了？预览图是一个干净的深色环形图，分为 Production、Idle、Maintenance、Fault 和 Setup，配色依次为蓝、灰、橙、红和紫，右侧是低调的图例。这正是 OEE 画面需要的设备状态分布，而且一点也不吵。

饼图还是环形图，由你决定：innerRadius 和 outerRadius 都是百分比，内半径设为零就是经典饼图。数据放进 slices 数组，title 添加标题，showLegend 和 legendPosition（上、下、左或右）安排图例，backgroundColor 匹配你的主题。据产品说明，提示框会显示每个数值及其单位，SliceClicked 让点击可以打开某个状态的详情，refresh 和 resetValues 方法则在换批次时清空图表。

我们喜欢的

• +两个百分比属性，饼图环形图随意切换
• +沉稳易读，适合深色画面
• +每个扇区都有点击事件，方便下钻

需要留意

• –预览图里扇区上没有数值或百分比：操作员得悬停或看图例
• –产品说明写了八个属性，却只列出七个：请在 TIA Portal 中确认单位属性

可绑定属性

• title
• slices
• innerRadius
• outerRadius
• showLegend
• legendPosition
• backgroundColor

Pie Chart

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

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

02两级分解（双环）首选

Nested Pie Chart

普通饼图告诉你生产耗能最多；这款还能告诉你是哪条产线。预览图“Energy Consumption Breakdown”的内层饼图是三个部门（Production、Infrastructure 和 Logistics），外环是它们各自的设备，每个设备都有一个标签框，显示数值和百分比：“Assembly Line A: 450, 33.33%”“HVAC Unit 1: 120, 8.89%”等等。

产品说明宣称有 17 个属性，写明了其中 12 个。数据放进 innerSectors 和 outerSectors；几何尺寸由 innerRadius、outerRadiusStart 和 outerRadiusEnd 决定；文字由 titleText、subtitleText 和 unitLabel 负责；标签样式由 labelRichBackgroundColor 和 labelLineLength 设置。theme 在浅色和深色之间切换，animationDuration 让更新更柔和，SectorClicked 报告点击，resetSelection 清除选择。

我们喜欢的

• +一张图里两级细节
• +每个外环扇区都有数值和百分比
• +内置浅色和深色主题

需要留意

• –预览图里的标签偏小：给它一块大面积，或者减少扇区数量
• –17 个属性中有 5 个没在页面上写明

可绑定属性

• innerSectors
• outerSectors
• titleText
• subtitleText
• unitLabel
• theme
• innerRadius
• outerRadiusStart
• outerRadiusEnd
• labelRichBackgroundColor
• labelLineLength
• animationDuration

Nested Pie Chart

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

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

03实际值与参考值对比首选

Radar Chart

要看一台机器是否表现得像它的参考状态，雷达图是最快的办法。这款在深色六边形网格上画出六个轴（效率、速度、负载、压力、振动和温度），青色填充多边形代表“Actual Status”，黄色虚线多边形代表“Reference”。两个形状一旦分开，就有值得查看的地方。

它的七个属性在产品说明里全部写明。indicators 定义各轴及其最大值，series 承载数据，chartTitle 和 showLegend 提供上下文，labelColor 和 backgroundColor 设置样式，animationDuration 让过渡更柔和。PointClicked 报告点击的是哪个点，正好用来打开该变量的趋势。

我们喜欢的

• +实际值和参考值一眼看全
• +接口简短，文档完整
• +配色沉稳，轴名易读

需要留意

• –每个轴有自己的最大值：数值要合理缩放，否则形状会误导人
• –预览图里没有标题：设置 chartTitle，让操作员知道这是哪台机器

可绑定属性

• indicators
• series
• chartTitle
• showLegend
• labelColor
• backgroundColor
• animationDuration

Radar Chart

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

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

04人气之选：下载量最高的桑基图

Sankey Diagram

在我们搜到的桑基图里，这款下载最多（2026 年 11 月有 16 次下载和两条五星评价）。我们展示的预览图是一块深色的“ENERGY FLOW ANALYSIS”面板：两条产线供给四台机器，再分流到六个输出，半透明的宽色带粗细随数值变化。图库里另一张图展示了悬停效果：除一条连线外其余全部变暗，并标注为“Machine 3 -- Spare 1 10”。

它的产品说明只写了有九个属性和两个事件，但图库里有两张 TIA Portal 巡视窗口（Inspector window）的截图，把问题说清楚了。结构放在两个数组里：nodes（每个元素有一个 name）和 links（每个元素有 source、target 和 value）。此外，title 和 showTitle 负责标题，nodeWidth 和 nodeGap 调整各列，curveness 和 linkOpacity 控制色带。在绑定之前亲眼看到数组在 TIA Portal 里被编辑，正是你需要的那份安心。

我们喜欢的

• +数据结构有真实的 TIA Portal 截图为证
• +模型简单：一串名称，加一串“源—目标—数值”连线
• +悬停高亮，让复杂的图也看得清

需要留意

• –图库第一张图右侧的标签被截断（“Production I”“HVAC Syste”）：记得给它们留出空间
• –页面上没写两个事件的名字：请在附带的文档里查看

可绑定属性

• nodes
• links
• title
• showTitle
• nodeWidth
• nodeGap
• curveness
• linkOpacity

Sankey Diagram

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

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

05每个节点都带数值的能源分解首选

Household Energy Sankey Diagram

目录里信息量最大的桑基图，也是唯一一款在每个节点上都写出数值的。Total Energy（19,000 kWh）分为 Electricity（10,800）和 Natural Gas（8,200），再分到采暖、热水、制冷、家电、照明和电子设备，最后到冰箱、洗衣机和烘干机、洗碗机、电脑和电视。我们算了一遍：演示数据的每一层加起来都对得上，这一点很多能源报表都做不到。

它有 28 个属性，也是可配置性最强的一款。产品说明写明了：ShowLabels 和 ShowValues 控制文字，FlowOpacity 控制色带，AnimationEnabled 控制过渡，nodeWidth 和 nodePadding 负责布局，marginTop、marginRight 等边距属性防止标签被裁切。它会触发 NodeClicked 和 FlowSelected，updateFlowValue、UpdateData 和 SetAnimationSpeed 方法则让你的脚本刷新它。

我们喜欢的

• +每个节点都有 kWh 数值，不用悬停也能读
• +三层分解，数字对得上
• +高度可配置，节点和能流都有事件

需要留意

• –它是为家庭设计的，产品说明里的能源来源和用途名为 TotalElectricity、GasHeating 和 Refrigerator 等：请在文档里确认，用于工厂时能改名到什么程度
• –部分标签（“Water Heating”“Appliances”）压在色带上

可绑定属性

• ShowLabels
• ShowValues
• FlowOpacity
• AnimationEnabled
• nodeWidth
• nodePadding
• marginTop
• marginRight

Household Energy Sankey Diagram

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

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

06班次与生产负荷图首选

Heatmap

Heatmap Grid 按小时展示一整周，这款则甘愿小而精。我们展示的预览图是一张“Production Load Analysis”网格：三天乘三个班次（00:00、08:00 和 16:00），每个单元格都印着数值，选中的单元格有一圈白色描边，提示框显示“Value: 50%”，下方是一条带拖动手柄的色标。图库第一张图是完整版：七天乘 24 小时，从夜间的冷蓝到正午的橙色。

它是两款热力图里文档最全的。产品说明写明了：startColor 和 endColor 定义渐变，minValue 和 maxValue 定义范围，showValueLabels 控制单元格内的数字，unitLabel 用于提示框，还有 backgroundColor，以及接受 JSON 数组或逗号分隔字符串的 xAxisLabels 和 yAxisLabels。图库里的一张 TIA Portal 截图还补充了 chartTitle 和 heatmapData 数组，其元素带有 value、x 和 y。CellClicked、refreshChart 和 clearData 补齐了全套。

我们喜欢的

• +用 showValueLabels 在单元格里显示数值：不用悬停也能读
• +双色渐变，可以调淡以配合你的配色
• +数据结构在 TIA Portal 截图里一目了然

需要留意

• –默认的蓝到黄绿渐变太扎眼：给 startColor 和 endColor 选更沉稳的颜色
• –预览图里，提示框挡住了上方单元格的数值

可绑定属性

• heatmapData
• chartTitle
• xAxisLabels
• yAxisLabels
• minValue
• maxValue
• startColor
• endColor
• showValueLabels
• unitLabel
• backgroundColor

Heatmap

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

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

0724 × 7 周规律首选

Heatmap Grid

能源经理的经典问题：哪天、哪个小时用能最多？这张网格在“Weekly Energy Consumption Heatmap”面板里排出七天乘 24 小时，按从深蓝到红色的色阶给每个单元格着色，悬停时显示“Thursday 16:00, Value: 9”这样的提示框。班次规律、清洗周期和周末基础负荷，在这样一张图里一目了然。

它的九个属性在产品说明里全部写明：heatmapData 承载数值，xAxisLabels 和 yAxisLabels 定义坐标轴，minValue 和 maxValue 定义色彩范围，showVisualMap 显示或隐藏色标，valuePrefix 用于提示框，另有 titleText 和 backgroundColor。CellClicked 报告点击的单元格，refreshData 和 clearSelection 则把控制权交给你的脚本。

我们喜欢的

• +展示周规律最自然的布局
• +接口简短，文档完整
• +色标可以用 showVisualMap 隐藏

需要留意

• –预览图里，色标标签（0 和 10）与小时标签重叠
• –彩虹色阶配上随机演示数据显得杂乱，而产品说明里没有颜色属性：想要更沉稳的配色就改造它

可绑定属性

• heatmapData
• titleText
• xAxisLabels
• yAxisLabels
• minValue
• maxValue
• showVisualMap
• valuePrefix
• backgroundColor

Heatmap Grid

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

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

08分阶段良率与损耗首选（漏斗图）

Funnel

每一百个上线的零件，最终有多少装上了卡车？其余的又是在哪一步掉队的？漏斗图用一张图就能回答。预览图是一块深色的“PROCESS THROUGHPUT FUNNEL”面板，六个阶段自上而下堆叠、逐级收窄：Raw Material 100%、Processing 92%、Quality Control 84%、Assembly 78%、Packaging 72% 和 Shipped 70%，每个阶段各有颜色，底部是图例。落差最大的那一级，就是你首先要去查的地方。

它的产品说明列出了全部七个属性。数据放在 stages 数组里，title 设置标题，showLegend 和 showLabels 分别开关图例和各阶段内的文字，gap 调整各段间距，minSize 让很小的最后一级也保持可见，backgroundColor 匹配你的主题。操作员点击某个阶段时会触发 OnStageSelected；updateValueByName 只修改一个阶段，无需重发整个列表；refreshChart 则在尺寸变化后重绘图表。

我们喜欢的

• +每个阶段的损耗一眼可见
• +接口简短，七个属性全部写明
• +可在脚本中按名称更新单个阶段

需要留意

• –预览图里阶段内的标签偏小：给它足够的高度
• –产品说明没有描述 stages 每个元素的字段：编写脚本前请先查看附带的文档

可绑定属性

• stages
• title
• showLegend
• showLabels
• gap
• minSize
• backgroundColor

Funnel

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

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

09两个变量相关性分析首选

Scatter Chart

电机电流会不会随负载上升？温度一高，废品是不是就扎堆？这些都是散点图的问题，而这是我们找到的唯一一款专门的散点图，而且很干净。预览图刻意保持朴素：深色背景上大约五十个青色点，坐标轴从 0 到 100，配一层淡淡的虚线网格。

八个属性，产品说明里全部写明：points 数组承载数据，chartTitle、xAxisLabel 和 yAxisLabel 提供上下文，pointColor 和 pointSize 设置标记点，另有 showGrid 和 backgroundColor。PointClicked 让操作员点击某个点，就能打开它背后的批次或时刻；refreshChart 在尺寸变化后重绘图表。

我们喜欢的

• +产品说明里全部写明，没有藏着掖着
• +极简外观，适合高性能 HMI 画面
• +每个点都有点击事件，方便下钻

需要留意

• –只有一个系列、一种颜色：要对比两组数据，可以看看荣誉提名里的 Bubble Chart，或者改造它
• –预览图保留了通用的“X-Axis Value”和“Y-Axis Value”标签：换成你自己的

可绑定属性

• points
• chartTitle
• xAxisLabel
• yAxisLabel
• pointColor
• pointSize
• showGrid
• backgroundColor

Scatter Chart

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

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

荣誉提名：另外 6 款值得一看的图表

它们没挤进前九，主要是因为产品页面没写属性名，或者用途非常专门，但每一款都有存在的理由。点击缩略图即可打开产品页面。

• 

  Pie Chart - Dashboard Widget

  这组里的老将（2025 年 7 月发布），2026 年 11 月有 68 次下载，是本次搜索中下载量最高的控件。基于 Apache ECharts，圆角环形图中间有一个大标签；图库里还有它在真实 WinCC Unified 画面上的样子。页面没写属性名，提示框里仍然是“Access From”——ECharts 演示留下的痕迹。

  查看产品 →
• 

  Half Donut Chart - Dashboard Widget

  它的姊妹款：带花纹扇区的半环形图，同样基于 Apache ECharts，提示框也是那句“Access From”。很适合紧凑地显示负荷占比，但页面上没写属性名。

  查看产品 →
• 

  Process Sankey Diagram

  一张炼油厂物料平衡图：原油、蒸汽和燃气经过蒸馏、重整和催化裂化，变成柴油、燃料油、液化石油气、汽油和氢气。预览图很漂亮，但九个属性、两个事件和两个方法都没写名字。

  查看产品 →
• 

  Sankey Diagram

  十一个属性，其中十个在产品说明里写明了名字，比如 nodesData、linksData 和 enableDragging，外加一个 exportAsImage 方法。没能上榜，是因为它的预览图在浅灰背景上显得发白，标签很难看清。

  查看产品 →
• 

  Bubble Chart

  一张“Process Performance Matrix”：一个轴是压力，另一个轴是温度，气泡大小和颜色表示产量。产品说明写了十个属性、一个事件和两个方法，但没列出名字。

  查看产品 →
• 

  PQ Diagram_BESS

  一款专业型控件：它在有功与无功功率（P-Q）图上绘制电池储能系统的运行点，范围是由 nominalApparentPower 确定的圆，会高亮当前所在的象限，超出额定值时触发 LimitExceeded。它是 2026 年 11 月刚上架的新品，预览图里的标签是罗马尼亚语（“descărcare”“încărcare”），不过产品说明称每个图例和坐标轴标签都可以修改。

  查看产品 →

如何在 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 字符串的形式接收数据（slices、links、heatmapData、points……）：先填入两三个静态元素，启动 Runtime，检查画出来的效果。然后把数值绑定到内部变量，用 I/O 域修改它们。对于控件需要写回的属性，请取消勾选“只读”（Read only）。表现正常后，再换成真实变量。

5. 5

   在 WinCC V8 中

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

进阶提示：饼图只适合少数几个扇区，而且它们加起来要构成一个有意义的整体，比如一个班次的小时数或一块电表的能耗。超过六七个扇区，就把小的合并成“其他”，或者改用棒图。在桑基图里，要检查每个节点的流入是否等于流出：一条凭空冒出来的色带，眼睛一下就能发现。

常见问题

我们的结论

如果只下载一个，就选 Pie Chart：一个沉稳的设备状态环形图，几分钟就能绑好。要两级分解，选 Nested Pie Chart；要实际值对比参考值，选 Radar Chart；要展示能流或物料流，选 Sankey Diagram，想让每个节点都带数值就选 Household Energy Sankey Diagram；看班次负荷，选 Heatmap；按小时看一整周，选 Heatmap Grid；看逐级损耗，选 Funnel；碰上“A 是不是取决于 B？”，就选 Scatter Chart。

如果你的数据需要一张这些都画不出来的图表（现实中总是如此），别忘了，做出它们的那个生成器，离你只有一次点击。