Diagramm

Ca. 8 Min. Lesezeit

TwChart · Kategorie: Diagramme

Einstellungen

Diese Einstellungen finden Sie bei ausgewähltem Widget rechts im Eigenschaftenbereich. Der Standardwert ist der Wert, den das Widget beim ersten Einfügen in eine Seite hat.

Diagrammkonfiguration

Einstellung	Typ	Standardwert	Beschreibung
Achsen axesConfigJson	Achsenkonfiguration	[ { "id": "left-1", "name": "Primary", "type": "value", "position": "left", "autoScale": true, "min": null, "max": null, "unit": "", "axisLabelShow": true, "axisLabelFormat": "{value} {unit}", "alignTicks": true, "axisLine": { "show": true, "lineStyle": { "color": "" } }, "axisLabel": { "formatter": "{value} {unit}" } } ]	Hier definieren Sie die im Diagramm verwendeten Achsen. Für jede Achse können Position, Einheit, Farbe und Skalierung festgelegt werden.
Serien seriesConfigJson	Reihenkonfiguration	[ { "id": "series-1", "name": "Series 1", "tagName": "", "logInfoId": 0, "logIntervalMs": null, "axisId": "left-1", "type": "line", "color": "", "lineWidth": 2, "areaOpacity": 0, "smooth": false, "step": false, "showSymbol": false, "enabled": true, "markPointItems": [], "markLineItems": [ { "type": "average" } ], "markLineCustomValues": [] } ]	Hier definieren Sie die im Diagramm angezeigten Serien. Für jede Serie können Tag, Log-Variable, Achse und Darstellung festgelegt werden.

Zeit und Daten

