I 6 migliori grafici di trend Custom Web Control per WinCC Unified e WinCC V8 (gratis)

Perché un grafico di trend Custom Web Control vale la pena

Un numero dice all'operatore dove si trova il processo. Un trend gli dice dove sta andando. Il forno sta ancora scaldando o si è stabilizzato? La pressione è calata prima o dopo che la valvola si è mossa? Ecco perché i grafici di trend finiscono in quasi ogni schermata WinCC Unified, dalla pagina di un singolo serbatoio alla parete della sala controllo.

WinCC Unified ha già un controllo di trend per variabili archiviate e live, e per molte schermate basta e avanza. Un grafico di trend Custom Web Control (CWC) si guadagna il suo posto quando vuoi qualcosa che l'oggetto standard non ti dà così com'è: tre assi indipendenti con una barra laterale dei segnali, una sparkline dentro un tile KPI, un trend incastonato in una dashboard energetica o curve che l'operatore può trascinare. Un CWC è una piccola applicazione web, HTML, CSS e JavaScript in un pacchetto ZIP, che WinCC Unified (TIA Portal) e WinCC V8 eseguono dentro la schermata. Espone proprietà come timeRangeSeconds o yAxisMax da collegare a variabili HMI e può generare eventi, come LimitExceeded, verso i tuoi script HMI.

Cosa rende un grafico di trend Custom Web Control degno di essere scaricato

Prima della lista, il metro di giudizio. Ecco cosa abbiamo cercato, più o meno in ordine di quanto ci dà fastidio quando manca:

• Un asse dei tempi di cui fidarsi. Timestamp reali, una finestra scorrevole impostabile e una scala che non salta a ogni nuovo campione.
• Scala sotto controllo. Scala automatica per la messa in servizio, yAxisMin e yAxisMax fissi per la produzione e assi separati quando mescoli bar, °C e m³/h.
• Limiti ed eventi. Le sovrapposizioni dei limiti e un evento quando un valore li supera trasformano una bella linea in qualcosa su cui l'operatore può agire.
• Un'interfaccia documentata. Proprietà nominate nella scheda prodotto, così sai cosa collegherai prima ancora di aprire TIA Portal. Le schede che si limitano a contare le proprietà sono finite nelle menzioni d'onore.
• Il trend giusto per ogni lavoro. Un visualizzatore di analisi completo, un confronto tra due segnali, un tile per le panoramiche, una dashboard e un editor di setpoint: abbiamo scelto un campione per ogni lavoro.

Come li abbiamo scelti (e cosa non abbiamo fatto)

A ottobre 2026 abbiamo cercato nel catalogo HMIx tutti i Custom Web Control gratuiti costruiti attorno a una linea nel tempo: visualizzatori di trend, grafici multi-trend, tile sparkline, dashboard con un pannello di trend ed editor di curve di setpoint. I grafici a barre hanno già il loro articolo. Per ogni candidato abbiamo guardato l'anteprima reale (non la copertina del catalogo con il titolone sopra) e letto la scheda prodotto per capire quali proprietà, eventi e metodi documenta. I download sono serviti solo per gli spareggi.

I controlli le cui schede non nominano le proprietà, o le cui anteprime mostrano difetti visibili, sono finiti nelle menzioni d'onore, anche quelli belli da vedere. Due sono stati scartati: l'anteprima della galleria di uno è un'immagine bianca, e nell'altro non compare proprio la sparkline che dà il nome al controllo. E un avvertimento onesto: abbiamo giudicato anteprime e documentazione; non abbiamo fatto girare questi controlli in un Runtime vero. Sono stati generati con l'IA e ogni pagina prodotto ricorda di provarli nel proprio progetto TIA Portal prima di andare in produzione.

I 6 migliori grafici di trend Custom Web Control, uno per uno

Per ogni voce trovi l'anteprima reale, cosa ci è piaciuto, cosa tenere presente e le proprietà nominate nella sua scheda prodotto, seguite dalla miniatura del catalogo: fai clic per aprire la pagina del prodotto e scaricare il grafico di trend gratis.

