Kreisdiagramm, Sankey-Diagramm und Heatmap: die 9 besten Custom Web Controls für WinCC Unified und WinCC V8 (kostenlos)

Warum ein Kreisdiagramm, Sankey-Diagramm oder eine Heatmap als Custom Web Control eine echte Lücke füllt

Jede Anlage hat Fragen, die eine Trendkurve schlecht beantwortet. Wo ist die Schicht geblieben: Produktion, Rüsten, Stillstand oder Störung? Welche Linie frisst die meiste Energie? Welche Stunde der Woche läuft immer heiß? Ein Kreisdiagramm beantwortet die erste, ein Sankey-Diagramm die zweite und eine Heatmap die dritte – und für keine davon sind die Standardobjekte von WinCC gebaut.

Genau hier kommt ein Diagramm Custom Web Control (CWC) ins Spiel. Ein CWC ist eine kleine Webanwendung – HTML, CSS und JavaScript, verpackt als ZIP –, die WinCC Unified (TIA Portal) und WinCC V8 im Bild ausführen. Die meisten Diagramm-CWCs nehmen ihre Daten als Array oder JSON-String in einer Eigenschaft wie slices, nodes oder heatmapData entgegen: Deine HMI-Variablen und Skripte liefern die Zahlen, das Control zeichnet sie. Viele senden außerdem Ereignisse wie SliceClicked oder CellClicked, sodass ein Klick auf ein Segment oder eine Zelle das Detailbild öffnen kann.

Was ein Diagramm Custom Web Control downloadwürdig macht

Bevor es losgeht, der Maßstab. Danach haben wir gesucht, grob sortiert danach, wie sehr es uns nervt, wenn es fehlt:

• Das richtige Diagramm für die Frage. Anteile an einem Ganzen gehören in ein Kreisdiagramm, Flüsse in ein Sankey-Diagramm, Muster über die Zeit in eine Heatmap, mehrere Größen gegen eine Referenz in ein Radardiagramm. Ein hübsches Diagramm, das die falsche Frage beantwortet, ist bloß Deko.
• Auf dem Panel lesbar. Beschriftungen, die nicht abgeschnitten sind, Werte oder Prozente, die man wirklich lesen kann, und eine Farbskala, die sich selbst erklärt. Schicke Farbverläufe ersetzen keine lesbare Zahl.
• Ein sauberer Datenvertrag. Die Daten in einer dokumentierten Eigenschaft (slices, links, heatmapData, points), damit du genau weißt, was deine Variablen oder Skripte schreiben müssen.
• Interaktion, die irgendwohin führt. Ein Klick-Ereignis auf Segment, Knoten oder Zelle macht aus einem Bild eine Navigation. Produktblätter, die ihre Eigenschaften nur zählen, sind bei den lobenden Erwähnungen gelandet.
• Ein Champion pro Aufgabe. Ein Kreis- oder Donut-Diagramm, ein Kreisdiagramm mit zwei Ringen, ein Radardiagramm, zwei Sankey-Diagramme, zwei Heatmaps, ein Trichterdiagramm und ein Streudiagramm: verschiedene Fragen, verschiedene Werkzeuge.

Wie wir ausgewählt haben (und was wir nicht gemacht haben)

Wir haben den HMIx-Katalog im November 2026 nach jedem kostenlosen Custom Web Control durchsucht, das Kreis-, Donut-, Radar-, Sankey-, Heatmap-, Trichter-, Scatter- oder Blasendiagramme zeichnet. Balken- und Trenddiagramme haben schon eigene Artikel, die blieben also draußen. Bei jedem Kandidaten haben wir uns die echte Vorschau angesehen (nicht das Katalog-Cover mit dem großen Titel obendrauf), das Produktblatt gelesen und, wo der Ersteller sie veröffentlicht hat, die Screenshots aus TIA Portal in der Galerie, um zu sehen, welche Eigenschaften, Ereignisse und Methoden es dokumentiert. Downloads waren nur das Zünglein an der Waage.

