Blog · Custom Web Controls
Grafici a torta, diagrammi di Sankey e heatmap: i 9 migliori Custom Web Control per WinCC Unified e WinCC V8 (gratis)
WinCC Unified ha già oggetti per trend e barre, ma quando ti serve un grafico a torta, un diagramma di Sankey o una heatmap, un Custom Web Control è la scorciatoia. Così, a novembre 2026, abbiamo aperto ogni Custom Web Control a torta, a ciambella, radar, Sankey, heatmap, a imbuto, a dispersione e a bolle del catalogo HMIx, diciassette candidati, guardato ogni anteprima da vicino, letto ogni scheda prodotto e tenuto i nove che metteremmo volentieri in una schermata WinCC Unified o WinCC V8. Tutti gratis, tutti in un pacchetto CWC ZIP e tutti con le proprietà dei dati nominate nella pagina del prodotto o negli screenshot di TIA Portal.
- Custom Web Control
- CWC
- WinCC Unified
- WinCC V8
- TIA Portal
- Grafico a torta
- Diagramma di Sankey
- Heatmap
Scelte rapide
Vai di fretta? Salta dritto al grafico che ti serve.
- 01Il migliore in assoluto (torta o ciambella)Pie Chart
- 02Il migliore per le ripartizioni su due livelli (due anelli)Nested Pie Chart
- 03Il migliore per i confronti tra valore attuale e riferimentoRadar Chart
- 04Il preferito del pubblico: il diagramma di Sankey più scaricatoSankey Diagram
- 05Il migliore per le ripartizioni energetiche con valori su ogni nodoHousehold Energy Sankey Diagram
- 06La migliore per mappe di carico per turno e di produzioneHeatmap
- 07La migliore per gli andamenti settimanali 24 × 7Heatmap Grid
- 08Il migliore per rese e perdite stadio per stadio (imbuto)Funnel
- 09Il migliore per le correlazioni tra due variabiliScatter Chart
Perché un grafico a torta, un Sankey o una heatmap Custom Web Control colma un vuoto vero
Ogni impianto ha domande a cui una curva di trend risponde male. Dov'è finito il turno: produzione, attrezzaggio, fermo o guasti? Quale linea si mangia gran parte dell'energia? Quale ora della settimana va sempre in affanno? Un grafico a torta risponde alla prima, un diagramma di Sankey alla seconda e una heatmap alla terza, e nessuno dei tre è ciò per cui sono pensati gli oggetti standard di WinCC.
Qui entra in gioco un grafico Custom Web Control (CWC). 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. La maggior parte dei grafici CWC riceve i dati come array o stringa JSON in una proprietà come slices, nodes o heatmapData: le tue variabili HMI e i tuoi script forniscono i numeri e il controllo li disegna. Molti generano anche eventi, come SliceClicked o CellClicked, così un clic su una fetta o su una cella può aprire la schermata di dettaglio.
Cosa rende un grafico 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:
- Il grafico giusto per la domanda. Le parti di un totale vanno in una torta, i flussi in un Sankey, gli andamenti nel tempo in una heatmap, più variabili contro un riferimento in un radar. Un bel grafico che risponde alla domanda sbagliata è solo ingombro.
- Leggibile su un pannello. Etichette non tagliate, valori o percentuali che si leggono davvero e una scala di colori che si spiega da sola. I gradienti di fantasia non sostituiscono un numero leggibile.
- Un contratto dati pulito. I dati in una sola proprietà documentata (
slices,links,heatmapData,points), così sai esattamente cosa devono scrivere le tue variabili o i tuoi script. - Un'interazione che porta da qualche parte. Un evento di clic su fetta, nodo o cella trasforma un'immagine in navigazione. Le schede che si limitano a contare le proprietà sono finite nelle menzioni d'onore.
- Un campione per ogni lavoro. Una torta o ciambella, una torta a due anelli, un radar, due diagrammi di Sankey, due heatmap, un imbuto e un grafico a dispersione: domande diverse, strumenti diversi.
Come li abbiamo scelti (e cosa non abbiamo fatto)
A novembre 2026 abbiamo cercato nel catalogo HMIx tutti i Custom Web Control gratuiti che disegnano grafici a torta, a ciambella, radar, Sankey, heatmap, a imbuto, a dispersione o a bolle. I grafici a barre e di trend hanno già i loro articoli, quindi sono rimasti fuori. Per ogni candidato abbiamo guardato l'anteprima reale (non la copertina del catalogo con il titolone sopra), letto la scheda prodotto e, dove l'autore li ha pubblicati, gli screenshot di TIA Portal nella sua galleria, per capire quali proprietà, eventi e metodi documenta. I download sono serviti solo per gli spareggi.
I controlli le cui pagine non nominano le proprietà sono finiti nelle menzioni d'onore. Abbiamo scartato un grafico a bolle il cui asse "Efficiency (%)" arriva fino a 70.000, e un grafico che avevamo già scelto nel nostro articolo sui grafici a barre. 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 9 migliori Custom Web Control a torta, Sankey, heatmap e non solo, 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 gratis.
01Il migliore in assoluto (torta o ciambella)
Pie Chart
Se potessimo tenerne uno solo, sarebbe questo, perché risponde alla domanda che ti faranno più spesso: dov'è finito il tempo? L'anteprima mostra una ciambella scura e pulita divisa in Production, Idle, Maintenance, Fault e Setup, in blu, grigio, arancione, rosso e viola, con una legenda discreta a destra. È esattamente la ripartizione degli stati macchina che serve a una schermata OEE, e lo fa senza urlare.
Torta o ciambella, decidi tu: innerRadius e outerRadius sono percentuali, quindi con un raggio interno pari a zero ottieni una torta classica. I dati vanno nell'array slices, title aggiunge un'intestazione, showLegend e legendPosition (top, bottom, left o right) posizionano la legenda, e backgroundColor si adatta al tuo tema. Secondo la sua scheda, i tooltip mostrano ogni valore con la sua unità, SliceClicked permette a un clic di aprire il dettaglio di uno stato, e i metodi refresh e resetValues svuotano il grafico a ogni cambio lotto.
Cosa ci piace
- Torta o ciambella con due proprietà percentuali
- Look sobrio e leggibile sulle schermate scure
- Evento di clic per fetta per l'approfondimento
Da tenere presente
- Nell'anteprima non ci sono valori né percentuali sulle fette: l'operatore deve passarci sopra o leggere la legenda
- La scheda conta otto proprietà ma ne nomina sette: controlla la proprietà dell'unità in TIA Portal
Proprietà collegabili
- title
- slices
- innerRadius
- outerRadius
- showLegend
- legendPosition
- backgroundColor
02Il migliore per le ripartizioni su due livelli (due anelli)
Nested Pie Chart
Una torta ti dice che la produzione consuma gran parte dell'energia; questa ti dice anche quale linea. L'anteprima, "Energy Consumption Breakdown", ha una torta interna con tre reparti (Production, Infrastructure e Logistics) e un anello esterno con i loro asset, ciascuno con un riquadro che mostra valore e percentuale: "Assembly Line A: 450, 33.33%", "HVAC Unit 1: 120, 8.89%" e così via.
La sua scheda annuncia 17 proprietà e ne nomina dodici. I dati vanno in innerSectors e outerSectors; la geometria in innerRadius, outerRadiusStart e outerRadiusEnd; i testi in titleText, subtitleText e unitLabel; e le etichette in labelRichBackgroundColor e labelLineLength. theme passa da chiaro a scuro, animationDuration ammorbidisce gli aggiornamenti, SectorClicked segnala i clic e resetSelection li azzera.
Cosa ci piace
- Due livelli di dettaglio in un solo grafico
- Valore e percentuale su ogni settore esterno
- Temi chiaro e scuro integrati
Da tenere presente
- Nell'anteprima le etichette sono piccole: dagli un riquadro grande o meno settori
- Cinque delle sue 17 proprietà non sono nominate nella pagina
Proprietà collegabili
- innerSectors
- outerSectors
- titleText
- subtitleText
- unitLabel
- theme
- innerRadius
- outerRadiusStart
- outerRadiusEnd
- labelRichBackgroundColor
- labelLineLength
- animationDuration
03Il migliore per i confronti tra valore attuale e riferimento
Radar Chart
Un grafico radar è il modo più rapido per vedere se una macchina si comporta come il suo riferimento. Questo disegna sei assi (efficienza, velocità, carico, pressione, vibrazione e temperatura) su una griglia esagonale scura, con un poligono ciano pieno per "Actual Status" e uno giallo tratteggiato per "Reference". Dove le due forme si separano, c'è qualcosa da guardare.
Le sue sette proprietà sono tutte nominate nella scheda. indicators definisce gli assi e il loro massimo, series porta i dati, chartTitle e showLegend aggiungono contesto, labelColor e backgroundColor ne curano lo stile e animationDuration ammorbidisce le transizioni. PointClicked indica quale punto è stato cliccato, utile per aprire il trend di quella variabile.
Cosa ci piace
- Attuale e riferimento in un colpo d'occhio
- Interfaccia corta e completamente documentata
- Colori sobri e nomi degli assi leggibili
Da tenere presente
- Ogni asse ha il suo massimo: scala i valori con criterio o la forma ti trarrà in inganno
- Nell'anteprima non c'è titolo: imposta
chartTitlecosì l'operatore sa di quale macchina si tratta
Proprietà collegabili
- indicators
- series
- chartTitle
- showLegend
- labelColor
- backgroundColor
- animationDuration
04Il preferito del pubblico: il diagramma di Sankey più scaricato
Sankey Diagram
Tra i diagrammi di Sankey della nostra ricerca, è quello che la gente scarica di più (16 download e due recensioni a cinque stelle a novembre 2026). L'anteprima che mostriamo è un pannello scuro "ENERGY FLOW ANALYSIS": due linee alimentano quattro macchine, che si dividono in sei uscite, con larghi nastri traslucidi il cui spessore segue il valore. Un'altra immagine della galleria mostra un hover che attenua tutto tranne un collegamento e lo etichetta "Machine 3 -- Spare 1 10".
La sua scheda dice solo che ha nove proprietà e due eventi, ma la galleria include due screenshot della Finestra di ispezione di TIA Portal che chiudono la questione. La struttura vive in due array: nodes (ogni elemento ha un name) e links (ognuno con source, target e value). Attorno, title e showTitle per l'intestazione, nodeWidth e nodeGap per le colonne, e curveness e linkOpacity per i nastri. Vedere gli array modificati in TIA Portal è esattamente la rassicurazione che vuoi prima di collegarlo.
Cosa ci piace
- Struttura dati mostrata in veri screenshot di TIA Portal
- Modello semplice: un elenco di nomi e un elenco di collegamenti sorgente-destinazione-valore
- L'evidenziazione all'hover rende leggibile anche un diagramma affollato
Da tenere presente
- La prima immagine della galleria taglia le etichette a destra ("Production I", "HVAC Syste"): lasciagli spazio
- I due eventi non sono nominati nella pagina: controllali nella documentazione inclusa
Proprietà collegabili
- nodes
- links
- title
- showTitle
- nodeWidth
- nodeGap
- curveness
- linkOpacity
05Il migliore per le ripartizioni energetiche con valori su ogni nodo
Household Energy Sankey Diagram
Il diagramma di Sankey più informativo del catalogo, e l'unico che scrive il valore su ogni nodo. Total Energy (19.000 kWh) si divide in Electricity (10.800) e Natural Gas (8.200), poi in riscaldamento, acqua calda, raffrescamento, elettrodomestici, illuminazione ed elettronica, e infine in frigorifero, lavatrice e asciugatrice, lavastoviglie, computer e TV. Abbiamo fatto le somme: ogni livello della demo torna, cosa che non tutti i report energetici possono vantare.
Con 28 proprietà è anche il più configurabile. La scheda nomina ShowLabels e ShowValues per i testi, FlowOpacity per i nastri, AnimationEnabled per le transizioni, nodeWidth e nodePadding per il layout e proprietà di margine come marginTop e marginRight per evitare che le etichette vengano tagliate. Genera NodeClicked e FlowSelected, e i metodi updateFlowValue, UpdateData e SetAnimationSpeed lo aggiornano dai tuoi script.
Cosa ci piace
- Valori in kWh su ogni nodo, leggibili senza hover
- Tre livelli di ripartizione che tornano
- Molto configurabile, con eventi su nodi e flussi
Da tenere presente
- È pensato per una casa, e la sua scheda nomina sorgenti e utenze come
TotalElectricity,GasHeatingeRefrigerator: verifica nella documentazione fino a che punto puoi rinominarli per un impianto - Alcune etichette ("Water Heating", "Appliances") finiscono sopra i nastri
Proprietà collegabili
- ShowLabels
- ShowValues
- FlowOpacity
- AnimationEnabled
- nodeWidth
- nodePadding
- marginTop
- marginRight
Household Energy Sankey Diagram
Gratis · WinCC Unified & V8 · CWC (.zip)
06La migliore per mappe di carico per turno e di produzione
Heatmap
Se la Heatmap Grid mostra un'intera settimana ora per ora, questa si accontenta di essere piccola e precisa. L'anteprima che mostriamo è una griglia "Production Load Analysis" di tre giorni per tre turni (00:00, 08:00 e 16:00) con il valore stampato in ogni cella, un contorno bianco attorno alla cella selezionata, un tooltip con "Value: 50%" e una scala di colori con cursori sotto. La prima immagine della galleria è la versione grande: sette giorni per 24 ore, dai blu freddi di notte all'arancione di mezzogiorno.
È la meglio documentata delle due heatmap. La scheda nomina startColor ed endColor per il gradiente, minValue e maxValue per il suo intervallo, showValueLabels per i numeri nelle celle, unitLabel per i tooltip, backgroundColor, e xAxisLabels e yAxisLabels, che accettano un array JSON o una stringa separata da virgole. Uno screenshot di TIA Portal nella galleria aggiunge chartTitle e l'array heatmapData, i cui elementi portano value, x e y. CellClicked, refreshChart e clearData completano il quadro.
Cosa ci piace
- Valori nelle celle con
showValueLabels: leggibile senza hover - Gradiente a due colori che puoi ammorbidire secondo la tua palette
- Struttura dati visibile in uno screenshot di TIA Portal
Da tenere presente
- Il gradiente predefinito dal blu al giallo-verde è chiassoso: scegli valori più sobri per
startColoredendColor - Nell'anteprima il tooltip copre il valore della cella sopra
Proprietà collegabili
- heatmapData
- chartTitle
- xAxisLabels
- yAxisLabels
- minValue
- maxValue
- startColor
- endColor
- showValueLabels
- unitLabel
- backgroundColor
07La migliore per gli andamenti settimanali 24 × 7
Heatmap Grid
La domanda classica dell'energy manager: in quale giorno e a che ora consumiamo di più? Questa griglia dispone sette giorni per 24 ore in un pannello "Weekly Energy Consumption Heatmap", colora ogni cella su una scala dal blu scuro al rosso e mostra un tooltip come "Thursday 16:00, Value: 9" al passaggio del mouse. Schemi dei turni, cicli di pulizia e carico di base del fine settimana saltano all'occhio in un'immagine così.
Le sue nove proprietà sono tutte nominate nella scheda: heatmapData per i valori, xAxisLabels e yAxisLabels per gli assi, minValue e maxValue per l'intervallo di colori, showVisualMap per mostrare o nascondere la scala, valuePrefix per il tooltip, più titleText e backgroundColor. CellClicked segnala la cella, e refreshData e clearSelection danno il controllo ai tuoi script.
Cosa ci piace
- La disposizione naturale per gli andamenti settimanali
- Interfaccia corta e completamente documentata
- Scala di colori che si può nascondere con
showVisualMap
Da tenere presente
- Nell'anteprima le etichette della scala (0 e 10) si sovrappongono a quelle delle ore
- Una scala arcobaleno con dati demo casuali sembra caotica, e la scheda non nomina proprietà di colore: remixala per una palette più sobria
Proprietà collegabili
- heatmapData
- titleText
- xAxisLabels
- yAxisLabels
- minValue
- maxValue
- showVisualMap
- valuePrefix
- backgroundColor
08Il migliore per rese e perdite stadio per stadio (imbuto)
Funnel
Su cento pezzi che entrano in linea, quanti arrivano al camion, e dove si perdono gli altri? Un imbuto lo dice in un'immagine sola. L'anteprima è un pannello scuro "PROCESS THROUGHPUT FUNNEL" con sei stadi impilati che si restringono dall'alto verso il basso: Raw Material 100%, Processing 92%, Quality Control 84%, Assembly 78%, Packaging 72% e Shipped 70%, ognuno con il suo colore e una legenda in fondo. Il gradino più grande è il primo posto dove andare a guardare.
La sua scheda nomina tutte e sette le proprietà. I dati stanno nell'array stages, title imposta l'intestazione, showLegend e showLabels mostrano o nascondono la legenda e il testo di ogni stadio, gap distanzia i segmenti, minSize mantiene visibile anche un ultimo stadio piccolissimo e backgroundColor si adatta al tuo tema. OnStageSelected scatta quando l'operatore fa clic su uno stadio, updateValueByName modifica un solo stadio senza reinviare l'intero elenco e refreshChart lo ridisegna dopo un ridimensionamento.
Cosa ci piace
- Le perdite di ogni stadio a colpo d'occhio
- Interfaccia corta, con tutte e sette le proprietà nominate
- Aggiorna un singolo stadio per nome da uno script
Da tenere presente
- Nell'anteprima i testi dentro gli stadi sono piccoli: dagli altezza
- La scheda non descrive i campi di ogni elemento di
stages: controlla la documentazione inclusa prima di scrivere il tuo script
Proprietà collegabili
- stages
- title
- showLegend
- showLabels
- gap
- minSize
- backgroundColor
09Il migliore per le correlazioni tra due variabili
Scatter Chart
La corrente del motore sale con il carico? Gli scarti si accumulano ad alta temperatura? Sono domande da grafico a dispersione, e questo è l'unico grafico a dispersione dedicato che abbiamo trovato, ed è pulito. L'anteprima è volutamente essenziale: una cinquantina di punti ciano su sfondo scuro, assi da 0 a 100 e una tenue griglia tratteggiata.
Otto proprietà, tutte nominate nella sua scheda: l'array points per i dati, chartTitle, xAxisLabel e yAxisLabel per il contesto, pointColor e pointSize per i marcatori, showGrid e backgroundColor. PointClicked permette all'operatore di fare clic su un punto per aprire il lotto o il momento che c'è dietro, e refreshChart lo ridisegna dopo un ridimensionamento.
Cosa ci piace
- Tutto nominato nella scheda, niente di nascosto
- Look minimale, adatto alle schermate HMI ad alte prestazioni
- Evento di clic per punto per l'approfondimento
Da tenere presente
- Una sola serie e un solo colore: per confrontare due gruppi guarda il Bubble Chart tra le menzioni o remixalo
- L'anteprima conserva le etichette generiche "X-Axis Value" e "Y-Axis Value": imposta le tue
Proprietà collegabili
- points
- chartTitle
- xAxisLabel
- yAxisLabel
- pointColor
- pointSize
- showGrid
- backgroundColor
Menzioni d'onore: altri 6 grafici che meritano un'occhiata
Non sono entrati tra i nove migliori, soprattutto perché le loro pagine prodotto non nominano le proprietà o perché sono molto specialistici, ma ognuno ha una buona ragione di esistere. Fai clic su una miniatura per aprire la sua pagina prodotto.
Pie Chart - Dashboard Widget
Il veterano del gruppo (luglio 2025) e, con 68 download a novembre 2026, il controllo più scaricato di questa ricerca. Costruito su Apache ECharts, con una ciambella arrotondata e una grande etichetta al centro; la sua galleria lo mostra anche in una vera schermata WinCC Unified. La pagina non nomina le proprietà, e il tooltip dice ancora "Access From", un residuo della demo di ECharts.
Vedi prodotto
Half Donut Chart - Dashboard Widget
Il fratello: una mezza ciambella con fette a motivi, anch'essa basata su Apache ECharts e con lo stesso tooltip "Access From". Adatta a una visualizzazione compatta della ripartizione del carico, ma le sue proprietà non sono nominate nella pagina.
Vedi prodotto
Process Sankey Diagram
Un bilancio di massa di raffineria: greggio, vapore e gas attraverso distillazione, reforming e cracking catalitico fino a diesel, olio combustibile, GPL, benzina e idrogeno. Un'anteprima splendida, ma le sue nove proprietà, due eventi e due metodi non sono nominati.
Vedi prodotto
Sankey Diagram
Undici proprietà, dieci delle quali nominate nella scheda, come
Vedi prodottonodesData,linksDataedenableDragging, più un metodoexportAsImage. È rimasto fuori dalla lista perché la sua anteprima è sbiadita su uno sfondo grigio chiaro e le etichette si leggono a fatica.
Bubble Chart
Una "Process Performance Matrix": pressione su un asse, temperatura sull'altro e dimensione e colore delle bolle per la produzione. La scheda conta dieci proprietà, un evento e due metodi senza nominarli.
Vedi prodotto
PQ Diagram_BESS
Uno specialista: disegna il punto di lavoro di un sistema di accumulo a batterie su un diagramma di potenza attiva e reattiva (P-Q), dentro un cerchio definito da
Vedi prodottonominalApparentPower, evidenzia il quadrante attivo e generaLimitExceededquando si supera la potenza nominale. Appena pubblicato a novembre 2026, con le etichette dell'anteprima in rumeno ("descărcare", "încărcare"), anche se la sua scheda dice che tutte le etichette di legenda e assi si possono modificare.
Non hai trovato il tuo grafico? Creane uno (o remixane uno) con l'IA, gratis
Una confessione: tutti e nove i grafici della nostra lista sono stati creati con il generatore IA di HMIx. Per questo possiamo dirlo senza arrossire: se nessuno disegna i tuoi dati come serve a te, puoi generare il tuo in pochi minuti.
Descrivi il grafico a parole semplici (per esempio «grafico a ciambella con la ripartizione del tempo di turno in marcia, attrezzaggio, fermo e guasto, con la percentuale su ogni fetta, le ore totali al centro e un evento di clic per fetta») e il generatore ti accompagna passo dopo passo: il design, le proprietà, gli eventi e i metodi che userai in WinCC, una simulazione per provare i valori e il pacchetto Custom Web Control finale per WinCC Unified e WinCC V8. Lo stesso strumento crea anche SVG dinamici quando ti basta un disegno leggero.
- Remixa qualsiasi grafico di questa lista: nella sua pagina prodotto, il pulsante «Modifica nel generatore IA» lo apre direttamente nel generatore, pronto per chiedere modifiche come «mostra la percentuale su ogni fetta», «usa una scala dal grigio all'arancione» o «rinomina i nodi della casa in linee di produzione». I link «Modificalo con l'IA» di questo articolo fanno lo stesso.
- Provarlo è gratis: puoi iniziare senza account, con una piccola dotazione giornaliera di crediti, e il piano Community è gratuito.
- Il risultato è tuo e lo usi come vuoi: scarica il pacchetto e aggiungilo al tuo progetto TIA Portal come qualsiasi altro grafico di questa pagina.
Come usare un grafico 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.
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.Copialo nel tuo progetto TIA Portal
Copia il file
{GUID}.zip, ancora compresso, nella cartella del progetto sottoUserFiles\CustomControls(crea entrambe le cartelle se non esistono). Non estrarlo.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 lasciagli spazio per le etichette.
Collega e prova le proprietà
Seleziona il controllo e apri Finestra di ispezione → Proprietà → Proprietà → Interfaccia. La maggior parte di questi grafici riceve i dati come array o stringa JSON (
slices,links,heatmapData,points…): riempila prima con due o tre elementi statici, avvia Runtime e controlla il disegno. Poi collega i valori a variabili interne e modificali con un campo I/O. Disattiva Sola lettura sulle proprietà che il controllo deve riscrivere. Quando si comporta come previsto, passa alle tue variabili reali.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: un grafico a torta funziona solo con poche fette che sommate danno un totale sensato, come le ore di un turno o l'energia di un contatore. Oltre le sei o sette fette, raggruppa le più piccole in «Altro» o passa a un grafico a barre. E in un diagramma di Sankey verifica che quello che entra in ogni nodo sia uguale a quello che esce: l'occhio nota subito un nastro che spunta dal nulla.
Leggi la guida completa ai Custom Web ControlDomande frequenti
Perché usare un Custom Web Control per un grafico a torta in WinCC Unified?
Gli oggetti standard di WinCC sono pensati per trend, barre e valori di processo. Quando vuoi un grafico a torta o a ciambella, un diagramma di Sankey o una heatmap con i tuoi dati e un evento di clic, un grafico Custom Web Control ti dà quel grafico pronto da importare in TIA Portal e collegare.
Questi grafici Custom Web Control sono davvero gratis?
Sì. Ogni grafico di questo articolo è pubblicato come prodotto gratuito su HMIx. Per scaricarli ti basta un account gratuito.
Come invio i valori delle mie variabili a un grafico a torta o a un diagramma di Sankey?
Questi grafici ricevono i dati in una proprietà come slices, innerSectors, nodes e links o heatmapData, di solito un array o una stringa JSON. In TIA Portal puoi compilare gli elementi dell'array nella Finestra di ispezione e collegare ogni valore a una variabile, oppure costruire la stringa in uno script WinCC. Controlla il formato esatto nella documentazione inclusa nel download.
Quando conviene un diagramma di Sankey invece di un grafico a torta?
Usa un grafico a torta per le parti di un unico totale, come gli stati di una macchina durante un turno. Usa un diagramma di Sankey quando la grandezza scorre attraverso più stadi, come l'energia dalla rete e dal contatore del gas verso reparti e macchine, o il materiale lungo un processo. Una heatmap è la scelta giusta quando la domanda è quando: per ora, giorno o turno.
Funzionano sugli Unified Comfort Panel di WinCC Unified e su WinCC V8?
Le loro pagine prodotto indicano la compatibilità con WinCC Unified, Unified Comfort Panel compresi, e con WinCC V8. Come per qualsiasi controllo generato con l'IA, prova il comportamento nel tuo progetto e sul dispositivo di destinazione prima di andare in produzione, soprattutto la leggibilità delle etichette sugli schermi piccoli.
Posso modificare uno di questi grafici?
Certo. Puoi modificare tu stesso l'HTML, il CSS e il JavaScript del controllo, oppure premere «Modifica nel generatore IA» nella pagina del prodotto e chiedere le modifiche a parole tue. La seconda strada di solito è più veloce, perché il generatore si occupa dell'interfaccia e del pacchetto.
Il nostro verdetto
Se ne scarichi uno solo, che sia il Pie Chart: una ciambella sobria per gli stati macchina che avrai collegato in pochi minuti. Per una ripartizione su due livelli, il Nested Pie Chart; per attuale contro riferimento, il Radar Chart; per flussi di energia o di materiale, il Sankey Diagram, o l'Household Energy Sankey Diagram quando vuoi i valori su ogni nodo; per i carichi per turno, la Heatmap; per un'intera settimana ora per ora, la Heatmap Grid; per le perdite stadio per stadio, il Funnel; e per «A dipende da B?», lo Scatter Chart.
E se i tuoi dati hanno bisogno di un grafico che nessuno di questi disegna (succede sempre), ricorda che il generatore che li ha creati è a un clic di distanza.