X4 Produktdokumentation
X4 Produktdokumentation
Breadcrumbs

Liniendiagramm

Mit einem Liniendiagramm können Trends oder Veränderungen im Zeitablauf dargestellt werden. Dabei werden Datenpunkte durch gerade Liniensegmente verbunden. In einem Liniendiagramm können auch mehrere Zahlenreihen dargestellt werden.

Hinweise zur Verwendung

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

XML
<Chart>
    <Line/>
</Chart>

Das Element <Line> kann folgende Elemente enthalten:

  • <Axis>: Definiert die Achsenbeschriftungen.

  • <LineData>: Definiert, wie die Daten angezeigt werden sollen. Für jeden Datensatz, also jede Linie im Liniendiagramm, muss ein <LineData>-Element definiert werden.

  • <Tooltip>: 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 Liniendiagramms 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. 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, 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 <Line>

Enthält alle Elemente, die zum Liniendiagramm gehören.

Zusätzlich zu den allgemeinen Attributen können Sie folgendes Attribut für das Element <Line> definieren:

Attribut

Beschreibung

​legend

​Gibt an, ob eine Legende angezeigt werden soll.

Mögliche Werte:

  • true (Standard)

  • false 

Element <Axis>

Kindelement von <Line>. Definiert die Achsenbeschriftungen.

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

Attribut

Beschreibung

color

Legt die Farbe der Achsen fest.

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.

​horizontalLabel

​Definiert die Beschriftung der x-Achse.

Mögliche Werte:

Beliebige Zeichenkette

horizontalMax 

Maximalwert der x-Achse

Mögliche Werte: 

Ganzzahl

horizontalMin 

Minimalwert der x-Achse

Mögliche Werte: 

Ganzzahl

horizontalUnits 

Einheit der x-Achse

Mögliche Werte: 

Ganzzahl

verticalLabel

Definiert die Beschriftung der y-Achse.

Mögliche Werte:

Beliebige Zeichenkette

verticalMax 

Maximalwert der y-Achse

Mögliche Werte:

Ganzzahl

verticalMin 

Minimalwert der y-Achse

Mögliche Werte: 

Ganzzahl

verticalUnits 

Einheit der y-Achse

Mögliche Werte: 

Ganzzahl

Element <LineData>

Kindelement von <Line>. Definiert, wie die Daten angezeigt werden sollen. Für jeden Datensatz, also jede Linie im Liniendiagramm, muss ein <LineData>-Element definiert werden.

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

Attribut

Beschreibung

color

Definiert die Farbe der Linie.

Mögliche Werte:

Hexadezimaler Farbwert oder Ausdruck für Data Binding (Color)

Wird das Attribut color nicht definiert, werden die im Theming Editor definierten Farben verwendet. 

​data

​Gibt an, welche Daten im Diagramm dargestellt werden.

Mögliche Werte:

Data Binding

labels

Gibt an, ob die Datenpunkte mit dem jeweiligen Wert beschriftet werden.

Mögliche Werte:

  • true 

  • false (Standard)

marker

Gibt an, wie ein Datenpunkt dargestellt wird.

Mögliche Werte:

  • circle: Kreis

  • rect: Rechteck

  • roundRect: Rechteck mit abgerundeten Ecken

  • triangle: Dreieck

  • diamond: Raute

  • pin: Stecknadel

  • arrow: Pfeil

  • none: kein Marker

markersEnabled

Gibt an, ob ein Datenpunkt markiert werden soll.

Mögliche Werte:

  • true (Standard)

  • false 

name

Name des Datensatzes, der in der Legende angezeigt wird.

Mögliche Werte:

Beliebige Zeichenkette

xValues

​Gibt an, welche Daten im Diagramm auf der x-Achse dargestellt werden. Die angegebene Zeichenkette bezieht sich auf eine definierte Property innerhalb der Daten, die für data angegeben werden.

Mögliche Werte:

Data Binding

yValues

​Gibt an, welche Daten im Diagramm auf der y-Achse dargestellt werden. Die angegebene Zeichenkette bezieht sich auf eine definierte Property innerhalb der Daten, die für data angegeben werden.

Mögliche Werte: 

Data Binding

Element <Tooltip>

Kindelement von <Line>. 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="List1" type="List">
        <Property name="Year" type="Integer"/>
        <Property name="Sales" type="Integer"/>
    </Property>
    <Property name="List2" type="List">
        <Property name="Year" type="Integer"/>
        <Property name="Sales" type="Integer"/>
    </Property>
</Properties>
	...
<Chart title="Trend 1">
    <Line legend="true">
        <Axis verticalMin="0" verticalMax="300000" verticalLabel="Sales" horizontalLabel="Year"/>
        <LineData color="A700" xValues="#Year" data="#List1" yValues="#Sales" name="Seller 1"/>
    </Line>
</Chart>
</Cell>
<Cell cellSizeDesktop="6">
    <Chart title="Trend 1 and 2">
        <Line legend="true">
            <LineData color="A700" xValues="#Year" data="#List1" yValues="#Sales" name="Seller 1" marker="pin"/>
            <LineData color="400" xValues="#Year" data="#List2" yValues="#Sales" name="Seller 2" marker="pin"/>
        </Line>
    </Chart>


Output

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

XML
<Ok>
	<List1>
		<Year>2018</Year>
		<Sales>50000</Sales>
	</List1>
	<List1>
		<Year>2019</Year>
		<Sales>100000</Sales>
	</List1>
	<List1>
		<Year>2020</Year>
		<Sales>40000</Sales>
	</List1>
	<List1>
		<Year>2021</Year>
		<Sales>150000</Sales>
	</List1>
	<List1>
		<Year>2022</Year>
		<Sales>250000</Sales>
	</List1>
	
	<List2>
		<Year>2017</Year>
		<Sales>200000</Sales>
	</List2>
	<List2>
		<Year>2018</Year>
		<Sales>250000</Sales>
	</List2>
	<List2>
		<Year>2019</Year>
		<Sales>150000</Sales>
	</List2>
	<List2>
		<Year>2020</Year>
		<Sales>20000</Sales>
	</List2>
</Ok>


image-20251124-073103.png