Controls, deren Seiten ihre Eigenschaften nicht nennen, sind bei den lobenden Erwähnungen gelandet. Rausgeflogen sind ein Blasendiagramm, dessen Achse „Efficiency (%)“ bis 70.000 reicht, und ein Diagramm, das wir schon in unserem Artikel über Balkendiagramme ausgewählt haben. Und eine faire Warnung: Wir haben Vorschauen und Dokumentation bewertet; in einer laufenden Runtime haben wir diese Controls nicht betrieben. Sie wurden mit KI erstellt, und jede Produktseite erinnert dich daran, sie vor dem Produktiveinsatz in deinem eigenen Projekt in TIA Portal zu testen.

Die 9 besten Kreis-, Sankey-, Heatmap- und weiteren Diagramm Custom Web Controls im Einzelnen

Jeder Eintrag zeigt die echte Vorschau, was uns gefällt, was du wissen solltest und welche Eigenschaften die Produktseite nennt, gefolgt vom Vorschaubild aus dem Katalog: Ein Klick darauf öffnet die Produktseite, auf der du das Diagramm kostenlos herunterlädst.

01Gesamtsieger (Kreis oder Donut)

Pie Chart

Dürften wir nur eines behalten, wäre es dieses – weil es die Frage beantwortet, die dir am häufigsten gestellt wird: Wo ist die Zeit geblieben? Die Vorschau zeigt einen sauberen dunklen Donut, aufgeteilt in Production, Idle, Maintenance, Fault und Setup, in Blau, Grau, Orange, Rot und Lila, mit einer dezenten Legende rechts. Genau die Aufschlüsselung der Anlagenzustände, die ein OEE-Bild braucht, und sie schreit nicht.

Kreis oder Donut entscheidest du: innerRadius und outerRadius sind Prozentwerte, ein Innenradius von null ergibt also ein klassisches Kreisdiagramm. Die Daten kommen ins Array slices, title setzt eine Überschrift, showLegend und legendPosition (oben, unten, links oder rechts) platzieren die Legende, und backgroundColor passt es an dein Theme an. Laut Produktblatt zeigen die Tooltips jeden Wert mit seiner Einheit, SliceClicked lässt einen Klick das Detail eines Zustands öffnen, und die Methoden refresh und resetValues leeren das Diagramm beim Chargenwechsel.

Was uns gefällt

• +Kreis oder Donut mit zwei Prozent-Eigenschaften
• +Ruhige, gut lesbare Optik auf dunklen Bildern
• +Klick-Ereignis pro Segment für den Drill-down

Gut zu wissen

• –In der Vorschau keine Werte oder Prozente auf den Segmenten: Der Bediener muss hovern oder die Legende lesen
• –Das Produktblatt zählt acht Eigenschaften, nennt aber sieben: Prüf die Einheiten-Eigenschaft in TIA Portal

Dynamisierbare Eigenschaften

• title
• slices
• innerRadius
• outerRadius
• showLegend
• legendPosition
• backgroundColor

Pie Chart

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

02Am besten für Aufschlüsselungen auf zwei Ebenen (zwei Ringe)

Nested Pie Chart

Ein Kreisdiagramm sagt dir, dass die Produktion die meiste Energie verbraucht; dieses sagt dir auch, welche Linie. Die Vorschau, „Energy Consumption Breakdown“, hat einen inneren Kreis mit drei Bereichen (Production, Infrastructure und Logistics) und einen äußeren Ring mit deren Anlagen, jede mit einem Beschriftungskasten aus Wert und Prozent: „Assembly Line A: 450, 33.33%“, „HVAC Unit 1: 120, 8.89%“ und so weiter.

Das Produktblatt kündigt 17 Eigenschaften an und nennt zwölf davon. Die Daten kommen in innerSectors und outerSectors, die Geometrie in innerRadius, outerRadiusStart und outerRadiusEnd, die Texte in titleText, subtitleText und unitLabel und die Beschriftungen in labelRichBackgroundColor und labelLineLength. theme schaltet zwischen hell und dunkel um, animationDuration macht Aktualisierungen weicher, SectorClicked meldet Klicks und resetSelection setzt sie zurück.

Was uns gefällt

• +Zwei Detailebenen in einem einzigen Diagramm
• +Wert und Prozent an jedem äußeren Sektor
• +Helles und dunkles Theme eingebaut

