Blog · Custom Web Controls
Gli 11 migliori grafici a barre Custom Web Control per WinCC Unified e WinCC V8 (gratis)
A ottobre 2026 abbiamo aperto tutti i grafici a barre Custom Web Control del catalogo HMIx, diciotto candidati contando le varianti raggruppate, impilate e a cascata, guardato ogni anteprima da vicino, letto ogni scheda prodotto e tenuto gli undici che metteremmo volentieri in una schermata WinCC Unified o WinCC V8. Tutti gratis, tutti in un pacchetto CWC ZIP e tutti con le proprietà nominate nella scheda, così sai cosa andrai a collegare.
- Custom Web Control
- CWC
- WinCC Unified
- WinCC V8
- TIA Portal
- Grafico a barre
- Dashboard HMI
- Widget SCADA

Scelte rapide
Vai di fretta? Salta dritto al grafico a barre che ti serve.
- 01Il migliore in assolutoBar Chart with Limits
- 02Il migliore per pannelli stretti e verticaliAuto Adjust Bar Chart
- 03Il miglior grafico a barre impilateStacked Bar Chart
- 04Il migliore per i confronti storiciHistorical Bar Chart Viewer
- 05Il migliore per un target diverso su ogni barraBar Chart with individual targets
- 06Il miglior bullet chart per valore reale vs targetBullet bar Chart
- 07Il migliore per la cadenza produttiva in tempo realeProduction Parts Per Minute Chart
- 08Il migliore per l'analisi di difetti e fermiPareto Chart
- 09Il migliore per l'analisi delle perdite OEEOEE Waterfall Chart
- 10Il migliore per lo stato di salute multivariabile della macchinaSynchronized Bar and Radar Chart
- 11Il migliore per showroom e schermi per i visitatoriFuturistic Bar Chart
Perché un grafico a barre Custom Web Control vale la pena
Il grafico a barre è il modo in cui ragiona un capoturno. Quale linea ha prodotto di più? Quale zona sta sforando il budget energetico? Quale difetto continua a ripresentarsi? Metti le risposte una accanto all'altra sotto forma di barre e l'operatore vede l'anomalia prima di leggere un solo numero: ecco perché i grafici a barre finiscono in così tante dashboard WinCC Unified.
La casella degli strumenti standard ti dà un oggetto Barra per un singolo valore e i controlli di trend per le serie temporali. Confrontare molte categorie, impilare i turni, disegnare un Pareto o una cascata OEE: è lì che un grafico a barre Custom Web Control (CWC) si guadagna il suo posto. È 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 un'interfaccia di proprietà come alarmThreshold o yAxisMax da collegare a variabili HMI e può generare eventi, per esempio il clic su una barra, verso i tuoi script HMI.
Cosa rende un grafico a barre 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:
- Leggibile al primo sguardo. Assi chiari, scale sensate ed etichette che si leggono a un metro di distanza. Un grafico che nasconde metà dei nomi delle categorie è un rebus, non una visualizzazione.
- Limiti e target. Linee di preallarme e di allarme, target per singola barra o cambi di colore trasformano un bel grafico in uno che dice all'operatore quando intervenire.
- 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 grafico giusto per ogni domanda. Barre impilate per le quote, barre raggruppate per lo storico, un Pareto per i difetti, una cascata per le perdite OEE: abbiamo scelto un campione per ogni domanda.
- Un aspetto sobrio. Sfondi scuri e piatti e colori che si possono smorzare per schermate high-performance nello spirito della ISA-101, con i colori forti riservati ai limiti.
Come li abbiamo scelti (e cosa non abbiamo fatto)
A ottobre 2026 abbiamo cercato nel catalogo HMIx tutti i Custom Web Control gratuiti che hanno le barre come cuore: grafici semplici, impilati, raggruppati, bullet, Pareto e a cascata. Barre di avanzamento singole, barre di menu e timeline di stato sono rimaste fuori. 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, perché un grafico pubblicato il mese scorso non ha avuto il tempo di accumularne.
I grafici le cui schede non nominano le proprietà, o le cui anteprime mostrano difetti visibili, sono finiti nelle menzioni d'onore, anche quelli popolari. Altri due sono stati scartati: un'anteprima mostra solo l'icona del controllo e un'altra è sbiadita, con l'etichetta della soglia appiccicata sull'asse. 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.
Gli 11 migliori grafici a barre 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 gratis.
01Il migliore in assoluto
Bar Chart with Limits