01Il migliore in assoluto

Trend Chart

Se potessimo tenerne uno solo, sarebbe questo. "Process Trend Viewer" sta in cima a una scheda scura, e tre linee luminose, Pressure A in ciano, Pressure B in verde e Flow Rate in viola, scorrono sopra aree delicatamente sfumate lungo un asse dei tempi con timestamp reali. Una legenda in basso dà il nome a ogni segnale. Ha un look moderno senza urlare, ed è il grafico di trend puro più scaricato del catalogo a ottobre 2026.

Secondo la sua scheda gira sul motore ECharts, e la sua interfaccia è corta e va dritta al punto: l'array lines contiene le serie con colori e dati, timeRangeSeconds imposta la finestra scorrevole, autoScaleY oppure i valori fissi yAxisMin e yAxisMax decidono la scala, e showLimits disegna una sovrapposizione del setpoint. chartTitle, showGrid e backgroundColor fanno il resto. Due eventi lo rendono utile oltre che bello da guardare: LimitExceeded scatta quando un valore supera la sua soglia e PointClicked segnala il punto toccato dall'operatore.

Cosa ci piace

• +Più segnali in un solo grafico, con uno stile pulito e leggibile
• +Sovrapposizione dei limiti più un evento LimitExceeded per i tuoi script
• +Interfaccia corta e veloce da collegare

Da tenere presente

• –Nell'anteprima la scala si adatta da sola a estremi strani (da 10.26 a 49.12): fissa yAxisMin e yAxisMax per la produzione
• –Tutte le serie condividono un solo asse, quindi mescola solo segnali con campi simili

Proprietà collegabili

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

Trend Chart

Gratis · WinCC Unified & V8 · CWC (.zip)

↓Vedi e scarica gratis✦Modificalo con l'IA

02Il miglior trend multiasse per la sala controllo

Real-Time Trend Chart

La cosa più vicina a un visualizzatore di trend completo in questa lista. "Mill Area Configuration" guida una barra degli strumenti con Manage Groups, Rename Group, Clear View, Export CSV, Light/Dark e Refresh. A sinistra, una barra laterale elenca i segnali del gruppo, ciascuno assegnato ad Axis 1, 2 o 3 con il suo spessore di linea, più le opzioni di visualizzazione del grafico e la configurazione del tempo: Real-Time (Rolling window) sugli ultimi 5 minuti. A destra, tre segnali in °C, bar e m³/h condividono il grafico su tre assi indipendenti, uno dei quali disegnato come linea a gradini.

La sua scheda conta 21 proprietà collegabili. axis1, axis2 e axis3 configurano gli assi, maxPointsPerLine limita il buffer interno, timeRangeSeconds imposta la finestra scorrevole, e autoScaleY oppure yAxisMin e yAxisMax gestiscono la scala. showLimits, showGrid, backgroundColor e chartBackgroundColor completano l'aspetto. LimitExceeded scatta quando un segnale supera la sua soglia, e il metodo exportToCSV salva i dati per l'analisi.

Cosa ci piace

• +Tre assi indipendenti per segnali con unità diverse
• +Gruppi di segnali, finestra scorrevole ed esportazione CSV
• +Tema scuro e chiaro dalla barra degli strumenti

Da tenere presente

• –È affollato: dagli uno schermo grande. Nell'anteprima alcune etichette dei pulsanti vanno a capo e "+ Select" esce dal suo pulsante
• –Un segnale dell'anteprima si chiama "Prueba 1" (spagnolo per «Prova 1»): rinomina i tuoi segnali prima che li veda il cliente

Proprietà collegabili

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

Real-Time Trend Chart

Gratis · WinCC Unified & V8 · CWC (.zip)

↓Vedi e scarica gratis✦Modificalo con l'IA

03Il migliore per confrontare due segnali

Trend Chart

