Chart

Überblick

Ein Diagrammsystem ist eine Datenvisualisierungskomponente, die verwendet wird, um numerische oder kategorische Daten grafisch darzustellen. Sie hilft Nutzern, Trends, Vergleiche, Verteilungen und Beziehungen innerhalb von Datensätzen zu verstehen.

Diagramme werden häufig verwendet in:

  • Dashboards und Analysetools,
  • industrielle Überwachungssysteme,
  • Finanzberichterstattungsplattformen,
  • und Echtzeit-Datenanwendungen.

Das Hauptziel ist es, Rohdaten in sinnvolle visuelle Einblicke umzuwandeln, um schnellere Entscheidungen zu treffen.

Schlüsselmerkmale

Zentrale Visualisierungsfunktionen

  • Mehrere Kartentypen (Balken, Linie, Pie, Streuung, Flächen, Radar)
  • Echtzeit- und historische Datenunterstützung
  • Multiserien-Datenvisualisierung
  • Unterstützung für mehrere Achsen (insbesondere Y-Achsen-Skalierung)
  • Interaktive Tooltips und Hover-Details

Interaktionsfunktionen

  • Zoomen und Schwenken über Datenbereiche hinweg
  • Zeitbereichsauswahl (Intervallsteuerung)
  • Datenfilterung und -sortierung
  • Serien-Umschalten (Datensätze anzeigen/verbergen)
  • Crosshair-Tracking für präzises Lesen

Export & Berichterstattung

  • Aktuelle Ansicht exportieren (Bild/PDF)
  • Vollständiger Datensatz exportieren (CSV/Excel/JSON)
  • Snapshot-Erstellung für Berichte

UI-Abschnitte & Konfiguration

General

Feld Beschreibung
Name Interner Name des Kartelements
Refresh Interval (ms) Aktualisierungsintervalle in Millisekunden

Werkzeugleiste-Optionen

Option Funktion
Intervallpicker Ermöglicht es den Nutzern, den im Diagramm oder der Datenansicht angezeigten Zeitspanne auszuwählen, wie Live, Letzte Stunde oder einen benutzerdefinierten Bereich.
Aktuelle Ansicht exportieren Exportiert nur die aktuell sichtbaren Daten innerhalb des ausgewählten Zeitrahmens.
Vollständige Daten exportieren Exportiert den vollständigen Datensatz, unabhängig vom aktuell ausgewählten Zeitbereich.
Werkzeugleisten-Voreinstellung Bietet vordefinierte Zeitbereichsoptionen für schnelle Navigation, einschließlich Keine Voreinstellung, Benutzerdefinierter Bereich, Letzte 1 Minute, Letzte 1 Stunde, Letzte 3 Stunden, Letzte 6 Stunden, Letzte 12 Stunden, Letzter 1 Tag, Letzte 1 Woche und Letzte 1 Monat.

Titel