Se potessimo tenerne uno solo, sarebbe questo. "Power Consumption, by production zone" sovrasta cinque barre su una scala da 0 a 100, una linea tratteggiata ambra segna "Warning 70" e una rossa "Alarm 90". Le due zone sopra la linea di preallarme sono diventate ambra da sole, e una legenda in basso esplicita la regola: Normal < 70, Warning ≥ 70, Alarm ≥ 90. Un piccolo badge kW nell'angolo indica l'unità di misura.
La sua scheda documenta 13 proprietà e le nomina quasi tutte: warningThreshold e alarmThreshold per i limiti, yAxisMax per la scala, title, subtitle e unit per i testi (collegabili, così l'etichetta può seguire il processo), normalColorStart, normalColorEnd, warningColor e alarmColor per la palette, più showGrid e backgroundColor. Tooltip, un evento OnBarClicked e i metodi refreshChart e clearData completano il quadro.
Cosa ci piace
- Limiti di preallarme e allarme disegnati e applicati ai colori delle barre
- Legenda che si spiega da sola all'operatore
- Interfaccia ricca e con nomi chiari
Da tenere presente
- L'anteprima pubblicata sembra sbiadita, con una scheda grigia ed etichette tenui, e l'unità sopra l'asse è tagliata: imposta
backgroundColore verificalo nel tuo progetto - Una sola serie per grafico: per più valori per categoria, guarda i grafici impilati o storici
Proprietà collegabili
- warningThreshold
- alarmThreshold
- yAxisMax
- title
- subtitle
- unit
- normalColorStart
- normalColorEnd
- warningColor
- alarmColor
- showGrid
- backgroundColor
02Il migliore per pannelli stretti e verticali
Auto Adjust Bar Chart

Quello che sta bene ovunque lo metti. Cinque barre a gradiente confrontano i serbatoi da Tank A a Tank E su una scala da 0 a 100 m³, e nell'anteprima Tank B è evidenziato con un tooltip che dice "Value: 82.1 m³". Ordinato, leggibile e con l'unità su ogni tacca dell'asse.
Il suo asso nella manica, secondo la scheda, è che rileva il proprio rapporto d'aspetto e passa da barre verticali a orizzontali, così si adatta sia a un monitor largo da sala controllo sia a uno slot stretto su un Unified Comfort Panel. Lo pilotano sei proprietà: data, unit, barColorStart, barColorEnd, showGrid e backgroundColor. Toccando una barra compare il suo tooltip e scatta BarClicked; clearSelection lo chiude dai tuoi script.
Cosa ci piace
- Cambia orientamento per adattarsi allo spazio
- Unità mostrata sull'asse e nel tooltip
- Solo sei proprietà
Da tenere presente
- Niente limiti né target: mostra i valori e basta
- L'anteprima mostra solo il layout verticale, quindi prova quello orizzontale nella tua schermata
Proprietà collegabili
- data
- unit
- barColorStart
- barColorEnd
- showGrid
- backgroundColor
03Il miglior grafico a barre impilate
Stacked Bar Chart

Il classico report di turno, fatto come si deve. In alto c'è "STACKED PRODUCTION THROUGHPUT", una legenda distingue Shift A (indaco) da Shift B (arancione) e sette linee di produzione impilano i due turni su una scala da 0 a 1.500 unità all'ora. Totale e contributo di ciascuno, in un solo colpo d'occhio.
I dati vivono nell'array series, che definisce valori e colori di ogni strato impilato, mentre xAxisLabels riceve un array JSON con le categorie. chartTitle, yAxisTitle e backgroundColor fanno il resto. La scheda nomina anche due metodi comodi: exportAsImage, che scarica la vista corrente come PNG per il report di turno, e refreshChart.
Cosa ci piace
- Totali e contributi in un'unica barra
- Esportazione in PNG integrata
- Interfaccia corta e facile da collegare
Da tenere presente
- Con sette linee l'anteprima etichetta solo una linea sì e una no (LINE A, C, E, G): dagli abbastanza larghezza
- La scheda non nomina alcun evento, quindi controlla l'elenco Interfaccia in TIA Portal se ti serve l'interazione al clic
Proprietà collegabili
- series
- xAxisLabels
- chartTitle
- yAxisTitle
- backgroundColor
04Il migliore per i confronti storici
Historical Bar Chart Viewer

Più un piccolo strumento di analisi che un grafico. Una barra laterale contiene l'intervallo di tempo (dal 2024-02-10 00:00 al 2024-02-17 23:59 nell'anteprima), cinque parametri con caselle di spunta e un pulsante Apply Changes; a destra, otto giorni di barre raggruppate confrontano temperatura, pressione, portata, umidità e tensione. I valori più alti e più bassi sono scritti in verticale dentro le barre con delle piccole frecce, così gli estremi saltano all'occhio.
La sua scheda descrive sette proprietà principali: historicalData, parameters, startDate, endDate, chartTitle, yAxisLabel e backgroundColor. Quando l'operatore cambia le date scatta FilterChanged, così il tuo script può andare a prendere i nuovi dati; ParameterToggled segnala le serie mostrate o nascoste; e refreshChart e setTimeRange permettono ad altre schermate di pilotarlo.
Cosa ci piace
- Intervallo di date e selezione delle serie integrati nel controllo
- Valori minimi e massimi evidenziati dentro le barre
- Eventi pronti per il recupero dati da script
Da tenere presente
- Non legge da solo i tuoi archivi: il tuo script deve riempire
historicalDataquando scattaFilterChanged - Tutte le serie condividono un solo asse, quindi nell'anteprima la tensione, intorno a 220, schiaccia le altre quattro: raggruppa parametri con campi simili
Proprietà collegabili
- historicalData
- parameters
- startDate
- endDate
- chartTitle
- yAxisLabel
- backgroundColor
05Il migliore per un target diverso su ogni barra
Bar Chart with individual targets

