Skip to main content
Skip table of contents

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.


Ein Tachodiagramm kann folgende Elemente enthalten:

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

Allgemeine Attribute

Folgende Attribute sind für alle Elemente eines Tachodiagramms verfügbar:

AttributBeschreibung
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.
  • Dieses Attribut funktioniert nicht für die Elemente ImageMap und HtmlDocument.

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.
  • Dieses Attribut funktioniert nicht für die Elemente ImageMap und HtmlDocument.

Mögliche Werte:

  • Beliebige ganze Zahl oder Dezimalzahl mit einem Punkt als Dezimaltrennzeichen, z. B. 20 ; 20.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: xx-Small , x-small , small , medium , large , x-large , xx-large , smaller , larger
fontStretch

Legt die Breite der einzelnen Schriftzeichen fest.

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

Mögliche Werte:

  • Condensed
  • Expanded
  • ExtraCondensed
  • ExtraExpanded
  • Medium
  • Normal (Standard)
  • SemiCondensed
  • SemiExpanded
  • UltraCondensed
  • UltraExpanded


Dieses Attribut funktioniert nicht für die Elemente ImageMap, Chart und HtmlDocument.

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)


  • Dieses Attribut funktioniert nicht für die Elemente ImageMap und HtmlDocument.
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


Dieses Attribut funktioniert nicht für die Elemente ImageMap und HtmlDocument.

foreground

Definiert die Schriftfarbe.

Diese Einstellung überschreibt die Standardfarbe des Farbschemas!


Mögliche Werte:
  • Hexadezimaler Farbwert, z. B. ff5a00

    Verwenden Sie keine Raute vor dem Farbwert!
    Verwenden Sie keine verkürzte Schreibweise des Farbwerts!
  • Farbcode aus der Farbpalette der Web App (vgl. (7.3.3-de) Theming), z. B. A200

Gauge

​<Gauge>: Gibt an, wie das Diagramm angezeigt werden soll.

Zusätzlich zu den allgemeinen Attributen kann <Gauge> folgende Attribute haben:

AttributBeschreibung
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: -45)

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)

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: 255)

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

  • 0: 3 Uhr
  • 90: 12 Uhr
  • 180: 9 Uhr
  • 270: 6 Uhr
value 

Gibt an, welcher Wert des Datenobjekts visualisiert wird.

Mögliche Werte: Beliebige Zeichenkette oder Data Binding

Tooltip

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

Für <Tooltip> lassen sich die allgemeinen Attribute (s.o.) definieren.

Beispiele

Beispiel 1:

XML
<Properties>
	<Property name="DataSource" type="Complex">
		<Property name="Satisfaction" type="Integer"/>
	</Property>
</Properties>
<FlowLayout>
	<Chart fontFamily="Font03" title="Employee Satisfaction">
		<Gauge  max="0" min="100" value="#DataSource.Satisfaction">
			<Tooltip fontFamily="Font02" fontSize="12"/>
		</Gauge>
	</Chart>
</FlowLayout>


Das obige Beispiel führt zu folgendem Diagramm:

Beispiel 2:

XML
<Property name="Datasource" type="Complex">
    <Property name="gauge" type="Integer"/>
 
...
...
...
</Property>
 
<Chart title="Gauge">
    <Gauge value="#Datasource.gauge" min="0" max="250" startAngle="-60" endAngle="-270" axisMin="0" axisMiddle="50" />
</Chart>
 
<Chart title="Gauge">
    <Gauge value="#Datasource.gauge" min="0" max="15" startAngle="75" axisMin="80" axisMiddle="90" />
</Chart>
 
<Chart title="Gauge">
    <Gauge value="#Datasource.gauge" min="-1" max="250" startAngle="120" />
</Chart>

Das obige Beispiel führt zu folgenden Diagrammen

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.

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

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

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

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

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

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

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.