Balkendiagramm | X4Documentation

Mit einem Balkendiagramm können mehrere Variablen mit einem einzelnen Wert verglichen werden. Balkendiagramme sind hilfreich, um Kategorien zu vergleichen.

Hinweise zur Verwendung

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

<Chart>
    <Bar/>
</Chart>

Das Element <Bar> kann folgende Elemente enthalten:

<Axis>: Definiert die Achsenbeschriftungen.
<BarData>: Definiert, wie die Daten angezeigt werden sollen. Für jede Kategorie im Balkendiagramm muss ein <BarData>-Element definiert werden.
<Tooltip>: Definiert, wie der Tooltip für die einzelnen Werte im Diagramm angezeigt werden soll.

Allgemeine Attribute

Folgende Attribute können Sie für alle Elemente eines Balkendiagramms 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`
`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 `<Bar>`

Enthält alle Elemente, die zum Balkendiagramm gehören. Gibt an, wie das Diagramm angezeigt werden soll.

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

Attribut	Beschreibung
`legend`	Gibt an, ob eine Legende angezeigt werden soll. Mögliche Werte: `true` (Standard) `false`
`showLabelInStacked`	Gibt an, ob der Wert in gestapelten Diagrammen innerhalb des Balkens angezeigt werden soll. Mögliche Werte: `true` (Standard) `false`
`stacked`	Gibt an, ob das Balkendiagramm als gestapeltes Diagramm angezeigt werden soll. Data Binding (Boolean) möglich Mögliche Werte: `true` `false` (Standard)
`zoomXFilterMode`	Gibt an, wie Datenpunkte außerhalb des aktuellen Zoom-Bereichs im Balkendiagramm behandelt werden. Beeinflusst Achsenskalierung, Anzeige leerer Balken und das Entfernen von Punkten. Mögliche Werte: `empty`: Setzt Werte außerhalb des Bereichs auf `NaN`. Lücken werden angezeigt, die Achse bleibt unverändert. `filter` (Standard): Entfernt alle Daten außerhalb des Zoom-Bereichs. Die Achsen passen sich an. `none`: Es erfolgt keine Filterung, alle Datenpunkte bleiben sichtbar. `weakfilter`: Entfernt nur Daten, deren alle relevanten Dimensionen außerhalb des Bereichs liegen. Teilweise Überschneidungen werden weiterhin angezeigt.
`zoomXType`	Gibt an, wie Benutzer in der X-Achse des Balkendiagramms zoomen können. Mögliche Werte: `inside` (Standard): Benutzer können über das Mausrad zoomen. `none`: Benutzer können nicht zoomen. `slider`: Benutzer können über einen Schieberegler zoomen, der unter dem Balkendiagramm eingeblendet wird.
`zoomYFilterMode`	Gibt an, wie Datenpunkte außerhalb des aktuellen Zoom-Bereichs im Balkendiagramm behandelt werden. Beeinflusst Achsenskalierung, Anzeige leerer Balken und das Entfernen von Punkten. Mögliche Werte: `empty`: Setzt Werte außerhalb des Bereichs auf `NaN`. Lücken werden angezeigt, die Achse bleibt unverändert. `filter` (Standard): Entfernt alle Daten außerhalb des Zoom-Bereichs. Die Achsen passen sich an. `none`: Es erfolgt keine Filterung, alle Datenpunkte bleiben sichtbar. `weakfilter`: Entfernt nur Daten, deren alle relevanten Dimensionen außerhalb des Bereichs liegen. Teilweise Überschneidungen werden weiterhin angezeigt.
`zoomYType`	Gibt an, wie Benutzer in der Y-Achse des Balkendiagramms zoomen können. Mögliche Werte: `inside` (Standard): Benutzer können über das Mausrad zoomen. `none`: Benutzer können nicht zoomen. `slider`: Benutzer können über einen Schieberegler zoomen, der unter dem Balkendiagramm eingeblendet wird.

Element `<Axis>`

Kindelement von <Bar>. 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.

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.

Element `<BarData>`

Kindelement von <Bar>. Definiert, wie die Daten angezeigt werden sollen. Für jede Kategorie im Balkendiagramm muss ein <BarData>-Element definiert werden.

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