Ogni linea ha il suo obiettivo, e questo grafico lo rispetta. Cinque barre verde acqua, da Zone A a Zone E, portano ciascuna la propria linea di target grigio chiaro su una scala da 0 a 120: Zone A resta sotto, Zone B e Zone D superano il loro target e Zone E ci arriva esattamente sopra. Niente legenda: l'immagine si spiega da sola.
La sua scheda nomina yAxisMax per la scala, barWidth, positiveColor, showGrid, gridColor e backgroundColor per l'aspetto, e tooltipValueLabel e tooltipTargetLabel perché il tooltip parli la tua lingua ("Actual" e "Plan", per esempio). Un evento BarClicked apre la strada a pop-up diagnostici, e refreshChart e clearData ci sono per gli script.
Cosa ci piace
- Un target per categoria, non un'unica linea per tutte
- Etichette del tooltip rinominabili
- Aspetto pulito e sobrio
Da tenere presente
- Nell'anteprima i numeri dell'asse e i nomi delle zone sono minuscoli e poco visibili
- Nell'anteprima ogni barra mantiene lo stesso colore, che superi il suo target o no
Proprietà collegabili
- yAxisMax
- barWidth
- positiveColor
- tooltipValueLabel
- tooltipTargetLabel
- showGrid
- gridColor
- backgroundColor
06Il miglior bullet chart per valore reale vs target
Bullet bar Chart

Il bullet chart è la risposta di chi progetta dashboard al gauge: stessa informazione, una frazione dello spazio. Sotto il titolo "Process Parameters", quattro barre ciano sottili mostrano i valori reali, un marcatore bianco brillante indica ogni target e dietro, tenui fasce rossa, ambra e verde suggeriscono i campi di qualità. Una legenda Actual/Target chiude la scheda.
La sua scheda elenca nove proprietà. L'array parameters contiene i dati, title e subtitle i testi, e actualColor, targetColor e backgroundColor la palette. actualBarWidth e targetMarkerWidth stabiliscono la gerarchia visiva tra valore e setpoint, e horizontalOffset regola con precisione come i marcatori si appoggiano sulle fasce. Un evento OnParameterSelected e un metodo refreshChart completano l'interfaccia.
Cosa ci piace
- Valore, target e campi di qualità in pochissimo spazio
- Legenda Actual/Target chiara
OnParameterSelectedper pop-up di approfondimento
Da tenere presente
- Nell'anteprima il grafico occupa solo la metà sinistra della scheda e due delle quattro barre non hanno etichetta
- Le fasce di sfondo sono molto tenui: verificale con la luminosità reale del tuo schermo
Proprietà collegabili
- parameters
- title
- subtitle
- actualColor
- targetColor
- actualBarWidth
- targetMarkerWidth
- horizontalOffset
- backgroundColor
07Il migliore per la cadenza produttiva in tempo reale
Production Parts Per Minute Chart