A volte la domanda è semplicemente "B segue A?". Questo trend a due serie risponde: Series 1 in blu e Series 2 in giallo oscillano sfasate su un asse "Value" da 0 a 100, con i timestamp lungo il fondo e aree riempite che rendono evidenti i punti di incrocio.

La sua scheda elenca 13 proprietà e ne nomina dodici. curveData1 e curveData2 portano i due flussi di dati, labelCurve1, labelCurve2, colorCurve1 e colorCurve2 danno nome e colore alle curve, e lineThickness, showGrid e backgroundColor definiscono l'aspetto. La scala è automatica con autoScale oppure fissa con yAxisMin e yAxisMax. L'evento PointSelected scatta quando si fa clic su un punto, e due metodi comodi chiudono il cerchio: clearChart per ripartire con un nuovo ciclo ed exportAsImage per salvare la vista corrente come PNG.

Cosa ci piace

• +Fatto apposta per setpoint contro valore reale o ingresso contro uscita
• +Esportazione in PNG integrata
• +Nomi e colori di entrambe le curve collegabili

Da tenere presente

• –L'anteprima disegna un marcatore su ogni campione, e con dati densi diventa una collana di perline: verifica come appare con la tua frequenza di campionamento
• –I riempimenti sovrapposti si mescolano in marrone e verde petrolio; le etichette restano "Series 1" e "Series 2" finché non le imposti

Proprietà collegabili

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

Trend Chart

Gratis · WinCC Unified & V8 · CWC (.zip)

↓Vedi e scarica gratis✦Modificalo con l'IA

04Il migliore per le dashboard energetiche (il più scaricato)

Power Monitor Dashboard

Da solo non è un grafico di trend, ma è proprio il trend a fare questa dashboard. Sotto "Analyzer Monitor, 3-Phase Power Analysis", sei gauge ad arco mostrano tensione e corrente su L1, L2 e L3, una colonna a destra raccoglie potenza attiva, reattiva e apparente con le loro barre, un gauge del fattore di potenza segna 0.957 e la frequenza 50.01 Hz. Lungo il fondo, un "Active Power Trend" con un badge "Live" disegna la linea gialla della potenza contro una linea di limite bianca tratteggiata.

È il controllo più scaricato di questo articolo, con 42 download e tre recensioni a cinque stelle a ottobre 2026. La sua scheda conta 34 proprietà e ne nomina una manciata: voltageMax e currentMax per le scale dei gauge, etichette di testo come labelVoltage e labelTrend, e backgroundColor. Descrive l'intervallo di tempo configurabile del trend, l'asse Y a scala automatica e le linee di limite, due eventi, PowerLimitExceeded e PhaseImbalanceDetected, e un metodo resetTrend.

Cosa ci piace

• +Una panoramica trifase completa con il trend integrato
• +Eventi per il limite di potenza e lo squilibrio di fase
• +Il preferito del pubblico, quindi il più provato dagli altri utenti

Da tenere presente

• –L'anteprima stampa il minimo dell'asse del trend come 21.849999999999998
• –La sua scheda nomina solo poche delle sue 34 proprietà, e i valori demo dell'anteprima sono segnaposto (la potenza apparente risulta più bassa di quella attiva): controlla l'elenco Interfaccia in TIA Portal prima di collegarlo

Proprietà collegabili

• voltageMax
• currentMax
• labelVoltage
• labelTrend
• backgroundColor

Power Monitor Dashboard

Gratis · WinCC Unified & V8 · CWC (.zip)

↓Vedi e scarica gratis✦Modificalo con l'IA

05Il miglior tile sparkline per le schermate di panoramica

KPI Sparkline Tile

Un trend non deve essere grande per essere utile. Questo tile riporta "DISCHARGE PRESSURE", mostra 43.6 bar a caratteri grandi, un badge verde con una freccia in su e 1.2 %, e sotto una sparkline ciano che termina con un punto luminoso sull'ultimo valore. Mettine dieci in una schermata di panoramica e l'operatore vede quali valori stanno derivando prima ancora di leggerne uno.