Gut zu wissen

• –Die Beschriftungen sind in der Vorschau klein: Gib ihm eine große Kachel oder weniger Sektoren
• –Fünf seiner 17 Eigenschaften stehen nicht auf der Seite

Dynamisierbare Eigenschaften

• innerSectors
• outerSectors
• titleText
• subtitleText
• unitLabel
• theme
• innerRadius
• outerRadiusStart
• outerRadiusEnd
• labelRichBackgroundColor
• labelLineLength
• animationDuration

Nested Pie Chart

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

03Am besten für Ist-Soll-Vergleiche mit einer Referenz

Radar Chart

Ein Radardiagramm ist der schnellste Weg, um zu sehen, ob sich eine Maschine wie ihre Referenz verhält. Dieses hier zeichnet sechs Achsen (Effizienz, Drehzahl, Last, Druck, Vibration und Temperatur) auf ein dunkles Sechseckraster, mit einem gefüllten cyanfarbenen Polygon für „Actual Status“ und einem gestrichelten gelben für „Reference“. Wo die beiden Formen auseinanderlaufen, gibt es etwas zu untersuchen.

Seine sieben Eigenschaften sind alle im Produktblatt benannt. indicators definiert die Achsen und ihr Maximum, series trägt die Daten, chartTitle und showLegend liefern Kontext, labelColor und backgroundColor regeln die Optik, und animationDuration macht die Übergänge weicher. PointClicked meldet, welcher Punkt angeklickt wurde – praktisch, um den Trend dieser Größe zu öffnen.

Was uns gefällt

• +Ist und Referenz auf einen Blick
• +Kurze, vollständig dokumentierte Schnittstelle
• +Ruhige Farben und gut lesbare Achsennamen

Gut zu wissen

• –Jede Achse hat ihr eigenes Maximum: Skalier deine Werte mit Bedacht, sonst täuscht die Form
• –In der Vorschau kein Titel: Setz chartTitle, damit der Bediener weiß, um welche Maschine es geht

Dynamisierbare Eigenschaften

• indicators
• series
• chartTitle
• showLegend
• labelColor
• backgroundColor
• animationDuration

Radar Chart

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

04Publikumsliebling: das meistgeladene Sankey-Diagramm

Sankey Diagram

Von den Sankey-Diagrammen in unserer Suche ist dieses das meistgeladene (16 Downloads und zwei Fünf-Sterne-Bewertungen im November 2026). Die Vorschau, die wir zeigen, ist ein dunkles Panel „ENERGY FLOW ANALYSIS“: Zwei Linien speisen vier Maschinen, die sich auf sechs Ausgänge aufteilen, mit breiten, durchscheinenden Bändern, deren Dicke dem Wert folgt. Ein weiteres Galeriebild zeigt einen Hover, der alles bis auf einen Link abdunkelt und ihn mit „Machine 3 -- Spare 1 10“ beschriftet.

Das Produktblatt sagt nur, dass es neun Eigenschaften und zwei Ereignisse hat, aber die Galerie enthält zwei Screenshots des Inspektorfensters in TIA Portal, die die Frage klären. Die Struktur steckt in zwei Arrays: nodes (jedes Element hat einen name) und links (jeweils mit source, target und value). Drumherum title und showTitle für die Überschrift, nodeWidth und nodeGap für die Spalten sowie curveness und linkOpacity für die Bänder. Die Arrays in TIA Portal bearbeitet zu sehen, ist genau die Beruhigung, die man vor dem Verbinden haben will.

Was uns gefällt

• +Datenstruktur in echten Screenshots aus TIA Portal zu sehen
• +Einfaches Modell: eine Liste von Namen und eine Liste von Links aus Quelle, Ziel und Wert
• +Hover-Hervorhebung macht ein volles Diagramm lesbar

Gut zu wissen

• –Das erste Galeriebild schneidet die Beschriftungen rechts ab („Production I“, „HVAC Syste“): Lass ihnen Platz
• –Die zwei Ereignisse stehen nicht auf der Seite: Prüf sie in der mitgelieferten Dokumentation

Dynamisierbare Eigenschaften

• nodes
• links
• title
• showTitle
• nodeWidth
• nodeGap
• curveness
• linkOpacity