L'unica scelta a tema chiaro, e una delle più pratiche. "Parts Count per Minute" mostra una barra blu per ogni minuto, dalle 17:44 alle 17:53 nell'anteprima, un selettore "Last 10 minutes" nell'angolo e un tooltip sull'ultima barra: 60 parts/min. Il battito cardiaco della tua linea, in una sola scheda.
Lo alimenti un campione alla volta tramite productionValue e timestamp, e un buffer circolare interno conserva fino a historyLength campioni. maxYAxis fissa la scala, mentre chartTitle, yAxisLabel, barColor e backgroundColor ne curano lo stile; la sua scheda conta nove proprietà. Il menu a tendina cambia la finestra temporale e genera TimeframeChanged, SampleAdded e BarClicked segnalano il resto, e addProductionSample e clearHistory gestiscono i dati a ogni cambio lotto.
Cosa ci piace
- Costruisce da solo lo storico scorrevole a partire da una sola variabile
- Finestra temporale selezionabile dall'operatore
- Design chiaro e pulito, con colori modificabili
Da tenere presente
- La scheda chiara spicca su un tema HMI scuro finché non cambi
backgroundColorebarColor - Lo storico vive nel buffer del controllo: verifica cosa conserva dopo un cambio schermata prima di usarlo per i report
Proprietà collegabili
- productionValue
- timestamp
- historyLength
- maxYAxis
- chartTitle
- yAxisLabel
- barColor
- backgroundColor
08Il migliore per l'analisi di difetti e fermi
Pareto Chart

La regola dell'80/20, pronta da collegare. Le barre blu contano i difetti in ordine decrescente, dai graffi a quota 45 fino a "Others", e una linea rossa a punti sale con la percentuale cumulata su un secondo asse fino a toccare il 100 %. Due titoli, "Defects" e "Cumulative %", non lasciano dubbi su quale asse sia quale.
Il bello è che non devi ordinare né sommare niente: secondo la sua scheda, il controllo ordina i dati e calcola da solo i totali cumulati. Otto proprietà gli danno forma, tra cui barColor, lineColor, leftAxisTitle, rightAxisTitle, animationDuration, showGrid e backgroundColor. Un evento OnPointClick permette all'operatore di approfondire un tipo di difetto, e refresh ed exportAsImage ci sono per aggiornamenti e report.
Cosa ci piace
- Ordinamento e percentuale cumulata calcolati per te
- Doppio asse con titoli chiari
- Esportazione in immagine per le riunioni qualità
Da tenere presente
- Le etichette grigio chiaro su sfondo bianco sono poco visibili; alzane il contrasto o passa a un
backgroundColorscuro - L'anteprima etichetta solo tre delle cinque categorie
Proprietà collegabili
- barColor
- lineColor
- leftAxisTitle
- rightAxisTitle
- animationDuration
- showGrid
- backgroundColor
09Il migliore per l'analisi delle perdite OEE
OEE Waterfall Chart

La dashboard più completa della lista. "LINE-01 • PRIMARY PACKAGING" e "OEE Waterfall Analysis" aprono la scheda, un badge mostra un Net OEE del 79.9 % contro un target dell'80.0 %, e la cascata scende dal 100 % di tempo pianificato attraverso la perdita per fermi (−11.5 %), la perdita di velocità (−7.1 %) e la perdita per difetti (−1.5 %) fino al 79.9 % finale. Sotto, tre schede mostrano disponibilità 88.5 %, prestazioni 92.0 % e qualità 98.2 %, ciascuna con la sua formula.
La sua scheda nomina targetOee per il riferimento, equipmentTag e panelTitle per l'intestazione, proprietà di testo come availabilityLabel e performanceFormula per le schede, e backgroundColor. TargetThresholdCrossed scatta quando l'OEE attraversa il target, FactorCardClicked apre un approfondimento e setFactors aggiorna i tre fattori in un colpo solo, così il quadro non mostra mai dati aggiornati a metà. È la scelta più recente, pubblicata a settembre 2026.
Cosa ci piace
- Mostra dove se ne va l'efficienza, non solo il numero finale
- Schede dei fattori con le loro formule, ideali per le riunioni di turno
setFactorsaggiorna tutto in una volta
Da tenere presente
- Layout largo: serve uno slot ampio per restare leggibile
- Nell'anteprima la barra del tempo pianificato è appena più scura dello sfondo
Proprietà collegabili
- targetOee
- equipmentTag
- panelTitle
- availabilityLabel
- performanceFormula
- backgroundColor
10Il migliore per lo stato di salute multivariabile della macchina
Synchronized Bar and Radar Chart

