04 Erweiterte Gestaltung
Fortgeschrittene Gestaltungsoptionen für Grafana-Panels.
Professionelle Dashboards erfordern eine einheitliche Gestaltung: passende Farben, korrekte Einheiten, Schwellenwerte und klare visuelle Hierarchien. In diesem Tutorial lernst du die wichtigsten Techniken, um deine Panels produktionsreif zu gestalten:
Was du lernst
Field Overrides für individuelle Gestaltung einzelner Datenreihen
Einheiten und Dezimalpräzision konfigurieren
Schwellenwerte direkt im Diagramm anzeigen
Mehrere Y-Achsen für unterschiedliche Einheiten nutzen
Transparente Panels für Shopfloor-Anzeigen
Voraussetzungen
Vorherige Tutorials in diesem Abschnitt abgeschlossen
Grundlegendes Verständnis der Panel-Konfiguration
Field Overrides
Field Overrides ermöglichen es, unterschiedliche Einstellungen auf bestimmte Datenreihen innerhalb eines Panels anzuwenden.
Override-Typen
Fields with name
Exakter Feldname
"Abzugsgeschwindigkeit (Soll)"
Fields matching regex
Regulärer Ausdruck
.*\(Soll\)$ für alle Sollwerte
Fields with type
Datentyp
Alle numerischen Felder
Override erstellen
Suche im Panel-Editor den Abschnitt Overrides in der rechten Seitenleiste
Klicke auf + Add field override und wähle den Abgleichtyp
Klicke auf + Add override property und konfiguriere die gewünschte Eigenschaft
Häufige Override-Eigenschaften
Color
Standard options > Color
Feste Farbe
Unit
Standard options > Unit
Anzeigeeinheit
Decimals
Standard options > Decimals
Dezimalpräzision
Display name
Standard options > Display name
Benutzerdefinierte Bezeichnung
Line style
Graph styles > Line style
Solid, Dash, Dots
Line width
Graph styles > Line width
Linienstärke
Y-axis
Axis > Placement
Linke oder rechte Achse
Beispiel: Ist- vs. Sollwert
Ist-Wert
Blau (fest)
Solid
2
Sollwert
Orange (fest)
Dash (10, 10)
1
Einheiten und Dezimalstellen
Korrekte Einheiten machen Werte sofort verständlich.
Suche in der rechten Seitenleiste nach Standard options > Unit
Durchsuche die Kategorien oder verwende die Suche
Häufige Einheiten in der Fertigung
Durchsatz
kg/h, t/h
Temperatur
°C, °F
Druck
bar, PSI
Geschwindigkeit
m/min, RPM
Prozent
Percent (0-100)
Unter Decimals steuerst du die Dezimalpräzision. Faustregel: 0 für Zähler, 1 für Temperaturen und Prozent, 2 für Präzisionsmessungen.
Wenn die gewünschte Einheit nicht in der Liste vorhanden ist: Misc > Custom und das Suffix eingeben (z. B. "pieces/h").
Farben
Farbschemata
Unter Standard options > Color scheme stehen verschiedene Optionen:
Single color
Einfache Panels mit einer Datenreihe
Classic palette
Mehrere Datenreihen automatisch unterscheiden
Green-Yellow-Red
Leistungsmetriken mit Gradient
By value
Statusindikatoren basierend auf Schwellenwerten
Farbkonventionen für die Fertigung
Blau
Ist-/Messwerte
Orange
Soll-/Zielwerte
Grün
Guter Status
Gelb
Warnung
Rot
Kritisch/Fehler
Schwellenwerte auf Diagrammen
Schwellenwerte können als horizontale Linien oder farbige Flächen direkt im Zeitreihendiagramm angezeigt werden.
Suche in der Seitenleiste nach Thresholds und füge Schwellenwerte hinzu
Suche nach Graph styles > Threshold display und wähle einen Modus:
Off
Nur Legendenfarben beeinflusst
As lines
Horizontale Linien an den Schwellenwertstufen
As filled regions
Farbige Flächen zwischen den Schwellenwerten
Both
Linien und farbige Flächen
Beispiel: Soll-Ist-Abweichung
Ein praktisches Beispiel: Bilde die Differenz aus Soll- und Ist-Wert (z. B. über eine Transformation) und zeige sie als eigene Zeitreihe. Lege dann symmetrische Schwellenwerte als As filled regions an:
Base
Rot
Starke Abweichung (negativ)
-20
Gelb
Leichte Abweichung (negativ)
-5
Grün
Normalbetrieb
5
Gelb
Leichte Abweichung (positiv)
20
Rot
Starke Abweichung (positiv)
Da bei einer Abweichungsdarstellung die genaue Größe großer Ausreißer weniger relevant ist als das Toleranzband selbst, empfiehlt es sich, die Y-Achse zu begrenzen. Setze unter Standard options die Werte Min und Max (z. B. -30 und 30). Aktiviere unter Axis den Toggle Centered zero, um die Nulllinie immer mittig darzustellen.
Mehrere Y-Achsen
Die ENLYZE-Datenquelle legt Variablen mit unterschiedlichen Einheiten automatisch auf separate Y-Achsen. Wählst du z. B. Temperatur (°C), Durchsatz (kg/h) und Druck (bar) in einer Abfrage, erhältst du drei Achsen.
Wenn du mehr Kontrolle über die Positionierung möchtest, nutze Overrides:
Füge einen Override für die Datenreihe hinzu
Füge die Eigenschaft Axis > Placement hinzu
Wähle Right
Verwende unter Axis > Color mode den Modus Series, damit die Achsenfarbe zur Datenreihenfarbe passt. So wird klar, welche Achse zu welchen Daten gehört.
Dashboard-Einstellungen
Transparenter Hintergrund
Unter Panel options > Transparent background machst du den Panel-Hintergrund transparent. Geeignet für Shopfloor-Anzeigen und Präsentationen.
Zeitbereich
Dashboard-Zeitbereich: In den Dashboard-Einstellungen (Zahnradsymbol) unter Time options den Standard-Zeitbereich und das Refresh-Intervall festlegen
Panel-spezifisch: Unter Query options > Relative time den Dashboard-Zeitbereich für einzelne Panels überschreiben (z. B. "1h")
Das fertige Shopfloor-Panel
Die einzelnen Techniken ergeben zusammen ein produktionsreifes Panel:
Line width
2
Fill opacity
15
Gradient
Opacity
Legend
Table mit Last, Min, Max
Transparent
Yes
Overrides
Ist-Geschwindigkeit
Blau
Durchgezogen, Breite 2
Sollwert
Orange
Gestrichelt, Breite 1
Schwellenwerte
Base
Grün
Normal
90 % des Sollwerts
Gelb
Warnung
80 % des Sollwerts
Rot
Kritisch
Tipps
Einheitlichkeit: Gleiche Farben für gleiche Metriktypen im gesamten Dashboard. Nicht kg/h und t/h mischen.
Regex-Overrides: Nutze
.*\(Soll\)$, um allen Sollwerten gleichzeitig dieselbe Farbe zuzuweisen.Barrierefreiheit: Nicht allein auf Farben verlassen. Textbeschriftungen und Linien helfen auch bei eingeschränktem Farbsehen.
Performance: Übermäßig viele Overrides vermeiden. Regex-Overrides sind effizienter als viele einzelne By-Name-Overrides.
Nächste Schritte
Dashboard-Organisation - Zeilen, Ordner und Verlinkung
Transformationen - Datenmanipulation
Zuletzt aktualisiert