TrendChart

Steuerelement zur Darstellung des zeitlichen Verlaufs von Trendwerten als Liniendiagramm.

Symbol
Menüband	Start > Steuerelemente > System > Trends > TrendChart

Das Steuerelement TrendChart stellt Daten aus Trenddefinitionen des Systemmoduls Trends als Kurven in einem Diagramm dar. Die x-Achse stellt dabei immer eine Zeitachse dar, die y-Achse die Werte eines Trends. Das TrendChart kann mehrere Trends als Kurven darstellen. Für jeden Trend kann eine eigene y-Achse mit eigenen Grenzwerten angezeigt werden.

Für das Steuerelement TrendChart stehen zwei unterstützende Steuerelemente TrendChartController und TrendChartLegend zur Verfügung.

TrendChart mit zwei Trendkurven und dem Marker, darunter TrendChartController und TrendChartLegend

Funktionalitäten

Das Steuerelement unterstützt folgende Funktionalität:

• Darstellung der Trendkurven und der dazugehörigen y-Achsen

• Anzeige von Trends im Online-Modus (TrendOnline)

• Interaktivität über das Steuerelement TrendChartController

  Damit das TrendChart über einen TrendChartController gesteuert werden kann, benötigt der TrendChartController die ID des TrendCharts. Standardmäßig lautet die ID eines TrendCharts Required, die ID kann jedoch geändert werden. Um die ID zu ändern, tragen Sie die neue ID in die Eigenschaft TrendChartID des Steuerelements ein oder in das Feld Name oben im Eigenschaftenfenster.

• Darstellung der x-Achse, der dazugehörigen Rasterlinien, Skalenstriche und Skalenbeschriftungen

• Unterschiedliche Datums- und Zeitformate

• Darstellung des Rasters

• Darstellung eines animierten Ladesymbols

• Darstellung des Markers

  Layout

• Darstellung des Hintergrunds, des Rahmens, des Schattens etc.

• Verwendung von eigenen CSS-Klassen über die Eigenschaft ClassNames

• Verwendung eines Styles über die Eigenschaft Style

• Anbindung an die Benutzerverwaltung zur Sperrung der Bedienbarkeit

• Farbliche Darstellung des Hintergrunds, des Rahmens, des Ladesymbols etc.

Darstellung der Trendkurven (Series)

Wenn Sie ein TrendChart im Designer auf einer Page platzieren, enthält es bereits ein Unterelement Series. Dieses Steuerelement zeigt die Daten des angebundenen Trends an. Um einen Trend an das Series-Element anzubinden, markieren Sie das Element in der Dokumentgliederung und wählen Sie den gewünschten Trend in der Eigenschaft TrendName aus.

Um ein weiteres Series-Element zum TrendChart hinzuzufügen, markieren Sie das TrendChart im Designer oder in der Dokumentgliederung und rufen Sie über die Schaltfläche hinter der Eigenschaft Series den Collection Editor auf.

Die Series unterstützt folgende Funktionalität:

• Anbindung an eine Trenddefinition für die Datenquelle (TrendName, ArchiveName)

  Über die Eigenschaft DesignTimeData können Sie eine Beispielkurve im Designer anzeigen.

• Farbliche Darstellung (LineColor, LineFillColor, YAxisColor)

• Darstellung der Kurve (LineFill, LineWidth, ShowLine)

• Darstellung der y-Achse (DecimalPlaces, Position, RawLimitMax, RawLimitMin, ShowYAxis, YAxisLabelWidth, YAxisTickLength)

X-Achse (XAxis)

Über die Eigenschaft ShowXAxis können Sie entscheiden, ob die x-Achse mit den dazugehörigen Skalenbeschriftungen, Skalenstrichen, Haupt- und Hilfsrasterlinien angezeigt wird.

Desweiteren können Sie Folgendes für die x-Achse konfigurieren:

• ob die Hilfsrasterlinien und die kleinen Skalenstriche der x-Achse angezeigt werden (ShowXAxisMinorGridlinesTicks)

• Dicke der Haupt- und der Hilfsrasterlinien für die X-Achse (XAxisGridlineWidth)

• Höhe der Skalenbeschriftungen für die x-Achse (XAxisLabelHeight)

• ob die die x-Achse mit den dazugehörigen Skalenbeschriftungen im Steuerelement oben oder unten angezeigt wird (XAxisPosition)

• Länge der großen Skalenstriche (XAxisTickLength). Die kleinen Skalenstriche sind immer ungefähr halb so lang.

• Schriftgröße und Schriftstärke der Skalenbeschriftungen (XAxisFontSize, XAxisFontWeight)

• die Zeitspanne zwischen dem Minimum und dem Maximum auf der x-Achse (TimeSpan)

Raster (Grid)

Über die Eigenschaft ShowGrid können Sie entscheiden, ob das Raster zusätzlich zu den Kurven gezeichnet wird. Desweiteren können Sie Folgendes für das Raster konfigurieren:

• Abstand zwischen den Achsen und den Skalenbeschriftungen (AxisLabelMargin)

• Ob die Rasterlinien hinter oder vor den Kurven erscheinen (GridAboveData)

• Dicke des Rahmens für die Rasterfläche (GridBorderWidth)

• Abstand zwischen dem Rand des Steuerelements und dem Raster inklusive den Skalen und den Skalenbeschriftungen (GridMargin)

• Abstand zwischen zwei y-Achsen, wenn diese nebeneinander erscheinen (YAxisMargin)

Animiertes Ladesymbol (LoadingSpinner)

In bestimmten Fällen müssen die Daten im TrendChart aktualisiert werden. Dies ist z. B. dann notwendig, wenn der Nutzer zuerst die Online-Anzeige der Trenddaten stoppt, um sich den Verlauf der Trendkurve aus weiter zurückliegender Vergangenheit anzuschauen, und dann zum Online-Modus zurückkehren will. Dies kann durch einen Klick auf die Aktualisieren-Schaltfläche im TrendChartController erfolgen.

Dauert das Aktualisieren der Daten in Ihrem Projekt länger als gewünscht, können Sie für die Dauer der Aktualisierung ein animiertes Ladesymbol über die Eigenschaft ShowLoadingSpinnerOnRequest anzeigen lassen. Die Art des Symbols wird in der Eigenschaft LoadingSpinner festgelegt. Die Farben für das Ladesymbol selbst und den durchscheinenden Hintergrund des Ladesymbols können Sie über die Eigenschaften LoadingSpinnerForegroundColor und LoadingSpinnerBackgroundColor festlegen.

Marker

Der Marker kann wird im TrendChart nur dann verwendet werden, wenn er über die Eigenschaft Enabled in der Kategorie Marker aktiviert wurde. Zudem kann Folgendes für den Marker konfiguriert werden:

• Dicke der Markerlinie (MarkerLineWidth)

• Grafik für den Anfasser

• Breite und Höhe des Anfassers

• Rahmen

• Art des Cursors, der angezeigt wird, wenn der Mauszeiger über dem Anfasser schwebt (Cursor)