La sua scheda conta 8 proprietà collegabili. trendData alimenta la sparkline, deltaValue pilota il badge colorato, title e unit fanno da etichetta, e sparklineColor e backgroundColor definiscono la palette. highThreshold è quella furba: sopra quel valore, il tile passa a uno stato di allarme con un bordo rosso pulsante. KPITileClicked apre la porta a una schermata di dettaglio, triggerAlarmManual ti permette di provare l'aspetto dell'allarme e resetTrend cancella lo storico.

Cosa ci piace

• +Valore, variazione e storico recente in un tile piccolo
• +Stato di allarme con bordo pulsante sopra highThreshold
• +Evento di clic per la navigazione di approfondimento

Da tenere presente

• –L'anteprima pubblicata è un tile piccolo in una grande tela vuota (per questo articolo l'abbiamo ritagliata)
• –Il bordo d'allarme pulsante non compare nell'anteprima, quindi provalo con triggerAlarmManual

Proprietà collegabili

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

KPI Sparkline Tile

Gratis · WinCC Unified & V8 · CWC (.zip)

↓Vedi e scarica gratis✦Modificalo con l'IA

06Il migliore per modificare curve di setpoint

Curve Scheduler

La pecora nera del gruppo, e ben venga: un trend che si scrive invece di leggerlo. "Greenhouse Climate Strategy" disegna tre curve di setpoint, rossa, blu e verde, lungo un asse di 24 ore, e un suggerimento dice tutto: "Drag points on graph to adjust time and values. Timeline sorts automatically." (trascina i punti sul grafico per regolare orari e valori; la timeline si riordina da sola). Sotto, una tabella elenca i punti (Morning, Day, Evening e Night alle 06:00, 12:00, 18:00 e 22:00) con cursori per il riscaldamento in °C, la ventilazione in % e l'irrigazione in L/m², più i pulsanti Import, Export e Add Point.

La sua scheda nomina colori e unità di ogni variabile (heatingColor, ventilationColor, irrigationColor, heatingUnit, ventilationUnit, irrigationUnit), i limiti di scala heatingMax e irrigationMax, etichette come nameColumnLabel e importBtnLabel, e backgroundColor. Quella importante è scheduleData: quando l'operatore modifica una curva scatta OnDataChanged e il JSON aggiornato torna alla variabile, quindi questa è una delle proprietà in cui devi disattivare Sola lettura. SetStrategyData, AddPoint e ClearAllPoints sono a disposizione degli script.

Cosa ci piace

• +Gli operatori modificano il profilo sul grafico o nella tabella
• +Riscrive la pianificazione come JSON, con tanto di evento
• +Adatto a essiccazione, riscaldamento batch e cicli di serra

Da tenere presente

• –Le tre variabili condividono un solo asse da 0 a 100, quindi i valori esatti leggili nella tabella
• –Nell'anteprima la prima e l'ultima etichetta oraria sono tagliate ai bordi

Proprietà collegabili

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

Curve Scheduler

Gratis · WinCC Unified & V8 · CWC (.zip)

↓Vedi e scarica gratis✦Modificalo con l'IA

Menzioni d'onore: altri 4 grafici di trend che meritano un'occhiata

Buoni controlli rimasti fuori dalla top 6, perché un loro fratello ci è entrato, perché le loro schede prodotto non nominano le proprietà o perché le anteprime mostrano un difetto da verificare prima. Fai clic su una miniatura qualsiasi per aprire la sua pagina prodotto.

• 

  Process Trend Monitor

  Un fratello del Real-Time Trend Chart con barra laterale richiudibile, esportazione CSV, eventi PointAdded ed ExportTriggered e supporto per dati storici da file in lines. Nell'anteprima le linee escono dall'area del grafico e un'etichetta dell'asse è tagliata a "38.684...".

  Vedi prodotto →