Sankey Diagram

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

05Am besten für Energieaufschlüsselungen mit Werten an jedem Knoten

Household Energy Sankey Diagram

Das informativste Sankey-Diagramm im Katalog und das einzige, das an jeden Knoten den Wert schreibt. Total Energy (19.000 kWh) teilt sich in Electricity (10.800) und Natural Gas (8.200), dann in Heizung, Warmwasser, Kühlung, Haushaltsgeräte, Beleuchtung und Elektronik und schließlich in Kühlschrank, Waschmaschine und Trockner, Geschirrspüler, Computer und Fernseher. Wir haben nachgerechnet: Jede Ebene der Demo geht sauber auf, und das schaffen nicht mal alle Energieberichte.

Mit 28 Eigenschaften ist es auch das am stärksten konfigurierbare. Das Produktblatt nennt ShowLabels und ShowValues für die Texte, FlowOpacity für die Bänder, AnimationEnabled für die Übergänge, nodeWidth und nodePadding für das Layout sowie Rand-Eigenschaften wie marginTop und marginRight, damit keine Beschriftung abgeschnitten wird. Es löst NodeClicked und FlowSelected aus, und die Methoden updateFlowValue, UpdateData und SetAnimationSpeed aktualisieren es aus deinen Skripten.

Was uns gefällt

• +Werte in kWh an jedem Knoten, ohne Hover lesbar
• +Drei Aufschlüsselungsebenen, die aufgehen
• +Sehr konfigurierbar, mit Ereignissen an Knoten und Flüssen

Gut zu wissen

• –Es ist für einen Haushalt gedacht, und das Produktblatt nennt Quellen und Verbraucher wie TotalElectricity, GasHeating und Refrigerator: Prüf in der Dokumentation, wie weit du sie für eine Anlage umbenennen kannst
• –Einige Beschriftungen („Water Heating“, „Appliances“) liegen auf den Bändern

Dynamisierbare Eigenschaften

• ShowLabels
• ShowValues
• FlowOpacity
• AnimationEnabled
• nodeWidth
• nodePadding
• marginTop
• marginRight

Household Energy Sankey Diagram

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

06Am besten für Schicht- und Produktionslastkarten

Heatmap

Während das Heatmap Grid eine ganze Woche Stunde für Stunde zeigt, ist diese hier gern klein und präzise. Die Vorschau, die wir zeigen, ist ein Raster „Production Load Analysis“ aus drei Tagen mal drei Schichten (00:00, 08:00 und 16:00) mit dem Wert in jeder Zelle, einem weißen Rahmen um die ausgewählte Zelle, einem Tooltip mit „Value: 50%“ und einer Farbskala mit Schiebereglern darunter. Ihr erstes Galeriebild ist die Vollversion: sieben Tage mal 24 Stunden, von kühlem Blau in der Nacht bis Orange zur Mittagszeit.

Von den beiden Heatmaps ist sie die besser dokumentierte. Das Produktblatt nennt startColor und endColor für den Farbverlauf, minValue und maxValue für seinen Bereich, showValueLabels für die Zahlen in den Zellen, unitLabel für die Tooltips, backgroundColor sowie xAxisLabels und yAxisLabels, die ein JSON-Array oder einen kommagetrennten String annehmen. Ein Screenshot aus TIA Portal in der Galerie ergänzt chartTitle und das Array heatmapData, dessen Elemente value, x und y tragen. CellClicked, refreshChart und clearData machen das Set komplett.

Was uns gefällt

• +Werte in den Zellen mit showValueLabels: ohne Hover lesbar
• +Zweifarbiger Verlauf, den du auf deine Palette herunterdimmen kannst
• +Datenstruktur in einem Screenshot aus TIA Portal zu sehen

Gut zu wissen

• –Der Standardverlauf von Blau nach Gelbgrün ist laut: Wähl ruhigere Werte für startColor und endColor
• –In der Vorschau verdeckt der Tooltip den Wert der Zelle darüber

Dynamisierbare Eigenschaften

• heatmapData
• chartTitle
• xAxisLabels
• yAxisLabels
• minValue
• maxValue
• startColor
• endColor
• showValueLabels
• unitLabel
• backgroundColor

