X4 Produktdokumentation

Tachodiagramm

Mit einem Tachodiagramm können Zustände mit unterschiedlichen Bewertungen dargestellt werden. Es ist gut geeignet, um Soll-/Ist-Werte zu vergleichen, z. B. bei Kennzahlen, Kundenzufriedenheits- oder Qualitätsmessungen.

Hinweise zur Verwendung

Ein Tachodiagramm wird mit dem Element <Gauge> innerhalb des Elements <Chart> erzeugt. Das Element kann nur im Layout einer Detail Component verwendet werden.

<Chart>
    <Gauge/>
</Chart>

Das Element <Gauge> kann folgendes Element enthalten:

  • ​<Tooltip>Kindelement von <Gauge>. Definiert, wie der Tooltip für die einzelnen Werte im Diagramm angezeigt werden soll. 

Attribute

Folgende Attribute können Sie für alle Elemente eines Tachodiagramms definieren:

Attribut

Beschreibung

fontFamily

Legt die Schriftfamilie fest. 

  • Mit diesem Attribut wird die Standardschrift der Web App für dieses Control überschrieben.

  • Wird das Attribut auf einem Element definiert, so wird die Schriftfamilie an die Kindelemente des Elementes vererbt, sofern die Kindelemente das Attribut fontFamily nicht explizit gesetzt haben.

Mögliche Werte:

  • MainFont: hinterlegte Hauptschrift

  • Fontcode aus der Font-Palette, z. B.  Font04

fontSize

Legt die Schriftgröße fest.

Mit diesem Attribut wird die Standardschriftgröße der Web App für dieses Control überschrieben.

Mögliche Werte:

Mögliche Werte:

  • Beliebige ganze Zahl oder Dezimalzahl mit einem Punkt als Dezimaltrennzeichen, z. B. 2020.8.9

  • Schriftgröße in Pixel, z. B. 20px

  • Schriftgröße in Punkt, z. B. 18pt

  • Schriftgröße im Vergleich zur Schriftgröße des Elternelements, z. B. .8em oder 120%

  • Schlüsselwörter, z. B. small oder larger

fontStyle

Legt die Neigung der Schrift fest.

Mit diesem Attribut wird die Standardneigung der Schriftzeichen für dieses Control überschrieben.

Mögliche Werte:

  • italic: kursive Schrift

  • normal: normale Schrift (Standard)

  • oblique: schräg gestellter Schriftstil (berechnet)


fontWeight

Legt die Schriftstärke fest. 

Mit diesem Attribut wird die Standardstärke der Schriftzeichen für dieses Control überschrieben.

Mögliche Werte:

  • Black

  • Bold

  • DemiBold

  • ExtraBlack

  • ExtraBold

  • ExtraLight

  • Heavy

  • Light

  • Medium

  • Normal (Standard)

  • Regular

  • SemiBold

  • Thin

  • UltraBlack

  • UltraBold

  • UltraLight

foreground

Definiert eine Farbe für den Vordergrund (Texte usw.) des Controls.

Hinweis:

  • Diese Einstellung überschreibt die Standardfarbe des Farbschemas.

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B. ff5a00

Hinweis:

  • Verwenden Sie keine Raute vor dem Farbwert.

  • Verwenden Sie keine verkürzte Schreibweise des Farbwerts.

  • Farbcode aus der Farbpalette der Web App, z. B. A200
    Weitere Informationen finden Sie unter Theming.

Element <Gauge>

Gibt an, wie das Diagramm angezeigt werden soll.

Zusätzlich zu den allgemeinen Attributen können Sie folgende Attribute für das Element <Gauge> definieren:

Attribut

Beschreibung

axisMax

​Gibt den Endbereich des Tachodiagramms in Prozent an. Die Farbe des Bereichs wird im Theming Editor über die Farbeigenschaft GaugeAxisMax definiert.

Mögliche Werte: 

Ganzzahl zwischen 0 und 100 (Standard: 100)

Beispiel

Die Standardwerte (axisMin="20", axisMiddle="80", axisMax="100") definieren ein Tachodiagramm, bei dem die Bereiche von 0 bis 20 %, 20 bis 80 % und 80 bis 100 % farblich unterschiedlich dargestellt werden.

axisMiddle 

​Gibt den mittleren Bereich des Tachodiagramms in Prozent an. Die Farbe des Bereichs wird im Theming Editor über die Farbeigenschaft GaugeAxisMiddle definiert.