Einstellung	Typ	Standardwert	Beschreibung
Maximale Punktzahl maxPoints	Zahl	50	Maximale Anzahl Punkte je Serie (mindestens 2, Standard 50). Sie bestimmt die automatische Abtastzeit und begrenzt die im Live-Modus gehaltenen Punkte.
Zeitquelle timeSource	Auswahl	local	Lokal verwendet die eigenen Bereichseinstellungen dieses Diagramms (Standard). Seitenzeit folgt der Seitenzeitauswahl der Seite: Ihr Bereich ersetzt Bereichsmodus, Historienbereich-Minuten und die Kalendereinstellungen, die Bereichsschaltflächen der Werkzeugleiste werden ausgeblendet und der Live-Modus läuft nur, solange der Bereich den aktuellen Zeitpunkt enthält. Ohne Auswahl verwendet das Diagramm seinen eigenen Bereich. Optionen: local Lokal, page Seitenzeit
Vergleich comparisonMode	Auswahl	none	Lädt neben dem Hauptbereich einen Vergleichszeitraum und zeichnet dieselben Serien gestrichelt und heller auf der Hauptzeitachse. Vorperiode: der gleich lange Bereich direkt davor (bei einem Kalenderbereich der vorherige Kalenderzeitraum). Vorjahr: derselbe Kalenderbereich ein Jahr früher (Kalenderjahr, nicht 365 Tage). Der Tooltip zeigt das tatsächliche Datum, beide Werte und die Änderung; fehlende Daten zählen nie als Null. Der Vergleich wird bei aktivem Stapelmodus nicht gezeichnet (Stapelung muss 'Pro Serie' sein); der Live-Modus fügt den Vergleichsserien keine Punkte hinzu. Optionen: none Kein, previousPeriod Vorperiode, previousYear Vorjahr
Bereichsmodus rangeMode	Auswahl	relative	Relativ lädt die letzten Historienbereich-Minuten bis jetzt (gleitendes Fenster, Standard). Kalender lädt einen Kalenderzeitraum (Kalenderzeitraum, Kalenderversatz) in der Zeitzone des Browsers, z. B. dieses Jahr ab 1. Januar; der aktuelle Zeitraum endet jetzt und wechselt beim Aktualisieren und im Live-Modus selbst in den neuen Monat bzw. das neue Jahr. Das Kalendermenü der Werkzeugleiste ändert den Bereich zur Laufzeit, ohne ihn zu speichern. Optionen: relative Relativ, calendar Kalender
Navigationsschritt Minuten historyStepMinutes	Zahl	60	Wie weit die Zurück-/Vor-Schaltflächen der Werkzeugleiste den Zeitbereich verschieben, in Minuten (Standard 60). Im Kalender-Bereichsmodus verschieben sie um einen Kalenderzeitraum.
Abtastintervall (Sek., 0=Auto) sampleBySeconds	Zahl	0	Länge eines Abtastintervalls in Sekunden. 0 berechnet sie aus dem Zeitbereich und der maximalen Punktzahl (oder dem Zeitintervall).
Historienbereich Minuten timeRangeMinutes	Zahl	60	Länge des gleitenden Zeitbereichs im relativen Bereichsmodus in Minuten (Standard 60). Im Kalender-Bereichsmodus nicht verwendet.
Vergleichsausrichtung comparisonAlignment	Auswahl	elapsed	Gleiche verstrichene Zeit (Standard): ein laufender Zeitraum wird nur mit dem gleichen verstrichenen Teil des vorherigen Zeitraums verglichen (z. B. heute 00:00-jetzt mit gestern 00:00-gleiche Uhrzeit). Ganzer Zeitraum: der gesamte vorherige Zeitraum wird geladen. Bei abgeschlossenen Zeiträumen und gleitenden Bereichen sind beide Optionen gleich. Optionen: elapsed Gleiche verstrichene Zeit, calendar Ganzer Zeitraum
Kalenderzeitraum calendarPeriod	Auswahl	year	Zeitraum im Kalender-Bereichsmodus: Tag, Woche (ab Montag), Monat, Quartal oder Jahr (Standard Jahr). Optionen: day Tag, week Woche, month Monat, quarter Quartal, year Jahr
Live-Aktualisierungsintervall ms liveRefreshIntervalMs	Zahl	0	Aktualisierungsintervall im Live-Modus in Millisekunden. 0 nutzt das kürzeste Log-Intervall der Serien, sonst 1000 ms; Minimum 500 ms. Im Modus Verbrauch Differenzsumme wird der Bereich höchstens einmal pro Minute neu abgefragt.
Kalenderversatz calendarOffset	Zahl	0	Welcher Zeitraum im Kalender-Bereichsmodus: 0 ist der aktuelle, -1 der vorherige (z. B. letzter Monat oder letztes Jahr), -2 der davor; positive Werte zählen als 0.

Serienstandards

Einstellung	Typ	Standardwert	Beschreibung
Standard-Serientyp defaultSeriesType	Auswahl	line	Serientyp für Serien ohne eigenen Typ. Optionen: line Linie, area Fläche, bar Balken, step Stufe
Zeitintervall consumptionBucketUnit	Auswahl	auto	Länge des Zeitintervalls im Modus Verbrauch Differenzsumme. Automatisch wählt je nach Länge des Zeitbereichs Tag, Woche, Monat oder Jahr. Wochen beginnen am Montag; Wochen und Quartale folgen dem Kalender. Optionen: hour Stündlich, day Täglich, week Wöchentlich, month Monatlich, quarter Vierteljährlich, year Jährlich, auto Automatisch
Datenquelle dataSourceMode	Auswahl	historySample	Historie (abgetastet) zeigt abgetastete Verlaufswerte; Verbrauch Differenzsumme zeigt den Verbrauch (die Differenz) von Zähler-Tags je Zeitintervall. Optionen: historySample Historie (abgetastet), consumptionDiffSum Verbrauch Differenzsumme
Stapelung stackMode	Auswahl	none	Legt fest, ob Serien übereinander gestapelt werden. 'Pro Serie': nur Serien mit Stapelgruppe werden gestapelt (Standard; bestehende Diagramme bleiben unverändert). 'Gestapelt': alle Serien werden je Zeitabschnitt summiert, z. B. für den monatlichen Verbrauch je Transformator. '100 % gestapelt': jeder Zeitabschnitt wird auf 100 % normiert; der Tooltip zeigt den echten Wert und den Anteil; eigene Grenzlinien werden ausgeblendet, Min/Max/Mittelwert-Markierungen zeigen Anteile in %. Funktioniert für Balken- und Linien-/Flächenserien; Serien auf verschiedenen Achsen werden getrennt gestapelt. Bei 'Gestapelt' und '100 % gestapelt' wird kein Vergleich gezeichnet. Optionen: none Pro Serie, stacked Gestapelt, percent 100 % gestapelt
Abtastwerttyp sampleValueType	Auswahl	2	Wie die Werte in jedem Abtastintervall zusammengefasst werden: Minimum, Maximum, Mittelwert, Summe oder Anzahl. Optionen: 0 Minimum, 1 Maximum, 2 Durchschnitt, 3 Summe, 4 Anzahl

