Erweiterte Gestaltung
Fortgeschrittene Gestaltungsoptionen für Grafana-Panels.
Was du lernst
Field Overrides gezielt einsetzen, um einzelne Datenreihen zu gestalten
Farben konsistent über Dashboards hinweg anwenden
Einheiten und Dezimalpräzision konfigurieren
Dashboard-weite Einstellungen für ein professionelles Erscheinungsbild nutzen
Transparente Panels für aufgeräumte Shopfloor-Anzeigen erstellen
Voraussetzungen
Vorherige Tutorials in diesem Abschnitt abgeschlossen
Grundlegendes Verständnis der Panel-Konfiguration
Überblick
Professionelle Dashboards erfordern eine einheitliche Gestaltung, um lesbar und visuell ansprechend zu sein. Dieses Tutorial behandelt fortgeschrittene Gestaltungstechniken, die einfache Panels in ausgereifte, produktionsreife Visualisierungen verwandeln.
Zentrale Gestaltungsbereiche:
Field Overrides - Einzelne Datenreihen unterschiedlich gestalten
Farbschemata - Einheitliche Farben über alle Panels
Einheiten und Formatierung - Korrekte Darstellung von Werten
Dashboard-Theming - Stimmiges visuelles Gesamtbild
Field Overrides
Field Overrides ermöglichen es, unterschiedliche Einstellungen auf bestimmte Datenreihen innerhalb eines Panels anzuwenden. Das ist unverzichtbar, wenn eine Datenreihe anders aussehen soll als die anderen.
Einsatzbereiche für Overrides
Eine Datenreihe benötigt eine andere Farbe
Override nach Name
Sollwertlinien sollen gestrichelt sein
Override nach Name
Alle Temperaturvariablen brauchen die Einheit °C
Override per Regex
Bestimmte Datenreihen in der Legende ausblenden
Override nach Name
Override-Typen
1. Fields with Name
Abgleich eines bestimmten Feldes anhand des exakten Namens.
Suche im Panel-Editor den Abschnitt Overrides in der rechten Seitenleiste
Klicke auf + Add field override
Wähle Fields with name
Wähle das Feld aus dem Dropdown
[SCREENSHOT: Override selector showing "Fields with name" option]
Anwendungsfall: "Abzugsgeschwindigkeit (Soll)" als gestrichelte Linie gestalten.
2. Fields Matching Regex
Mehrere Felder mithilfe eines regulären Ausdrucks abgleichen.
Klicke auf + Add field override
Wähle Fields matching regex
Gib ein Muster ein:
.*Durchsatz.*- Trifft auf jedes Feld zu, das "Durchsatz" enthältExtruder [ABC].*- Trifft auf Felder von Extruder A, B oder C zu.*\(Soll\)$- Trifft auf Felder zu, die mit "(Soll)" enden
[SCREENSHOT: Regex override matching multiple fields]
Anwendungsfall: Allen Sollwerten (Felder, die auf "Soll" enden) dieselbe Farbe zuweisen.
3. Fields with Type
Felder anhand ihres Datentyps abgleichen.
Klicke auf + Add field override
Wähle Fields with type
Wähle: Number, String, Time, Boolean usw.
Anwendungsfall: Alle numerischen Felder mit 2 Dezimalstellen formatieren.
Override-Eigenschaften hinzufügen
Nach der Feldauswahl die gewünschten Eigenschaften hinzufügen:
Klicke auf + Add override property
Durchsuche oder suche die Eigenschaft
Konfiguriere den Wert
Häufige Override-Eigenschaften:
Color
Standard options > Color
Feste Farbe für die Datenreihe
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
Fill opacity
Graph styles > Fill opacity
Flächenfüllung
Y-axis
Axis > Placement
Linke oder rechte Achse
[SCREENSHOT: Override property selector showing common options]
Override-Beispiel: Ist- vs. Sollwert
Ist-Werte und Sollwerte unterschiedlich gestalten:
Ist-Wert Override:
Color
Blue (fixed)
Line width
2
Fill opacity
10
Sollwert Override:
Color
Orange (fixed)
Line style
Dash (10, 10)
Line width
1
[SCREENSHOT: Panel with styled actual vs setpoint lines]
Farben
Ein einheitliches Farbschema hilft Nutzenden, Dashboards schnell zu verstehen.
Farbmodi
Unter Standard options > Color scheme stehen folgende Optionen zur Verfügung:
Single color
Eine Farbe für alle Datenreihen
Einfache Panels
By value
Farbe basierend auf Schwellenwerten
Statusindikatoren
Classic palette
Automatisch zugewiesene unterschiedliche Farben
Mehrere Datenreihen
Fixed color
Spezifische Farbe pro Datenreihe
Kontrollierte Gestaltung
Feste Farben
Für präzise Kontrolle feste Farben verwenden:
Suche unter Standard options nach Color scheme
Wähle Single color oder verwende Overrides
Klicke auf den Farbwähler
Wähle aus:
Vordefinierte Farben (Green, Blue, Red usw.)
Benutzerdefinierter Hex-Code (#3274D9)
[SCREENSHOT: Color picker with preset and custom options]
Empfohlene Farbkonventionen
Folgende Konventionen für Fertigungs-Dashboards beachten:
Blau
Ist-/Messwerte
Orange
Soll-/Zielwerte
Grün
Guter Status, im Bereich
Gelb
Warnung, Grenzwert wird erreicht
Rot
Fehler, außerhalb des Bereichs
Lila
Berechnete/abgeleitete Werte
Grau
Referenz, Baseline
Farbschema-Optionen
Für automatische Farbgebung mehrerer Datenreihen:
Classic palette
Grafanas Standard-Farbpalette mit unterscheidbaren Farben
Green-Yellow-Red
Gradient für Leistungsmetriken
Blue-Purple
Kühle Töne für zusammengehörige Datenreihen
Temperature
Blau (kalt) bis Rot (heiß)
[SCREENSHOT: Different color schemes applied to same data]
Einheiten und Dezimalstellen
Korrekte Einheiten machen Werte sofort verständlich.
Einheiten konfigurieren
Suche in der rechten Seitenleiste nach Standard options
Klicke auf das Dropdown Unit
Durchsuche die Kategorien oder verwende die Suche:
[SCREENSHOT: Unit selector with categories]
Häufige Einheiten in der Fertigung
Durchsatz
Massenstrom (kg/h, t/h)
Temperatur
Celsius (°C), Fahrenheit (°F)
Druck
Bar, PSI, Pascal
Geschwindigkeit
Meter pro Minute (m/min), RPM
Länge
Millimeter (mm), Meter (m)
Zeit
Sekunden (s), Minuten (min), Stunden (h)
Prozent
Percent (0-100), Percent (0.0-1.0)
Benutzerdefinierte Einheiten
Wenn die gewünschte Einheit nicht in der Liste vorhanden ist:
Wähle Misc > Custom
Gib das Einheitensuffix ein (z. B. "pieces/h")
Oder verwende den Formatstring:
Wähle Misc > String
Gib ein Format ein wie
${__value} kg/U/min
Dezimalpräzision
Anzahl der Dezimalstellen steuern:
Suche unter Standard options nach Decimals
Gib die Anzahl der Dezimalstellen ein (0, 1, 2 usw.)
Freilassen für automatische Bestimmung
[SCREENSHOT: Decimals setting in standard options]
Richtlinien:
Zähler/Ganzzahlen
0
Temperaturen
1
Prozentsätze
1-2
Präzisionsmessungen
2-3
Min- und Max-Werte
Wertgrenzen für Gauges und Farbskalen festlegen:
Suche unter Standard options nach Min und Max
Gib den Wertebereich ein
Beispiel: Für ein Temperatur-Gauge 0-300 °C:
Min: 0
Max: 300
Dashboard-weite Einstellungen
Ein einheitliches Erscheinungsbild über alle Panels schaffen.
Panel-Optionen
Transparenter Hintergrund
Panel-Hintergründe transparent machen für ein aufgeräumteres Erscheinungsbild:
Suche im Panel-Bearbeitungsmodus in der rechten Seitenleiste nach Panel options
Aktiviere Transparent background
[SCREENSHOT: Panel with and without transparent background]
Geeignet für: Shopfloor-Anzeigen, Präsentationen, dunkle Themes.
Panel-Titel
Klare, beschreibende Titel
Einheitliche Benennungsmuster verwenden (z. B. "Maschine A - Temperatur")
Titel bei kleinen Panels kurz halten
Panel-Beschreibung
Kontextinformationen hinzufügen, die beim Hovern erscheinen:
Suche unter Panel options nach Description
Gib hilfreiche Informationen ein
[SCREENSHOT: Panel showing description tooltip]
Raster und Layout
Einheitliche Panel-Größen
Standardgrößen im gesamten Dashboard verwenden:
Single Stat
4x3 oder 6x4
Zeitreihe
12x8 oder 24x8
Gauge
4x4 oder 6x6
Tabelle
12x8 oder 24x12
Raster-Einrastung
Panels rasten in ein 24-Spalten-Raster ein. Einheitliche Breiten verwenden:
Volle Breite: 24
Halbe Breite: 12
Drittel-Breite: 8
Viertel-Breite: 6
Zeiteinstellungen
Dashboard-Zeitbereich
Passende Standardwerte festlegen:
Suche in den Dashboard-Einstellungen (Zahnradsymbol) nach Time options
Setze den Default time range (z. B. Last 6 hours)
Konfiguriere das Refresh interval (z. B. 30s für Live-Überwachung)
Panel-spezifische Zeitüberschreibung
Den Dashboard-Zeitbereich für einzelne Panels überschreiben:
Suche im Panel-Bearbeitungsmodus nach Query options
Setze Relative time (z. B. "1h" für die letzte Stunde, unabhängig vom Dashboard-Zeitbereich)
Schwellenwerte auf Diagrammen
Schwellenwertstufen direkt in Zeitreihendiagrammen anzeigen.
Schwellenwert-Anzeigemodi
Suche in der Panel-Editor-Seitenleiste nach Thresholds
Füge Schwellenwerte mit Werten und Farben hinzu
Suche nach Graph styles > Threshold display
Wähle einen Modus:
Off
Schwellenwerte betreffen nur die Legendenfarben
As lines
Horizontale Linien an den Schwellenwertstufen
As filled regions
Farbige Flächen zwischen den Schwellenwerten
Both
Linien und farbige Flächen
[SCREENSHOT: Time series with threshold lines visible]
Beispiel: Temperaturgrenzwerte
Base
Grün
Normal
80
Gelb
Warnung
100
Rot
Kritisch
Im Modus As lines erscheinen horizontale Linien bei 80 und 100.
Achsenkonfiguration
Darstellung der Achsen in Zeitreihen-Panels steuern.
Y-Achsen-Optionen
Suche in der Seitenleiste nach Axis
Konfiguriere:
Placement
Auto, Left, Right, Hidden
Label
Benutzerdefinierte Achsenbeschriftung
Width
Feste Breite in Pixeln
Soft min/max
Empfohlener Bereich (kann erweitert werden)
Hard min/max
Fester Bereich (Werte werden abgeschnitten)
Mehrere Y-Achsen
Datenreihen mit unterschiedlichen Einheiten auf separaten Achsen anzeigen:
Füge einen Override für die Datenreihe hinzu
Füge die Eigenschaft Axis > Placement hinzu
Wähle Right
[SCREENSHOT: Panel with dual Y-axes]
Beispiel: Temperatur (°C, linke Achse) und Durchsatz (kg/h, rechte Achse) gemeinsam darstellen.
Achsenfarb-Modi
Text
Verwendet die Theme-Textfarbe
Series
Achsenfarbe entspricht der Datenreihenfarbe
Tipp: Verwende den "Series"-Farbmodus bei mehreren Datenreihen auf verschiedenen Achsen. So wird klar, welche Achse zu welchen Daten gehört.
Praxisbeispiel: Shopfloor-Panel
Ein professionelles Panel für die Shopfloor-Anzeige erstellen:
Panel-Konfiguration
Visualization
Time Series
Title
Liniengeschwindigkeit - Extruder A
Transparent
Yes
Time range
Last 1 hour
Gestaltung
Line width
2
Fill opacity
15
Gradient
Opacity
Point size
Never show
Legend
Table mode mit Last, Min, Max
Overrides
Ist-Geschwindigkeit
Blau
Durchgezogen, Breite 2
Sollwert
Orange
Gestrichelt, Breite 1
Schwellenwerte
Base
Grün
90 % des Sollwerts
Gelb
80 % des Sollwerts
Rot
[SCREENSHOT: Complete shopfloor panel with all styling applied]
Tipps und Best Practices
Checkliste für Einheitlichkeit
Gleiche Farben für gleiche Metriktypen im gesamten Dashboard
Einheitliche Einheiten (nicht kg/h und t/h mischen)
Gleiche Dezimalpräzision für ähnliche Werte
Einheitliche Panel-Größen wo sinnvoll
Klare, beschreibende Titel
Performance-Tipps
Übermäßig viele Overrides vermeiden (beeinträchtigt das Rendering)
Regex-Overrides nutzen, um viele Felder auf einmal zu gestalten
Transparente Panels rendern etwas schneller
Barrierefreiheit
Ausreichenden Farbkontrast verwenden
Sich nicht allein auf Farben verlassen, sondern auch Textbeschriftungen hinzufügen
Mit farbenblindheitsfreundlichen Paletten testen
Zusammenfassung
Du hast fortgeschrittene Gestaltungstechniken gelernt:
Field Overrides für individuelle Anpassung einzelner Datenreihen
Einheitliche Farbverwendung über Dashboards hinweg
Korrekte Einheiten- und Dezimalformatierung
Dashboard-weite visuelle Einstellungen
Schwellenwertanzeige auf Diagrammen
Mehrachsen-Konfiguration
Nächste Schritte
Du hast den Abschnitt Visualisierungstypen abgeschlossen. Weiter geht es mit:
Dashboard-Organisation - Zeilen, Ordner und Verlinkung
Transformationen - Datenmanipulation
Kurzreferenz
Override-Abgleichtypen
Fields with name
"Durchsatz"
Nur exakte Übereinstimmung
Fields matching regex
.*Durchsatz.*
Enthält "Durchsatz"
Fields with type
Number
Alle numerischen Felder
Häufige Override-Eigenschaften
Color
Standard options > Color
Unit
Standard options > Unit
Decimals
Standard options > Decimals
Display name
Standard options > Display name
Min/Max
Standard options > Min/Max
Line style
Graph styles > Line style
Line width
Graph styles > Line width
Fill opacity
Graph styles > Fill opacity
Axis
Axis > Placement
Farbkonventionen
Blau
Ist-Werte
Orange
Sollwerte
Grün
Gut/OK
Gelb
Warnung
Rot
Kritisch
Einheitenkategorien
Durchsatz
kg/h, t/h, pieces/min
Temperatur
°C, °F, K
Druck
bar, psi, Pa
Länge
mm, m, cm
Zeit
s, ms, min, h
Zuletzt aktualisiert