Feld Beschreibung
Showtitel Zeigt oder versteckt den Diagrammtitel sowohl in der Vorschau als auch in der gerenderten Grafik
Text Spezifiziert den als Diagrammtitel angezeigten Text.
Ausrichten Legt die horizontale Ausrichtung des Diagrammtitels fest.
Titeltext Stil Zeigt oder verbirgt die Titeltext-Stiloptionen. Typografie, Farbe und Überlaufverhalten für den Diagrammtitel konfigurieren (zum Beispiel: 18 px • 600 Semi Bold • Normal • #161616).

Legende

Feld Beschreibung
Show Legend Zeigt oder verbirgt die Legende für dieses Diagramm
Position Platziert die Legende um den Kartenbereich, z. B. oben, rechts, unten und links
Layout Ordnet legendäre Gegenstände horizontal und vertikal an
Ausrichtung Richtet die Legende innerhalb des verfügbaren Bereichs aus
Maximale Höhe Legt die maximale Höhe des Legendenbereichs fest, bevor das Scrollen, Umhüllen oder Abschneiden angewendet wird (abhängig von der Diagrammkonfiguration).
Legendentextstile Zeigt oder verbirgt die Textstile der Legende für dieses Diagramm, z. B. (12 px • 400 Regular • Normal • #525252) Typografie und Überlaufeinstellungen für Legendenbezeichnungen.

Layout

Feld Beschreibung
Polsterung oben Innenabstand zwischen dem Diagramminhalt und seinem Behälter auf der oberen Seite
Polstert unten Innenabstand zwischen dem Karteninhalt und seinem Behälter auf der unteren Seite
Weiter nach rechts gepolstert Innenabstand zwischen dem Diagramminhalt und seinem Container auf der rechten Seite
Nach links polstern Innenabstand zwischen dem Diagramminhalt und seinem Container auf der linken Seite
Rand oben Außenabstand um den Kartenbehälter auf der oberen Seite
Marge unten Außenabstand um den Kartenbehälter auf der unteren Seite
Rand rechts Außenabstand um den Kartenbehälter auf der rechten Seite
Rand links Außenabstand um den Kartenbehälter auf der linken Seite

Data Quelle

Datenquellen-Bearbeitung wird derzeit für kartesische Karten, Torten- und Donut-Diagramme, Radarkarten und Anzeigen unterstützt.

Feld Beschreibung
Quelltyp Entscheiden Sie, ob die Chartdaten lokal bearbeitet oder aus einer Trendquelle geladen werden.
Datenlogger Trendquele, die zur Ausfüllung dieser Chart-Vorschau verwendet wurde
Datensätze Datensätze aus der ausgewählten Trendquelle, die dieses Diagramm speist,
Datenreduktion Wie die ausgewählten Trenddaten vor der Vorschau oder Darstellung des Diagramms reduziert werden, z. B. Alle: Reduzieren, Durchschnitt, Median, Schnellreduktion, lokale Extreme
Maximale Punkte Begrenzt, wie viele Punkte bei der Datenreduktion von der Trendquelle angefordert werden

Advanced JSON

Hier ist die vollständige Definition der Chart-Einstellungen. Für den Einsatz im Expertenmodus.

    {
      "chart": {
        "layout": {
          "paddingTop": 4,
          "paddingRight": 4,
          "paddingBottom": 4,
          "paddingLeft": 4,
          "marginTop": 5,
          "marginRight": 5,
          "marginBottom": 5,
          "marginLeft": 5
        },
        "title": {
          "enabled": true,
          "text": "Pie Chart",
          "align": "center",
          "style": {
            "color": "#161616",
            "fillOpacity": 1,
            "opacity": 1,
            "fontFamily": "",
            "fontSize": 18,
            "fontWeight": "600",
            "fontStyle": "normal",
            "fontVariant": "normal",
            "textDecoration": "none",
            "maxWidth": null,
            "oversizedBehavior": "none",
            "breakWords": false
          }
        },
        "legend": {
          "enabled": true,
          "position": "bottom",
          "layout": "horizontal",
          "textStyle": {
            "color": "#525252",
            "fillOpacity": 1,
            "opacity": 1,
            "fontFamily": "",
            "fontSize": 12,
            "fontWeight": "400",
            "fontStyle": "normal",
            "fontVariant": "normal",
            "textDecoration": "none",
            "maxWidth": null,
            "oversizedBehavior": "none",
            "breakWords": false
          }
        },
        "interaction": {
          "enabled": false,
          "panX": false,
          "panY": false,
          "zoomX": false,
          "zoomY": false,
          "scrollbarX": false,
          "scrollbarY": false,
          "wheelX": "none",
          "wheelY": "none",
          "pinchZoomX": false,
          "pinchZoomY": false
        },
        "axes": {
          "x": [],
          "y": []
        },
        "series": []
      },
      "definition": {
        "kind": "placeholder",
        "title": "Simple Pie Chart",
        "message": "Add at least one row with numeric values for the pie chart."
      }
    }

Sie zeigt die Ergebnisse wie folgt

{ "chart": { "layout": { "paddingTop": 4, "paddingRight": 4, "paddingBottom": 4, "paddingLeft": 4, "marginTop": 5, "marginRight": 5, "marginBottom": 5, "marginLeft": 5 }, "title": { "enabled": true, "text": "Pie Chart", "align": "center", "style": { "color": "#161616", "fillOpacity": 1, "opacity": 1, "fontFamily": "", "fontSize": 18, "fontWeight": "600", "fontStyle": "normal", "fontVariant": "normal", "textDecoration": "none", "maxWidth": null, "oversizedBehavior": "none", "breakWords": false } }, "legend": { "enabled": true, "position": "bottom", "layout": "horizontal", "textStyle": { "color": "#525252", "fillOpacity": 1, "opacity": 1, "fontFamily": "", "fontSize": 12, "fontWeight": "400", "fontStyle": "normal", "fontVariant": "normal", "textDecoration": "none", "maxWidth": null, "oversizedBehavior": "none", "breakWords": false } }, "interaction": { "enabled": false, "panX": false, "panY": false, "zoomX": false, "zoomY": false, "scrollbarX": false, "scrollbarY": false, "wheelX": "none", "wheelY": "none", "pinchZoomX": false, "pinchZoomY": false }, "axes": { "x": [], "y": [] }, "series": [] }, "definition": { "kind": "placeholder", "title": "Simple Pie Chart", "message": "Add at least one row with numeric values for the pie chart." } }