Symbolleiste

Einstellung	Typ	Standardwert	Beschreibung
Werkzeugleiste anzeigen showToolbar	Kontrollkästchen	Ein	Zeigt die Werkzeugleiste mit Bereichsvorgaben, Navigation, Live/Pause und Zoom-Schaltflächen.
Zoom aktiviert zoomEnabled	Kontrollkästchen	Ein	Erlaubt das Zoomen im Diagramm. Ausgeschaltet sind auch der innere Zoom und das untere Filterpanel aus.
Zoom-Reset-Knopf anzeigen showZoomResetButton	Kontrollkästchen	Ein	Zeigt eine Schaltfläche, die den Zoom zurücksetzt; nur bei aktiviertem Zoom.
Bereichs-Presets rangePresetsJson	Mehrzeiliger Text	[ { "label": "1h", "minutes": 60, "enabled": true }, { "label": "6h", "minutes": 360, "enabled": true }, { "label": "24h", "minutes": 1440, "enabled": true } ]	Schnellbereichs-Schaltflächen der Werkzeugleiste als JSON-Liste; jeder Eintrag hat label, minutes und enabled. Leer ergibt 1h, 6h und 24h.
Im Live-Modus starten autoStart	Kontrollkästchen	Ein	Startet beim Öffnen der Seite im Live-Modus: Der Zeitbereich folgt der aktuellen Zeit und die Daten werden automatisch aktualisiert; Zurück/Vor sind bis zum Pausieren ausgeblendet. Historie (abgetastet) hängt neue Tag-Werte an; Verbrauch Differenzsumme fragt den Bereich höchstens einmal pro Minute neu ab. Ausgeschaltet lädt das Diagramm den Bereich einmal und wartet, bis der Live-Modus gestartet wird; empfohlen für langsam veränderliche Verbrauchsdiagramme wie Monatssummen.
Zoom-Umschaltknopf anzeigen showZoomToggleButton	Kontrollkästchen	Ein	Zeigt eine Schaltfläche, die das Zoomen zur Laufzeit ein- und ausschaltet.
Einstellungs-Knopf anzeigen showSettingsButton	Kontrollkästchen	Ein	Zeigt die Einstellungsschaltfläche in der Werkzeugleiste; Benutzer können Diagrammeinstellungen zur Laufzeit ändern, die Änderungen werden nicht in der Seite gespeichert.

Darstellung