Heatmap

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

07Am besten für Wochenmuster 24 × 7

Heatmap Grid

Die klassische Frage jedes Energiemanagers: An welchem Tag und zu welcher Stunde verbrauchen wir am meisten? Dieses Raster legt sieben Tage mal 24 Stunden in einem Panel „Weekly Energy Consumption Heatmap“ aus, färbt jede Zelle auf einer Skala von Dunkelblau bis Rot und zeigt beim Hover einen Tooltip wie „Thursday 16:00, Value: 9“. Schichtmuster, Reinigungszyklen und die Grundlast am Wochenende springen einem aus so einem Bild förmlich entgegen.

Seine neun Eigenschaften sind alle im Produktblatt benannt: heatmapData für die Werte, xAxisLabels und yAxisLabels für die Achsen, minValue und maxValue für den Farbbereich, showVisualMap zum Ein- und Ausblenden der Skala, valuePrefix für den Tooltip sowie titleText und backgroundColor. CellClicked meldet die Zelle, und refreshData und clearSelection geben deinen Skripten die Kontrolle.

Was uns gefällt

• +Das natürliche Layout für Wochenmuster
• +Vollständig dokumentierte, kurze Schnittstelle
• +Farbskala, die sich mit showVisualMap ausblenden lässt

Gut zu wissen

• –In der Vorschau überlappen die Skalenbeschriftungen (0 und 10) die Stundenbeschriftungen
• –Eine Regenbogenskala mit zufälligen Demodaten wirkt unruhig, und das Produktblatt nennt keine Farb-Eigenschaft: Remixe es für eine ruhigere Palette

Dynamisierbare Eigenschaften

• heatmapData
• titleText
• xAxisLabels
• yAxisLabels
• minValue
• maxValue
• showVisualMap
• valuePrefix
• backgroundColor

Heatmap Grid

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

08Am besten für Ausbeute und Verluste Stufe für Stufe (Trichter)

Funnel

Von hundert Teilen, die am Anfang der Linie starten: Wie viele kommen beim Lkw an, und wo fallen die anderen heraus? Ein Trichterdiagramm beantwortet das mit einem einzigen Bild. Die Vorschau ist ein dunkles Panel „PROCESS THROUGHPUT FUNNEL“ mit sechs übereinanderliegenden Stufen, die sich von oben nach unten verjüngen: Raw Material 100%, Processing 92%, Quality Control 84%, Assembly 78%, Packaging 72% und Shipped 70%, jede in eigener Farbe und mit einer Legende am unteren Rand. Wo der größte Sprung ist, schaust du zuerst hin.

Das Produktblatt nennt alle sieben Eigenschaften. Die Daten stecken im Array stages, title setzt die Überschrift, showLegend und showLabels blenden die Legende und den Text in jeder Stufe ein oder aus, gap regelt den Abstand zwischen den Segmenten, minSize hält auch eine winzige letzte Stufe sichtbar, und backgroundColor passt es an dein Theme an. OnStageSelected wird ausgelöst, wenn der Bediener auf eine Stufe klickt, updateValueByName ändert eine einzelne Stufe, ohne die ganze Liste neu zu senden, und refreshChart zeichnet es nach einer Größenänderung neu.

Was uns gefällt

• +Verluste pro Stufe auf einen Blick
• +Kurze Schnittstelle, alle sieben Eigenschaften benannt
• +Eine einzelne Stufe per Skript über ihren Namen aktualisieren

Gut zu wissen

• –Die Beschriftungen in den Stufen sind in der Vorschau klein: Gib ihm genug Höhe
• –Das Produktblatt beschreibt die Felder der einzelnen stages-Elemente nicht: Prüf die mitgelieferte Dokumentation, bevor du dein Skript schreibst

Dynamisierbare Eigenschaften

• stages
• title
• showLegend
• showLabels
• gap
• minSize
• backgroundColor

Funnel

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

09Am besten für Zusammenhänge zwischen zwei Größen

Scatter Chart

