Lingua:Italiano

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.

A cura del team HMIx13 min di letturaAggiornato
  • Custom Web Control
  • CWC
  • WinCC Unified
  • WinCC V8
  • TIA Portal
  • Grafico a barre
  • Dashboard HMI
  • Widget SCADA
Quattro grafici a barre Custom Web Control del catalogo HMIx in griglia: una cascata OEE con le schede di disponibilità, prestazioni e qualità, un grafico a barre raggruppate storico con selettore dei parametri, un grafico a barre sincronizzato con un grafico radar e un grafico chiaro della produzione in pezzi al minuto
La formazione titolare: anteprime reali di quattro grafici a barre di questo articolo, esattamente come le hanno pubblicate i loro autori. Noi ci siamo limitati a metterle una accanto all'altra.

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

Grafico a barre con limiti Custom Web Control intitolato Power Consumption per zona di produzione, con una linea tratteggiata ambra di preallarme a 70, una linea tratteggiata rossa di allarme a 90 e due barre su cinque diventate ambra
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

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 backgroundColor e 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
Bar Chart with Limits: grafico a barre Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Bar Chart with Limits

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

02Il migliore per pannelli stretti e verticali

Auto Adjust Bar Chart

Grafico a barre adattivo Custom Web Control con cinque barre a gradiente blu per i serbatoi dalla A alla E su una scala da 0 a 100 metri cubi e un tooltip che indica Tank B valore 82.1 m³
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

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
Auto Adjust Bar Chart: grafico a barre Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Auto Adjust Bar Chart

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

03Il miglior grafico a barre impilate

Stacked Bar Chart

Grafico a barre impilate Custom Web Control intitolato Stacked Production Throughput, con il turno Shift A in indaco e Shift B in arancione impilati per sette linee di produzione su una scala da 0 a 1.500 unità all'ora
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

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
Stacked Bar Chart: grafico a barre Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Stacked Bar Chart

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

04Il migliore per i confronti storici

Historical Bar Chart Viewer

Visualizzatore storico a barre Custom Web Control con una barra laterale per l'intervallo di tempo e cinque parametri, e barre raggruppate per giorno di temperatura, pressione, portata, umidità e tensione con etichette di minimo e massimo
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

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 historicalData quando scatta FilterChanged
  • 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
Historical Bar Chart Viewer: grafico a barre Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Historical Bar Chart Viewer

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

05Il migliore per un target diverso su ogni barra

Bar Chart with individual targets

Grafico a barre Custom Web Control con cinque barre verde acqua per le zone dalla A alla E, ognuna con la propria linea di target grigio chiaro, su una scala da 0 a 120
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

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
Bar Chart with individual targets: grafico a barre Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Bar Chart with individual targets

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

06Il miglior bullet chart per valore reale vs target

Bullet bar Chart

Bullet chart Custom Web Control intitolato Process Parameters, con quattro barre ciano sottili, marcatori bianchi di target e tenui fasce di sfondo rossa, ambra e verde su una scala da 0 a 100
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

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
  • OnParameterSelected per 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
Bullet bar Chart: grafico a barre Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Bullet bar Chart

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

07Il migliore per la cadenza produttiva in tempo reale

Production Parts Per Minute Chart

Custom Web Control a tema chiaro intitolato Parts Count per Minute, con barre blu per ogni minuto dalle 17:44 alle 17:53, un selettore Last 10 minutes e un tooltip che indica 60 pezzi al minuto
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

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 backgroundColor e barColor
  • 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
Production Parts Per Minute Chart: grafico a barre Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Production Parts Per Minute Chart

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

08Il migliore per l'analisi di difetti e fermi

Pareto Chart

Diagramma di Pareto Custom Web Control con barre blu dei difetti ordinate dai graffi agli altri e una linea rossa della percentuale cumulata che sale fino al 100 percento su un asse secondario
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

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 backgroundColor scuro
  • L'anteprima etichetta solo tre delle cinque categorie

Proprietà collegabili

  • barColor
  • lineColor
  • leftAxisTitle
  • rightAxisTitle
  • animationDuration
  • showGrid
  • backgroundColor
Pareto Chart: grafico a barre Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Pareto Chart

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

09Il migliore per l'analisi delle perdite OEE

OEE Waterfall Chart

Grafico a cascata OEE Custom Web Control per il confezionamento primario della Line-01, che scende dal 100 percento di tempo pianificato attraverso le perdite per fermi, velocità e difetti fino a un OEE netto del 79,9 percento, con le schede di disponibilità, prestazioni e qualità
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

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
  • setFactors aggiorna 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
OEE Waterfall Chart: grafico a barre Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

OEE Waterfall Chart

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

10Il migliore per lo stato di salute multivariabile della macchina

Synchronized Bar and Radar Chart

Custom Web Control con un grafico a barre Process Metrics di temperatura, pressione, vibrazione, portata e carico accanto a un grafico radar verde System Footprint con le stesse cinque grandezze
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

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
Synchronized Bar and Radar Chart: grafico a barre Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Synchronized Bar and Radar Chart

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

11Il migliore per showroom e schermi per i visitatori

Futuristic Bar Chart

Grafico a barre futuristico Custom Web Control intitolato System Load Monitor in ciano neon, con tre barre luminose per le zone Alpha, Beta e Gamma che sfumano dal ciano al rosa su una scala da 0 a 100 percento
L'anteprima reale del controllo, così come è pubblicata nel catalogo. Fai clic per aprire la pagina del prodotto.

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
Futuristic Bar Chart: grafico a barre Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

Futuristic Bar Chart

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

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: grafico a barre Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

    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: grafico a barre Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

    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: grafico a barre Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

    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: grafico a barre Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

    Bar Chart with limit

    Barre a gradiente neon che diventano rosse sopra alarmThreshold, con un bagliore opzionale e 16 proprietà. Nell'anteprima non si vede alcuna linea di soglia, anche se la scheda elenca showThresholdLine: vale la pena verificarlo.

    Vedi prodotto
  • Monthly Energy Bar Chart: grafico a barre Custom Web Control gratis per WinCC Unified e WinCC V8, miniatura del catalogo

    Monthly Energy Bar Chart

    Calcola il consumo mensile a partire dai totalizzatori cumulativi del PLC e colora le barre che superano consumptionSetpoint. Ottima idea; l'anteprima ha etichette molto tenui su bianco e il valore più alto dell'asse stampato come 1,650.0000000000002.

    Vedi prodotto

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.

  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. 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. 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.

  4. 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.

  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: 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.

Leggi la guida completa ai Custom Web Control

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.