Mögliche Werte: 

Ganzzahl zwischen 0 und 100 (Standard: 80)

axisMin 

​Gibt den Anfangsbereich des Tachodiagramms in Prozent an. Die Farbe des Bereichs wird im Theming Editor über die Farbeigenschaft GaugeAxisMin definiert.

Mögliche Werte: 

Ganzzahl zwischen 0 und 100 (Standard: 20)

endAngle 

​Gibt den Endpunkt des Tachodiagramms an.

Mögliche Werte:

Ganzzahl zwischen -360 und 360 (Standard: 0)

Hinweis:

endAngle muss immer kleiner sein als startAngle.

legend 

Gibt an, ob eine Legende angezeigt werden soll.

Mögliche Werte: 

  • true (Standard)

  • false 

max 

Gibt den Maximalwert des Tachodiagramms an.

Mögliche Werte: Ganzzahl (Standard: 100)

min 

Gibt den Minimalwert des Tachodiagramms an.

Mögliche Werte: 

Ganzzahl (Standard: 0)

Hinweis:

Die Verbindung von min zu max erfolgt immer im Uhrzeigersinn.

startAngle 

Gibt den Startpunkt des Tachodiagramms an.

Mögliche Werte:

Ganzzahl zwischen -360 und 360 (Standard: 180)

Hinweis:

Bei dieser Angabe entsprechen folgende Ganzzahlen folgenden Positionen auf einer Uhr:

  • 0: 3 Uhr

  • 90: 12 Uhr

  • 180: 9 Uhr

  • 270: 6 Uhr

units

Gibt die Einheit für den Wert an, den Sie über das Attribut value festlegen.

Mögliche Werte:

Beliebige Zeichenkette

value 

Erforderlich

Gibt an, welcher Wert des Datenobjekts visualisiert wird.

Mögliche Werte: 

Beliebige Zeichenkette oder Data Binding

Element <Tooltip>

Kindelement von <Gauge>. Definiert, wie der Tooltip für die einzelnen Werte im Diagramm angezeigt werden soll. 

Für das Element <Tooltip> können Sie die allgemeinen Attribute (siehe oben) definieren.

Beispiel

XML
<Properties>
    <Property name="Gauge1" type="Integer"/>
    <Property name="Gauge2" type="Integer"/>
</Properties>
<FlowLayout>
    <Chart title="Gauge Chart 1">
        <Gauge value="#Gauge1"/>
    </Chart>
    <Chart title="Gauge Chart 2">
        <Gauge value="#Gauge2" min="0" max="300" startAngle="225" endAngle="-45">
            <Tooltip foreground="A700"/>
        </Gauge>
    </Chart>
</FlowLayout>


Output

Die Daten, die vom Technical Process geliefert werden, haben folgendes Format:

XML
<Ok>
	<Gauge1>75</Gauge1>
	<Gauge2>120</Gauge2>
</Ok> 


image-20251124-092614.png

Funktionsweise und weitere Beispiele für Tachodiagramme

Bei Tachodiagrammen muss Folgendes beachtet werden:

  1. endAngle muss kleiner sein als startAngle.

  2. Die Verbindung vom Startwinkel zum Endwinkel erfolgt immer im Uhrzeigersinn.

  3. Die Verbindung von min zu max (Skala) erfolgt immer im Uhrzeigersinn.

Prinzip_GaugeChart.png


Im Folgenden sind weitere Beispiele für Tachodiagramme mit Erläuterung aufgezeigt, um die Funktionsweise des Start- und Endwinkels zu verdeutlichen.

Definition

Ergebnis

Erläuterung

<Gauge startAngle="0" endAngle="-180" min="0" max="100" ...> 

GaugeChart_1.png

Prinzip_GaugeChart_1.png

<Gauge startAngle="90" endAngle="-90" min="0" max="100" ...> 

GaugeChart_2.png
Prinzip_GaugeChart_2.png

<Gauge startAngle="180" endAngle="0" min="0" max="100" ...> 

GaugeChart_3.png
Prinzip_GaugeChart_3.png

<Gauge startAngle="-90" endAngle="-270" min="0" max="100" ...> 

GaugeChart_4.png
Prinzip_GaugeChart_4.png

<Gauge startAngle="240" endAngle="-60" min="0" max="100" ...> 

2019-08-22_09h13_00.png
PrinzipTachodiagramm.png