Balkendiagramm

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

Ein Balkendiagramm kann folgende Elemente enthalten:

<Bar>: Enthält alle Elemente, die zum Balkendiagramm gehören. Gibt an, wie das Diagramm angezeigt werden soll.
<BarData>: Definiert, wie die Daten angezeigt werden sollen. Für jede Kategorie im Balkendiagramm muss ein <BarData>-Element definiert werden.
<Axis>: Definiert die Achsenbeschriftungen.
<Tooltip>: Definiert, wie der Tooltip für die einzelnen Werte im Diagramm angezeigt werden soll.

Allgemeine Attribute

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

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. Dieses Attribut funktioniert nicht für die Elemente `Image`, `Map` 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 `Image`, `Map` 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 `Image`, `Map`, `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 `Image`, `Map` 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 `Image`, `Map` 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`

Bar

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

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

Attribut Beschreibung

legend

Gibt an, ob eine Legende 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)

BarData

<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 kann <BarData> folgende Attribute haben:

Attribut	Beschreibung
`category`	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`	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`	Gibt an, welcher Wert des Datenobjekts visualisiert wird. Mögliche Werte: Data Binding

Axis

<Axis>: Kindelement von <Bar>. Definiert die Achsenbeschriftungen.

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

Attribut	Beschreibung
`color`	Legt die Farbe der Achsten fest. 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. Theming), z. B. `A200`

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

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

Beispiel 1:

XML

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

Input 2

Beispiel 1:

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

Beispiel 1:

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>

Das obige Beispiel führt zu folgendem Diagramm:

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. Das obige Beispiel führt zu folgenden Diagrammen: