6 款最佳趋势图 Custom Web Control：适用于 WinCC Unified 和 WinCC V8（免费）

为什么值得用趋势图 Custom Web Control

一个数字告诉操作员过程现在在哪儿，一条趋势告诉他过程正往哪儿走。烘箱还在升温，还是已经稳住了？压力是在阀门动作之前掉下去的，还是之后？正因如此，从单个储罐画面到中控室大屏，几乎每个 WinCC Unified 画面上都少不了趋势图。

WinCC Unified 本身就带一个趋势控件，可以显示归档变量和实时变量，很多画面用它就够了。趋势图 Custom Web Control（CWC）的价值在于标准对象做不到、或者做起来很费劲的地方：带信号侧边栏的三条独立坐标轴、嵌在 KPI 磁贴里的迷你趋势、集成在能源看板里的趋势，或者让操作员直接拖动的曲线。CWC 是一个小型 Web 应用：HTML、CSS 和 JavaScript 打包成一个 ZIP，由 WinCC Unified（TIA Portal）和 WinCC V8 在画面中运行。它开放一组接口属性，比如 timeRangeSeconds 或 yAxisMax，你可以把它们绑定到 HMI 变量；它还能向你的 HMI 脚本触发事件，比如 LimitExceeded。

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

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

• 时间轴靠得住。 真实的时间戳、可设置的滚动窗口，刻度不会随着每个新样本跳来跳去。
• 刻度可控。 调试时用自动缩放，生产时用固定的 yAxisMin 和 yAxisMax；把 bar、°C 和 m³/h 混在一起时，要有各自独立的坐标轴。
• 限值和事件。 限值叠加线，再加上数值越限时触发的事件，能把一条好看的曲线变成操作员可以据此动手的工具。
• 接口要有文档。 产品说明里写明属性名，打开 TIA Portal 之前你就知道要绑定什么。只写了属性数量的说明，只能进荣誉提名。
• 趋势选对用途。 完整的分析查看器、双信号对比、总览用的磁贴、看板和设定值编辑器：每种用途我们只选一位冠军。

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

2026 年 10 月，我们在 HMIx 目录中搜遍了所有以“随时间变化的曲线”为核心的免费 Custom Web Control：趋势查看器、多趋势图、迷你趋势磁贴、带趋势面板的看板，以及设定值曲线编辑器。条形图已经有专门的文章了。每个候选都看了它的真实预览图（不是目录里那张顶着大标题的封面），并读了产品说明，看它在文档里列出了哪些属性、事件和方法。下载量只在难分高下时才拿来参考。

产品说明里没写属性名、或者预览图有明显瑕疵的控件，哪怕再好看，也只能进荣誉提名。另有两个直接淘汰：一个的图库预览图是一张空白的白图，另一个连控件名字里那条迷你趋势线都没显示出来。也得先说句实话：我们评判的是预览图和文档，并没有把这些控件放进真实的 Runtime 里跑过。它们都是用 AI 生成的，每个产品页面都会提醒你：上生产之前，先在你自己的 TIA Portal 项目里测试。

6 款最佳趋势图 Custom Web Control，逐一点评

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

01综合最佳

Trend Chart

如果只能留一个，那就是它。深色卡片顶部是“Process Trend Viewer”，三条发光曲线——青色的 Pressure A、绿色的 Pressure B 和紫色的 Flow Rate——在柔和的阴影区域上方延伸，时间轴上是真实的时间戳。底部的图例标出每个信号。看起来很现代，却不张扬；它也是 2026 年 10 月目录里下载量最高的纯趋势图。

据产品说明，它基于 ECharts 引擎，接口简短直接：lines 数组承载各个序列及其颜色和数据，timeRangeSeconds 设置滑动窗口，autoScaleY 或固定的 yAxisMin 和 yAxisMax 决定刻度，showLimits 画出设定值叠加线。其余交给 chartTitle、showGrid 和 backgroundColor。两个事件让它不只是拿来看的：数值越过阈值时触发 LimitExceeded，PointClicked 报告操作员点了哪个点。

我们喜欢的

• +一张图放下多个信号，风格干净易读
• +限值叠加线，外加供脚本使用的 LimitExceeded 事件
• +接口简短，绑定很快

需要留意

• –预览图里刻度被自动拟合到很别扭的端点（10.26 到 49.12）：生产时请固定 yAxisMin 和 yAxisMax
• –所有序列共用一条坐标轴，只把量程相近的信号放在一起

可绑定属性

• lines
• autoScaleY
• yAxisMin
• yAxisMax
• showLimits
• timeRangeSeconds
• chartTitle
• showGrid
• backgroundColor

Trend Chart

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

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

02中控室多轴趋势首选

Real-Time Trend Chart

榜单里最接近完整趋势查看器的一款。“Mill Area Configuration”下面是一排工具栏：Manage Groups、Rename Group、Clear View、Export CSV、Light/Dark 和 Refresh。左侧侧边栏列出组信号，每个信号分配到 Axis 1、2 或 3，并设有线宽，另有图表显示选项和时间配置：Real-Time（Rolling window），显示最近 5 分钟。右侧，°C、bar 和 m³/h 三个信号在三条独立坐标轴上共享图表，其中一条画成阶梯线。