Steigt der Motorstrom mit der Last? Häufen sich die Ausschussteile bei hoher Temperatur? Das sind Fragen für ein Streudiagramm, und das hier ist das einzige reine Streudiagramm, das wir gefunden haben – und ein sauberes dazu. Die Vorschau ist bewusst schlicht: rund fünfzig cyanfarbene Punkte auf dunklem Hintergrund, Achsen von 0 bis 100 und ein dezentes gestricheltes Raster.

Acht Eigenschaften, alle im Produktblatt benannt: das Array points für die Daten, chartTitle, xAxisLabel und yAxisLabel für den Kontext, pointColor und pointSize für die Marker, showGrid und backgroundColor. Mit PointClicked klickt der Bediener auf einen Punkt und öffnet die Charge oder den Zeitpunkt dahinter, und refreshChart zeichnet es nach einer Größenänderung neu.

Was uns gefällt

• +Alles im Produktblatt benannt, nichts versteckt
• +Minimalistische Optik, die zu High-Performance-HMI-Bildern passt
• +Klick-Ereignis pro Punkt für den Drill-down

Gut zu wissen

• –Nur eine Reihe und eine Farbe: Um zwei Gruppen zu vergleichen, schau dir das Bubble Chart bei den Erwähnungen an oder remixe es
• –Die Vorschau behält die generischen Beschriftungen „X-Axis Value“ und „Y-Axis Value“: Setz deine eigenen

Dynamisierbare Eigenschaften

• points
• chartTitle
• xAxisLabel
• yAxisLabel
• pointColor
• pointSize
• showGrid
• backgroundColor

Scatter Chart

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

↓Ansehen & gratis laden✦Mit KI bearbeiten

Lobende Erwähnungen: 6 weitere Diagramme, die einen Blick wert sind

Sie haben es nicht in die Top Neun geschafft, meist weil ihre Produktseiten die Eigenschaften nicht nennen oder weil sie sehr speziell sind, aber jedes hat einen guten Grund, zu existieren. Ein Klick auf ein Vorschaubild öffnet die Produktseite.

• 

  Pie Chart - Dashboard Widget

  Der Veteran der Runde (Juli 2025) und mit 68 Downloads im November 2026 das meistgeladene Control dieser Suche. Gebaut auf Apache ECharts, mit abgerundetem Donut und großer Beschriftung in der Mitte; die Galerie zeigt es auch in einem echten Bild unter WinCC Unified. Die Seite nennt seine Eigenschaften nicht, und im Tooltip steht noch „Access From“, ein Überbleibsel aus der ECharts-Demo.

  Zum Produkt →
• 

  Half Donut Chart - Dashboard Widget

  Sein Geschwisterchen: ein halber Donut mit gemusterten Segmenten, ebenfalls auf Apache ECharts und mit demselben Tooltip „Access From“. Passt gut für eine kompakte Anzeige von Lastanteilen, aber seine Eigenschaften stehen nicht auf der Seite.

  Zum Produkt →
• 

  Process Sankey Diagram

  Eine Massenbilanz aus der Raffinerie: Rohöl, Dampf und Gas durch Destillation, Reforming und katalytisches Cracken zu Diesel, Heizöl, Flüssiggas, Benzin und Wasserstoff. Eine wunderschöne Vorschau, aber seine neun Eigenschaften, zwei Ereignisse und zwei Methoden werden nicht genannt.

  Zum Produkt →
• 

  Sankey Diagram

  Elf Eigenschaften, zehn davon im Produktblatt benannt, etwa nodesData, linksData und enableDragging, dazu eine Methode exportAsImage. Es hat die Liste verpasst, weil seine Vorschau auf hellgrauem Hintergrund verwaschen wirkt und die Beschriftungen schwer zu lesen sind.

  Zum Produkt →
• 

  Bubble Chart

  Eine „Process Performance Matrix“: Druck auf der einen Achse, Temperatur auf der anderen, Blasengröße und -farbe für den Ausstoß. Das Produktblatt zählt zehn Eigenschaften, ein Ereignis und zwei Methoden, ohne sie zu nennen.

  Zum Produkt →
