# Kreisdiagramm Widget type: `opendash-widget-hc-pie` · Plugin: `@opendash/plugin-highcharts`  ### Beschreibung Das **Kreisdiagramm Widget** visualisiert proportionale Anteile und Zusammensetzungen von Messwerten oder kumulierten Datenpunkten in einer klassischen, runden Grafik. IoT-Anwender profitieren von einer schnellen und intuitiven Übersicht, um beispielsweise den Gesamtenergieverbrauch oder Ressourcenverteilungen mehrerer Maschinen oder Hallen im direkten Verhältnis zueinander zu vergleichen. ### Voraussetzungen * Mindestens eine oder mehrere aktive Datenquellen, die numerische Werte oder kumulierte Verbrauchsdaten (z. B. kWh, Stückzahlen oder Durchflussmengen) übermitteln. * Die notwendigen Berechtigungen zur Bearbeitung des Dashboards und Konfiguration von Widgets. --- ## 1. Konfiguration und Einrichtung 1. Klicke auf die Schaltfläche **Einstellungen** auf dem noch unkonfigurierten Widget-Block, um das Konfigurationsfenster zu öffnen. 2. Stelle sicher, dass du dich im Reiter **Daten** befindest, und klicke in das obere Eingabefeld unter **Wähle Datenquellen aus, die du visualisieren möchtest.**. 3. Wähle nacheinander aus der Liste die gewünschten Datenpunkte aus, die du im Kreisdiagramm vergleichen möchtest. 4. Bestimme im Bereich **Wähle den Zeitraum, für den die Daten geladen werden sollen.** das gewünschte Zeitfenster. Belasse es standardmäßig bei `1` **Woche** im Modus **Relative Auswahl** oder passe die Werte nach deinen Wünschen an. 5. Wechsle ganz oben in den Reiter **Einstellungen**. 6. Wähle im Bereich **Visualisierungsart festlegen** deine bevorzugte Kreisform aus (z. B. **Donutdiagramm**). 7. Klicke unten rechts im Konfigurationsfenster auf **Speichern**, um die Konfiguration abzuschließen und das fertige Diagramm zu generieren. --- ## 2. Erweiterte Einstellungen & Formatierung Über die erweiterten Einstellungen kannst du die Darstellung, die Legendenplatzierung sowie die Datenaggregation deiner Kreisgrafik präzise feinjustieren: | Option | Beschreibung | Funktion | | :--- | :--- | :--- | | **Filter hinzufügen** | Kontrollkästchen unter den Datenquellen. | Ermöglicht die Filterung der einbezogenen Datenreihen nach spezifischen vordefinierten Kriterien. | | **Absolute Auswahl** | Tab im Bereich der Zeitraumeinstellungen. | Fixiert den Auswertungszeitraum auf ein statisches Start- und Enddatum anstelle eines rollierenden Fensters. | | **Daten aus der Zukunft laden** | Kontrollkästchen im Zeitraum-Menü. | Nimmt vorausschauende Planungsdaten oder Soll-Zustände in das Diagramm auf, falls diese im System vorhanden sind. | | **Randwerte ergänzen** | Kontrollkästchen im Zeitraum-Menü. | Ergänzt fehlende Werte an den äußeren Grenzen des gewählten Abfragezeitraums, um Berechnungsfehler zu vermeiden. | | **Start-/Endzeit an Zeiteinheit anpassen** | Kontrollkästchen im Zeitraum-Menü. | Rundet den Abfragezeitraum automatisch sauber auf die Grenzen der gewählten Zeiteinheit ab. | | **Wähle eine Daten Aggregation** | Dropdown-Menü unter den Zeitraum-Optionen (Standard: *none*). | Ermöglicht es, die Rohdaten vorab mathematisch zusammenzufassen (z. B. Summe, Durchschnitt, Minimal- oder Maximalwerte). | | **Sonstige Einstellungen (Automatisch Aktualisieren)** | Ausklappbares Menü im Daten-Reiter. | Aktiviert eine kontinuierliche, selbstständige Aktualisierung des Widgets auf dem Dashboard in festen Intervallen. | | **Kuchendiagramm** | Option unter **Visualisierungsart festlegen**. | Stellt das Diagramm als klassischen, voll ausgefüllten Kreis dar. | | **Donutdiagramm (halb)** | Option unter **Visualisierungsart festlegen**. | Halbiert die Kreisform zu einem eleganten, bogenförmigen Halbkreis-Donut. | | **Zeige Legende unter Diagramm** | Kontrollkästchen unter **Interaktionsmöglichkeiten**. | Blendet eine übersichtliche, listenbasierte Namenslegende direkt unterhalb der Grafik ein. | | **Zeige Label auf Graphen** | Kontrollkästchen unter **Interaktionsmöglichkeiten**. | Zeigt die Datenbeschriftungen und Werte direkt als Text auf bzw. an den Kreisbahnen an. | | **Inhalt von Beschriftung und Tooltip** | Dropdown-Menü im Einstellungsreiter. | Bestimmt, ob im Tooltip und auf den Labels der absolute *Wert*, der *Prozentsatz* oder *Beides* angezeigt wird. | | **Segmente nach Größe sortieren** | Kontrollkästchen im Einstellungsreiter. | Ordnet die Kreisstücke automatisch der Größe nach an, beginnend mit dem größten Anteil. | | **Nachkommastellen** | Numerisches Eingabefeld (Standard: `2`). | Legt fest, auf wie viele Dezimalstellen genau die angezeigten Werte gerundet werden. | | **Farboptionen** | Farbwähler im unteren Bereich des Einstellungsreiters. | Erlaubt es, jedem einzelnen Datenpunkt (z. B. jeder Maschine) eine individuelle Wunschfarbe für sein Kreissegment zuzuweisen. | --- ## 3. Das fertige Dashboard-Ergebnis Sobald du das Widget gespeichert hast, erscheint ein übersichtliches, farblich unterteiltes Kreis- bzw. Donutdiagramm auf deinem Dashboard. Jedes Segment steht proportional für den Anteil einer Datenquelle am Gesamtwert im ausgewählten Zeitraum. Direkt an den Segmenten sind übersichtliche Textlabels angebracht, die den Namen und den berechneten Wert anzeigen. Das Widget ist vollständig interaktiv: Fährst du mit der Maus über eines der farbigen Segmente (Hover-Effekt), hebt sich dieses optisch leicht ab und ein detailreicher Tooltip wird eingeblendet. Dieser Tooltip schlüsselt dir den Namen des Objekts, den **Wert** dieses Segments, den addierten **Total**-Wert aller Segmente sowie den exakten prozentualen **Anteil** (z. B. `41.58 %`) auf. > 💡 **Praxis-Tipp:** Möchtest du eine schnelle, visuelle Rangliste deiner Verbraucher ohne langes Zahlenlesen? Aktiviere in den Einstellungen das Kontrollkästchen **Segmente nach Größe sortieren**. Das Diagramm ordnet die Stücke sofort im Uhrzeigersinn vom größten zum kleinsten Verbraucher an, sodass du die Haupttreiber in deinem System sofort lokalisieren kannst.