Due viste degli stessi cinque numeri. A sinistra, "Process Metrics" mostra temperatura, pressione, vibrazione, portata e carico come barre dal ciano al blu su una scala da 0 a 100, ciascuna con una traccia scura dietro. A destra, "System Footprint" disegna le stesse grandezze come una forma radar verde. Le barre danno confronti esatti; il radar dà alla macchina un'impronta che impari a riconoscere.
La sua scheda nomina alarmThreshold, che colora di rosso barre e punti del radar quando i valori superano il limite, barColorStart e barColorEnd per il gradiente, barChartTitle e radarChartTitle, showTooltips e backgroundColor. Tutte le grandezze si gestiscono con un unico array strutturato. Per gli script ci sono un evento OnMetricSelected e un metodo refreshCharts.
Cosa ci piace
- Valori esatti e forma complessiva fianco a fianco
- Una sola soglia di allarme colora entrambi i grafici
- Perfetto per le schermate sullo stato di motori e pompe
Da tenere presente
- L'anteprima lascia molto spazio vuoto sopra e sotto i due grafici
- Le etichette degli assi del radar sono piccole: verificale su un pannello
Proprietà collegabili
- alarmThreshold
- barChartTitle
- radarChartTitle
- barColorStart
- barColorEnd
- showTooltips
- backgroundColor
11Il migliore per showroom e schermi per i visitatori
Futuristic Bar Chart

Non tutte le schermate sono per la sala controllo. "SYSTEM LOAD MONITOR" brilla in ciano neon sopra una griglia tenue, e tre barre larghe, Zone Alpha, Beta e Gamma, sfumano dal ciano al rosa su una scala da 0 a 100 %. È il grafico da mettere sul maxischermo del corridoio visitatori o nella demo in fiera.
Le sue sei proprietà sono semplici: l'array bars per i dati, maxValue per la scala, title, showGrid, showScanlines per un effetto CRT opzionale e backgroundColor. Un evento BarClicked e un metodo refreshChart coprono l'interazione.
Cosa ci piace
- Look d'impatto che viene benissimo in foto
- Solo sei proprietà
- Scanline e griglia opzionali
Da tenere presente
- Pensato per tre barre: non è quello giusto per lunghi elenchi di categorie
- Lo stile neon è l'opposto di una schermata sobria in stile ISA-101; tienilo lontano dalla vista principale dell'operatore
Proprietà collegabili
- bars
- maxValue
- title
- showGrid
- showScanlines
- backgroundColor
Menzioni d'onore: altri 5 grafici a barre che meritano un'occhiata
Buoni controlli rimasti fuori dalla top 11, 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.