• 

  Trend Viewer with Crosshair

  Un visualizzatore alto con un orologio live, tre chip di valore (86.8 °C, 5.58 bar, 73 L/min) e un trend viola con una linea di setpoint tratteggiata. La sua scheda descrive l'ispezione con mirino e i controlli di zoom, ma non nomina le sue 10 proprietà.

  Vedi prodotto →
• 

  Neon line chart

  Tre tracce neon, viola, ciano e un arancione tratteggiato, su un asse da 0 a 70 con timestamp live. La sua scheda cita il buffering dei dati, intervalli di tempo configurabili e il monitoraggio dei limiti, e conta 9 proprietà, 1 evento e 2 metodi senza nominarli.

  Vedi prodotto →
• 

  KPI Card with line chart

  Un valore sopra un trend di sfondo, con maxPoints, decimalPlaces e un passaggio da themeColor ad alertColor quando scatta ThresholdExceeded. Nell'anteprima l'etichetta si sovrappone alla linea e il trend riempie solo una parte della scheda.

  Vedi prodotto →

Come usare un grafico di trend Custom Web Control in WinCC Unified (e WinCC V8)

La versione breve, per quando hai già scelto il tuo grafico. La nostra guida ai Custom Web Control copre ogni passaggio con schemi e screenshot.

1. 1

   Scarica lo ZIP

   Apri la pagina del prodotto, accedi con il tuo account gratuito e scarica il grafico. Lo ZIP scaricato contiene la documentazione e, al suo interno, il pacchetto del controllo chiamato {GUID}.zip: è quel file interno che ti serve.

2. 2

   Copialo nel tuo progetto TIA Portal

   Copia il file {GUID}.zip, ancora compresso, nella cartella del progetto sotto UserFiles\CustomControls (crea entrambe le cartelle se non esistono). Non estrarlo.

3. 3

   Aggiorna I miei controlli e trascinalo

   In TIA Portal apri la task card Tool, espandi la tavolozza I miei controlli e fai clic su Aggiorna. Il grafico compare nell'elenco: trascinalo nella schermata e lascia abbastanza spazio per assi e legenda.

4. 4

   Collega e prova le proprietà

   Seleziona il controllo e apri Finestra di ispezione → Proprietà → Proprietà → Interfaccia. La maggior parte di questi grafici riceve le serie come array o stringa JSON (lines, curveData1, trendData…), quindi inizia con una variabile interna, aggiungi un campo I/O o un piccolo script di prova che scriva qualche valore e avvia Runtime. Quando le linee si muovono come previsto, passa alle variabili reali del PLC.

5. 5

   Su WinCC V8

   Ogni grafico della top di questo articolo è indicato come compatibile con WinCC V8 nella sua pagina prodotto. Il pacchetto è lo stesso; per importare e configurare i Custom Web Control in quell'ambiente segui la documentazione di WinCC V8.

Dritta del mestiere: questi grafici tengono il proprio storico in un buffer (timeRangeSeconds, maxPointsPerLine, maxPoints…), quindi mostrano cosa è successo da quando si è aperta la schermata, non cosa c'è nel tuo archivio. Se l'operatore ha bisogno dei turni passati, riempi i dati dal tuo archivio con uno script, oppure usali per le viste live accanto al controllo di trend standard. E fissa la scala sul campo reale del tuo processo: un asse che si riscala a ogni campione rende invisibili le derive lente.

Domande frequenti

Il nostro verdetto

Se ne scarichi uno solo, che sia il Trend Chart (586): linee pulite, limiti con evento e un'interfaccia che avrai collegato in pochi minuti. Per una sala controllo con unità miste, il Real-Time Trend Chart e i suoi tre assi; per setpoint contro valore reale, il Trend Chart a due serie (681); per le schermate di panoramica, il KPI Sparkline Tile; per l'energia, il Power Monitor Dashboard; e quando è l'operatore a dover disegnare il profilo, il Curve Scheduler.

E se il tuo processo ha bisogno di un trend che nessuno di questi disegna (succede sempre), ricorda che il generatore che li ha creati è a un clic di distanza.