Einstellung	Typ	Standardwert	Beschreibung
Gitter anzeigen showGrid	Kontrollkästchen	Ein	Alte Rastereinstellung; wird nur verwendet, wenn Horizontales und Vertikales Raster nicht gesetzt sind.
Vertikales Raster showGridVertical	Kontrollkästchen	Ein	Zeigt die vertikalen Rasterlinien der Zeitachse.
X-Achse anzeigen showXAxes	Kontrollkästchen	Ein	Zeigt die Zeitachse.
Innen-Zoom showNavigator	Kontrollkästchen	Ein	Aktiviert Zoom- und Pan-Gesten mit Maus/Touch direkt im Diagrammbereich.
Seitenabstand (px, 0=Auto) gridSidePadding	Zahl	0	Abstand links und rechts der Zeichenfläche in Pixeln; 0 berechnet ihn aus der Anzahl der Werteachsen.
Render-Typ renderType	Auswahl	canvas	Canvas ist bei vielen Punkten schneller; SVG bleibt beim Vergrößern und Drucken scharf. Optionen: canvas, svg
Horizontales Raster showGridHorizontal	Kontrollkästchen	Ein	Zeigt die horizontalen Rasterlinien der Werteachse.
Legende anzeigen showLegend	Kontrollkästchen	Ein	Zeigt die Legende mit den Seriennamen.
Y-Achse anzeigen showYAxes	Kontrollkästchen	Ein	Zeigt die Werteachsen mit ihren Namen und Beschriftungen.
Unteren Filterbereich anzeigen showFilterPanel	Kontrollkästchen	Ein	Zeigt unter dem Diagramm einen Schieberegler zur Auswahl des sichtbaren Bereichs; schaltet auch das Zoomen ein.
Balkenwerte anzeigen showBarValueLabels	Kontrollkästchen	Aus	Schreibt bei Balkenserien den Wert über jeden Balken.

Tooltip

Einstellung	Typ	Standardwert	Beschreibung
Tooltip-Auslöser tooltipTrigger	Auswahl	axis	Wann der Tooltip erscheint: Achse zeigt alle Serien zur Zeigerzeit, Element nur den Punkt unter dem Zeiger, Keine schaltet ihn aus. Optionen: axis Achse, item Element, none Keine
Tooltip-Achsenzeiger tooltipAxisPointerType	Auswahl	cross	Hilfslinie am Zeiger beim Auslöser Achse: Fadenkreuz, Linie, Schatten oder Keine. Optionen: cross Fadenkreuz, line Linie, shadow Schatten, none Keine

Weitere Einstellungen

Einstellung	Typ	Standardwert	Beschreibung
Enable Flashing enableFlashing	Kontrollkästchen	Aus	Lässt das Widget blinken (ein Transparenzimpuls pro Sekunde). Wird meist an eine Alarmbedingung gebunden.
Log Button logButton	Kontrollkästchen	Aus	Zeigt zur Laufzeit beim Überfahren des Widgets ein Diagrammsymbol; ein Klick fügt die an das Widget gebundenen Tags der Log-Tag-Liste hinzu.

Bindungen

Im Abschnitt Bindungen (Regeln) des Eigenschaftenbereichs kann ein Tag mit einer Direct-Bindung an die folgenden Eigenschaften dieses Widgets gebunden werden. Die Bindungstypen (Direct, IntRange, FloatRange, Boolean, Bit) sind für alle Widgets gleich; sie werden auf der Seite Widget-Referenz beschrieben.

title, visible, authorization, x, y, width, height, rotation, class, foregroundColor, backgroundColor, borderColor, borderStyle, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, enableFlashing, logButton, seriesValues.series1, seriesValues.series2, seriesValues.series3, seriesValues.series4, seriesValues.series5, seriesValues.series6, seriesValues.series7, seriesValues.series8, seriesValues.series9, seriesValues.series10, axesConfigJson, seriesConfigJson, maxPoints, timeRangeMinutes, timeSource, comparisonMode, comparisonAlignment, rangeMode, calendarPeriod, calendarOffset, historyStepMinutes, liveRefreshIntervalMs, defaultSeriesType, dataSourceMode, sampleValueType, sampleBySeconds, consumptionBucketUnit, rangePresetsJson, showToolbar, showGrid, showGridHorizontal, showGridVertical, gridSidePadding, showLegend, showBarValueLabels, stackMode, showXAxes, showYAxes, showNavigator, showFilterPanel, autoStart, zoomEnabled, showZoomToggleButton, showZoomResetButton, showSettingsButton, tooltipTrigger, tooltipAxisPointerType, renderType

Gemeinsame Abschnitte

Bei ausgewähltem Widget zeigt der Eigenschaftenbereich außerdem diese gemeinsamen Abschnitte: Allgemein, Layout, Aussehen, Bindungen (Regeln). Diese Abschnitte werden auf der Seite Seiteneditor beschrieben.