Modern Bar Chart
Il grafico a barre più scaricato del catalogo a ottobre 2026: dodici barre mensili con etichette dei valori e un gradiente dall'indaco al verde acqua. La sua anteprima è in spagnolo ("Rendimiento Operativo", da ENE a DIC), le barre escono dal fondo della scheda e la scheda prodotto conta dieci proprietà, due eventi e due metodi senza nominarli.
Vedi prodotto
Grouped Bars Charts
Un parente stretto dell'Historical Bar Chart Viewer, con pulsanti rapidi 7 Days, 30 Days e All, schede dei parametri con unità e valori dentro le barre. Tredici proprietà; sceglilo se preferisci gli intervalli rapidi alle date digitate.
Vedi prodotto
Grouped Bar Chart
Barre raggruppate con una barra laterale dei parametri con ricerca, pulsanti Select All e Clear All e un intervallo di date. Dieci proprietà secondo la sua scheda; l'anteprima è scarna, con tre gruppi di barre sottili.
Vedi prodotto
Bar Chart with limit
Barre a gradiente neon che diventano rosse sopra
Vedi prodottoalarmThreshold, con un bagliore opzionale e 16 proprietà. Nell'anteprima non si vede alcuna linea di soglia, anche se la scheda elencashowThresholdLine: vale la pena verificarlo.
Monthly Energy Bar Chart
Calcola il consumo mensile a partire dai totalizzatori cumulativi del PLC e colora le barre che superano
Vedi prodottoconsumptionSetpoint. Ottima idea; l'anteprima ha etichette molto tenui su bianco e il valore più alto dell'asse stampato come 1,650.0000000000002.
Non hai trovato il tuo grafico a barre? Creane uno (o remixane uno) con l'IA, gratis
Una confessione: tutti i grafici a barre di questo articolo sono stati creati con il generatore IA di HMIx. Per questo possiamo dirlo senza arrossire: se nessuno risponde esattamente alla domanda che si pone il tuo impianto, puoi generare il tuo in pochi minuti.
Descrivi il grafico a parole semplici (per esempio «grafico a barre orizzontali dell'energia per reparto in kWh, palette grigia ISA-101, una linea di target per ogni barra e barra che diventa ambra sopra il suo target») 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 «usa uno sfondo scuro», «mostra il valore sopra ogni barra» o «aggiungi una linea di target». 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 a barre 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 lascia abbastanza 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 (
data,series,bars…), quindi inizia collegandola a una variabile interna di tipo stringa, aggiungi un campo I/O o uno script di prova che scriva qualche valore e avvia Runtime. Quando le barre si comportano bene, passa ai dati reali del PLC.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 si limita a visualizzare dati, quindi lascia attivo Sola lettura quando ne colleghi le proprietà. Disattivalo solo per una proprietà che il controllo stesso deve riscrivere su una variabile, come ricordano le schede prodotto. E fissa la scala (yAxisMax, maxValue, maxYAxis…) sul campo reale del tuo processo: una scala che salta a ogni aggiornamento rende impossibile confrontare le barre.
Domande frequenti
Questi grafici a barre Custom Web Control sono davvero gratis?
Sì. Ogni grafico a barre di questo articolo è pubblicato come prodotto gratuito su HMIx. Per scaricarli ti basta un account gratuito.
WinCC Unified ha un grafico a barre già pronto?
WinCC Unified include un oggetto Barra per un singolo valore e i controlli di trend per i valori nel tempo. Per confrontare categorie, impilare serie, fare un'analisi di Pareto o una cascata OEE, un grafico a barre Custom Web Control come quelli di questo articolo è il modo pratico per portarli in una schermata.
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.
Come invio più valori a un grafico a barre dalle variabili del PLC?
La maggior parte di questi grafici riceve i dati tramite una proprietà array o stringa JSON, come data, series o bars. Costruisci quella stringa a partire dalle tue variabili in uno script oppure collegala a una variabile di tipo stringa, e controlla il formato esatto nella documentazione inclusa nel download. Il Production Parts Per Minute Chart è l'eccezione: riceve un valore alla volta e costruisce da solo il suo storico.
Dove copio lo ZIP nel mio progetto TIA Portal?
Copia il file interno {GUID}.zip, senza estrarlo, in UserFiles\CustomControls della cartella del progetto. Poi fai clic su Aggiorna in I miei controlli, nella task card Tool, e trascina il controllo nella schermata.
Posso modificare uno di questi grafici a barre?
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 Bar Chart with Limits: linee di preallarme e di allarme che colorano le barre da sole e una legenda che l'operatore capisce al volo. Per un target per categoria, il Bar Chart with individual targets o il compatto Bullet bar Chart; per i turni, lo Stacked Bar Chart; per lo storico, l'Historical Bar Chart Viewer; per la produzione in tempo reale, il Production Parts Per Minute Chart; per la qualità, il Pareto Chart; per l'efficienza, l'OEE Waterfall Chart. Lo stato di salute della macchina va al Synchronized Bar and Radar Chart, i pannelli stretti all'Auto Adjust Bar Chart e lo schermo per i visitatori al Futuristic Bar Chart.
E se il tuo impianto si pone una domanda a cui nessuno di questi risponde (succede sempre), ricorda che il generatore che li ha creati è a un clic di distanza.