产品说明记录了 21 个可绑定属性。axis1、axis2 和 axis3 配置坐标轴，maxPointsPerLine 限制内部缓冲区大小，timeRangeSeconds 设置滚动窗口，autoScaleY 或 yAxisMin 和 yAxisMax 负责刻度。showLimits、showGrid、backgroundColor 和 chartBackgroundColor 完成外观。信号越过阈值时触发 LimitExceeded，exportToCSV 方法把数据保存下来供分析。

我们喜欢的

• +三条独立坐标轴，适合单位不同的信号
• +信号分组、滚动窗口和 CSV 导出
• +工具栏一键切换深色和浅色主题

需要留意

• –界面很满：给它一块大屏幕。预览图里有些按钮标签换了行，“+ Select”还溢出了按钮
• –预览图里有个信号叫“Prueba 1”（西班牙语，意为“Test 1”）：在客户看到之前，先把你的信号改好名

可绑定属性

• axis1
• axis2
• axis3
• maxPointsPerLine
• autoScaleY
• yAxisMin
• yAxisMax
• timeRangeSeconds
• showLimits
• showGrid
• backgroundColor
• chartBackgroundColor

Real-Time Trend Chart

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

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

03双信号对比首选

Trend Chart

有时候问题很简单：“B 跟得上 A 吗？”这款双序列趋势图回答的就是它：蓝色的 Series 1 和黄色的 Series 2 在 0 到 100 的“Value”轴上错相振荡，底部是时间戳，填充区域让两条线的交叉点一目了然。

产品说明列出了 13 个属性，写明了其中 12 个。curveData1 和 curveData2 承载两路数据流，labelCurve1、labelCurve2、colorCurve1 和 colorCurve2 负责命名和配色，lineThickness、showGrid 和 backgroundColor 决定外观。刻度可以用 autoScale 自动缩放，也可以用 yAxisMin 和 yAxisMax 固定。点击某个点时触发 PointSelected 事件，另有两个实用方法：clearChart 用于开始新周期，exportAsImage 把当前视图存成 PNG。

我们喜欢的

• +天生适合设定值对比实际值，或进口对比出口
• +内置导出 PNG
• +两条曲线的名称和颜色都可绑定

需要留意

• –预览图在每个样本上都画了标记点，数据一密就变成一串珠子：请用你的采样率看看效果
• –重叠的填充色混成了棕色和青绿色；不设置的话，标签仍然显示“Series 1”和“Series 2”

可绑定属性

• curveData1
• curveData2
• labelCurve1
• labelCurve2
• colorCurve1
• colorCurve2
• lineThickness
• autoScale
• yAxisMin
• yAxisMax
• showGrid
• backgroundColor

Trend Chart

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

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

04能源看板首选（下载量最高）

Power Monitor Dashboard

它本身不算趋势图，但让这个看板出彩的正是那条趋势。在“Analyzer Monitor, 3-Phase Power Analysis”下面，六个弧形仪表显示 L1、L2 和 L3 的电压和电流；右侧一栏是有功、无功和视在功率及其进度条；功率因数仪表读数 0.957，频率 50.01 Hz。底部是带“Live”标记的“Active Power Trend”，黄色功率曲线对着一条白色虚线限值线。

它是本文下载量最高的控件：2026 年 10 月有 42 次下载和三条五星评价。产品说明记录了 34 个属性，写明了其中几个：仪表刻度用的 voltageMax 和 currentMax，labelVoltage、labelTrend 这类文字标签，以及 backgroundColor。说明里还描述了趋势的可配置时间范围、自动缩放的 Y 轴和限值线，两个事件 PowerLimitExceeded 和 PhaseImbalanceDetected，以及 resetTrend 方法。

我们喜欢的

• +完整的三相总览，趋势已经内置
• +功率越限和三相不平衡都有事件
• +人气最高，被其他用户试用得最多

需要留意

• –预览图里趋势轴底部的数值显示成了 21.849999999999998
• –说明里 34 个属性只写明了几个，预览图里的演示数值也只是占位（视在功率显示得比有功功率还低）：绑定之前先在 TIA Portal 中查看接口列表

可绑定属性

• voltageMax
• currentMax
• labelVoltage
• labelTrend
• backgroundColor

Power Monitor Dashboard

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

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

05总览画面迷你趋势磁贴首选

KPI Sparkline Tile

趋势不一定要大才有用。这块磁贴上写着“DISCHARGE PRESSURE”，用大字显示 43.6 bar，一个绿色徽标带向上箭头和 1.2 %，下方一条青色迷你趋势线，末端一个亮点标出最新值。总览画面上放十块这样的磁贴，操作员不用读数字就能看出哪些值在漂移。

产品说明记录了 8 个可绑定属性。trendData 喂给迷你趋势线，deltaValue 驱动彩色徽标，title 和 unit 负责标注，sparklineColor 和 backgroundColor 决定配色。最巧妙的是 highThreshold：超过它，磁贴就切换到报警状态，边框变成闪烁的红色。KPITileClicked 可用于跳转到详情画面，triggerAlarmManual 让你测试报警外观，resetTrend 清空历史。