• 

  PQ Diagram_BESS

  Ein Spezialist: Es stellt den Arbeitspunkt eines Batteriespeichersystems in einem Wirk- und Blindleistungsdiagramm (P-Q) dar, innerhalb eines Kreises, den nominalApparentPower festlegt, hebt den aktiven Quadranten hervor und löst LimitExceeded aus, wenn die Nennleistung überschritten wird. Ganz neu im November 2026; die Beschriftungen der Vorschau sind auf Rumänisch („descărcare“, „încărcare“), laut Produktblatt lässt sich aber jede Legenden- und Achsenbeschriftung ändern.

  Zum Produkt →

So verwendest du ein Diagramm Custom Web Control in WinCC Unified (und WinCC V8)

Die Kurzfassung für alle, die ihr Diagramm schon gewählt haben. Unsere Anleitung zu Custom Web Controls erklärt jeden Schritt mit Schemazeichnungen und Screenshots.

1. 1

   Das ZIP herunterladen

   Öffne die Produktseite, melde dich mit deinem kostenlosen Konto an und lade das Diagramm herunter. Das heruntergeladene ZIP enthält die Dokumentation und darin das Control-Paket namens {GUID}.zip: Genau diese innere Datei brauchst du.

2. 2

   In dein Projekt in TIA Portal kopieren

   Kopiere die Datei {GUID}.zip, weiterhin gepackt, in deinen Projektordner unter UserFiles\CustomControls (leg beide Ordner an, falls sie noch nicht existieren). Nicht entpacken.

3. 3

   Meine Controls aktualisieren und ins Bild ziehen

   Öffne in TIA Portal die Task Card Werkzeuge, klappe die Palette Meine Controls auf und klicke auf Aktualisieren. Das Diagramm erscheint in der Liste: Zieh es ins Bild und gib ihm genug Platz für seine Beschriftungen.

4. 4

   Die Eigenschaften verbinden und testen

   Wähle das Control aus und öffne im Inspektorfenster Eigenschaften → Eigenschaften → Schnittstelle. Die meisten dieser Diagramme nehmen ihre Daten als Array oder JSON-String entgegen (slices, links, heatmapData, points …): Füll es zuerst mit zwei oder drei statischen Elementen, starte Runtime und prüf die Darstellung. Dann verbindest du die Werte mit internen Variablen und änderst sie über ein EA-Feld. Bei jeder Eigenschaft, die das Control zurückschreiben muss, deaktivierst du Nur lesend. Verhält es sich richtig, wechselst du auf deine echten Variablen.

5. 5

   Unter WinCC V8

   Jeder Favorit in diesem Artikel ist auf seiner Produktseite als kompatibel mit WinCC V8 gekennzeichnet. Das Paket ist dasselbe; für Import und Projektierung von Custom Web Controls in dieser Umgebung folgst du der Dokumentation von WinCC V8.

Profi-Tipp: Ein Kreisdiagramm funktioniert nur mit einer Handvoll Segmenten, die zusammen ein sinnvolles Ganzes ergeben, etwa die Stunden einer Schicht oder die Energie eines Zählers. Ab sechs oder sieben Segmenten fasst du die kleinen zu „Sonstiges“ zusammen oder wechselst zu einem Balkendiagramm. Und im Sankey-Diagramm prüfst du, dass in jeden Knoten genauso viel hineinfließt, wie herauskommt: Ein Band, das aus dem Nichts auftaucht, fällt dem Auge sofort auf.

Häufige Fragen

Unser Fazit

Wenn du nur eines herunterlädst, dann das Pie Chart: ein ruhiger Donut für Anlagenzustände, den du in Minuten verbunden hast. Für eine Aufschlüsselung auf zwei Ebenen das Nested Pie Chart; für Ist gegen Referenz das Radar Chart; für Energie- oder Materialflüsse das Sankey Diagram oder das Household Energy Sankey Diagram, wenn du die Werte an jedem Knoten willst; für Schichtlasten die Heatmap; für eine ganze Woche Stunde für Stunde das Heatmap Grid; für Verluste Stufe für Stufe das Funnel; und für „Hängt A von B ab?“ das Scatter Chart.

Und falls deine Daten ein Diagramm brauchen, das keines davon zeichnet (das tun sie immer), denk daran: Der Generator, der sie gebaut hat, ist nur einen Klick entfernt.