Attribut	Beschreibung
`category`	Erforderlich Gibt an, welcher Kategorie (`category`) der Wert zugeordnet wird. Mögliche Werte: Data Binding
`color`	Farbe des Balkens 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`	Erforderlich Gibt an, welches Datenobjekt der Datenquelle visualisiert wird. Mögliche Werte: Data Binding
`name`	Gibt den Namen der Daten an, der in der Legende angezeigt wird. Mögliche Werte: Beliebige Zeichenkette oder Data Binding
`value`	Erforderlich Gibt an, welcher Wert des Datenobjekts visualisiert wird. Mögliche Werte: Data Binding

Element `<Tooltip>`

Kindelement von <Bar>. 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.

Daten leeren

Wenn Sie weitere Daten mithilfe eines Prozesses nachladen, wird das bereits geladene Chart nicht entfernt. Wenn Sie das bereits geladene Chart mit den neuen Daten überschreiben möchten, muss in den Daten das Attribut empty="true" deklariert werden. Das Attribut leert die vorhandenen Daten.

Input 1

XML

<?xml version="1.0" encoding="UTF-8"?>
<Ok>
	<b2 empty="true"/>
	<b1>
		<a>1</a>
		<b>1</b>
	</b1>
</Ok>

Input 2

XML

<?xml version="1.0" encoding="UTF-8"?>
<Ok>
	<b1 empty="true"/>
	<b2>
		<a>1</a>
		<b>1</b>
	</b2>
</Ok>

Chart in der Component

XML

<Chart>
	<Bar>
		<BarData
			category="#a"
			data="#b1"
			value="#b" />
		<BarData
			category="#a"
			data="#b2"
			value="#b" />
	</Bar>
</Chart>

Beispiele

Beispiel 1

XML

<Properties>
	<Property name="DataSource" type="Complex">
		<Property name="CompanyX" type="List">
			<Property name="Category" type="String"/>
			<Property name="Money" type="Integer"/>
		</Property>
		<Property name="CompanyY" type="List">
			<Property name="Category" type="String"/>
			<Property name="Money" type="Integer"/>
		</Property>
	</Property>
</Properties>
<FlowLayout>
	<Chart fontFamily="Font03" title="Profit comparison between two companies">
		<Bar stacked="true">
			<Tooltip fontFamily="Font02" fontSize="10"/>
			<Axis fontFamily="Font03" fontSize="10"/>
			<BarData category="#Category" data="#DataSource.CompanyX" fontFamily="Font03" name="Company X" value="#Money"/>
			<BarData  category="#Category" data="#DataSource.CompanyY" fontFamily="Font03" name="Company Y" value="#Money"/>
		</Bar>
	</Chart>
</FlowLayout>

Output

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

XML

<Ok>
	<DataSource>
		<CompanyX>
			<Category>1995</Category>
			<Money>200000</Money>
		</CompanyX>
		<CompanyX>
			<Category>2000</Category>
			<Money>250000</Money>
		</CompanyX>
		<CompanyX>
			<Category>2005</Category>
			<Money>400000</Money>
		</CompanyX>
		<CompanyX>
			<Category>2010</Category>
			<Money>350000</Money>
		</CompanyX>
		<CompanyX>
			<Category>2015</Category>
			<Money>-100000</Money>
		</CompanyX>
		<CompanyY>
			<Category>1995</Category>
			<Money>450000</Money>
		</CompanyY>
		<CompanyY>
			<Category>2000</Category>
			<Money>500000</Money>
		</CompanyY>
		<CompanyY>
			<Category>2005</Category>
			<Money>350000</Money>
		</CompanyY>
		<CompanyY>
			<Category>2010</Category>
			<Money>400000</Money>
		</CompanyY>
		<CompanyY>
			<Category>2015</Category>
			<Money>550000</Money>
		</CompanyY>
	</DataSource>
</Ok>

Beispiel 2

XML

<Property name="Datasource" type="Complex">
    <Property name="Bar1" type="List">
        <Property name="category" type="String"></Property>
        <Property name="value" type="Integer"></Property>
    </Property>
    <Property name="Bar2" type="List">
        <Property name="category" type="String"></Property>
        <Property name="value" type="Integer"></Property>
    </Property>
    <Property name="Bar3" type="List">
        <Property name="category" type="String"></Property>
        <Property name="value" type="Integer"></Property>
    </Property>
 
	...
	...
	...
 
<Chart title="Test Bar">
    <Bar>
        <BarData data="#Datasource.Bar1" category="#category" value="#value"
            name="Data 1" />
        <BarData data="#Datasource.Bar2" category="#category" value="#value"
            name="Data 2" />
        <BarData data="#Datasource.Bar3" category="#category" value="#value"
            name="Data 3" />
    </Bar>
</Chart>
 
<Chart title="Stacked Bar">
    <Bar stacked="true">
        <BarData data="#Datasource.Bar1" category="#category" value="#value"
            name="Data 1" />
        <BarData data="#Datasource.Bar2" category="#category" value="#value"
            name="Data 2" />
        <BarData data="#Datasource.Bar3" category="#category" value="#value"
            name="Data 3" />
    </Bar>
</Chart>

Um eine Kategorie im Diagramm darzustellen, wird das Element <BarData> verwendet. Die dargestellten Daten selbst sind in der Property Datasource enthalten.