我们喜欢的

• +一块小磁贴放下数值、变化量和近期历史
• +超过 highThreshold 时进入报警状态，边框闪烁
• +点击事件，方便下钻导航

需要留意

• –发布的预览图是一大块空白画布上的一小块磁贴（本文中我们做了裁剪）
• –预览图里看不到闪烁的报警边框，请用 triggerAlarmManual 测试

可绑定属性

• trendData
• deltaValue
• highThreshold
• title
• unit
• sparklineColor
• backgroundColor

KPI Sparkline Tile

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

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

06设定值曲线编辑首选

Curve Scheduler

榜单上的异类，而且很受欢迎：这是一条拿来写、而不是拿来读的趋势。“Greenhouse Climate Strategy”在 24 小时时间轴上画出红、蓝、绿三条设定值曲线，一句提示说明了一切：“Drag points on graph to adjust time and values. Timeline sorts automatically.”下方的表格列出各个点（06:00、12:00、18:00 和 22:00 的 Morning、Day、Evening 和 Night），每个点都有加热（°C）、通风（%）和灌溉（L/m²）滑块，另有 Import、Export 和 Add Point 按钮。

产品说明写明了每个变量的颜色和单位（heatingColor、ventilationColor、irrigationColor、heatingUnit、ventilationUnit、irrigationUnit），刻度上限 heatingMax 和 irrigationMax，nameColumnLabel、importBtnLabel 这类标签，以及 backgroundColor。最关键的是 scheduleData：操作员编辑曲线时触发 OnDataChanged，更新后的 JSON 会写回变量，所以这是必须取消勾选“只读”（Read only）的属性之一。脚本方面有 SetStrategyData、AddPoint 和 ClearAllPoints。

我们喜欢的

• +操作员可以在图上或表格里编辑曲线
• +通过事件把调度数据以 JSON 写回
• +适合干燥、批次加热和温室周期

需要留意

• –三个变量共用一条 0 到 100 的坐标轴，精确数值请看表格
• –预览图边缘的第一个和最后一个时间标签被截断了

可绑定属性

• scheduleData
• heatingColor
• ventilationColor
• irrigationColor
• heatingUnit
• ventilationUnit
• irrigationUnit
• heatingMax
• irrigationMax
• nameColumnLabel
• importBtnLabel
• backgroundColor

Curve Scheduler

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

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

荣誉提名：另外 4 款值得一看的趋势图

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

• 

  Process Trend Monitor

  Real-Time Trend Chart 的近亲，带可折叠侧边栏、CSV 导出、PointAdded 和 ExportTriggered 事件，并支持在 lines 中使用基于文件的历史数据。预览图里曲线跑出了绘图区，一个坐标轴标签被截成了“38.684...”。

  查看产品 →
• 

  Trend Viewer with Crosshair

  一款竖长的查看器，带实时时钟、三个数值标签（86.8 °C、5.58 bar、73 L/min）和一条带设定值虚线的紫色趋势。说明里描述了十字光标查看和缩放控制，但没写出它 10 个属性的名字。

  查看产品 →
• 

  Neon line chart

  紫色、青色和橙色虚线三条霓虹曲线，画在 0 到 70 的坐标轴上，带实时时间戳。说明里提到了数据缓冲、可配置时间范围和限值监控，写了 9 个属性、1 个事件和 2 个方法，但没列出名字。

  查看产品 →
• 

  KPI Card with line chart

  数值叠在背景趋势之上，带 maxPoints、decimalPlaces，ThresholdExceeded 触发时从 themeColor 切换到 alertColor。预览图里标签压在了曲线上，趋势也只占了卡片的一部分。

  查看产品 →

如何在 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 字符串的形式接收序列数据（lines、curveData1、trendData……），所以先用一个内部变量，再添加一个 I/O 域或一段写入几个数值的测试脚本，然后启动 Runtime。曲线表现正常后，再换成真实的 PLC 变量。

5. 5

   在 WinCC V8 中

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

进阶提示：这些图表把历史数据存在自己的缓冲区里（timeRangeSeconds、maxPointsPerLine、maxPoints……），所以显示的是画面打开以来发生的事，而不是你归档里的数据。如果操作员需要查看以前的班次，就用脚本从归档中读取数据填进去，或者把它们用作实时视图，与标准趋势控件并排放置。另外，把刻度固定为工艺的实际范围：每个样本都重新缩放的坐标轴，会让缓慢的漂移完全看不出来。

常见问题

我们的结论

如果只下载一个，就选 Trend Chart（586）：曲线干净，限值带事件，接口几分钟就能绑好。单位混杂的中控室，选三条坐标轴的 Real-Time Trend Chart；设定值对比实际值，选双序列的 Trend Chart（681）；总览画面，选 KPI Sparkline Tile；能源，选 Power Monitor Dashboard；需要操作员自己画曲线时，选 Curve Scheduler。

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