Skip to main content
Skip table of contents

Kreis-/Donutdiagramm

Mit einem Kreisdiagramm kann der Anteil einzelner Daten an der Gesamtheit veranschaulicht werden.

Ein Kreis-/Donutdiagramm kann folgende Elemente enthalten:

  • <Pie>: Gibt an, wie das Diagramm angezeigt werden soll.
  • <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 Kreis-/Donutdiagramms 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

Pie

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

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

AttributBeschreibung
color

Farbe des einzelnen Diagrammausschnitts

Mögliche Werte: Hexadezimaler Farbwert oder Ausdruck für Data Binding (Color)

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

data 

Gibt an, welche Daten im Diagramm dargestellt werden. Die angegebene Zeichenkette bezieht sich auf eine definierte Property innerhalb der Datenquelle, die im  <Chart>-Element angegeben wird.

Mögliche Werte:  Data Binding

donut 

​Gibt an, ob das Diagramm als Donutdiagramm dargestellt werden soll.

Mögliche Werte: true / false (Standard)

legend 

​Gibt an, ob eine Legende angezeigt werden soll.

Mögliche Werte: true (Standard) / false 

name 

Gibt den Namen an, der dem jeweiligen Wert zugeordnet ist (Datenbeschriftung). Die angegebene Zeichenkette bezieht sich auf eine definierte Property innerhalb der Daten, die für data angegeben werden.

Mögliche Werte: Data Binding

normals 

Gibt an, ob die Werte direkt im Diagramm beschriftet werden sollen.

Mögliche Werte: true / false (Standard)

value 

Gibt an, welcher Wert des Datenobjekts visualisiert wird. Die angegebene Zeichenkette bezieht sich auf eine definierte Property innerhalb der Daten, die für data angegeben werden.

Mögliche Werte: Data Binding

labelColor

Legt die Schriftfarbe der Beschriftung fest.

Überschreibt die Farbe aller Beschriftungen des Charts.

Mögliche Werte:

  • Hexadezimaler Farbwert, z. B.ff5a00

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

Legt die Breite der Beschriftung in Pixeln fest.

Mögliche Werte:

  • Beliebige Ganzzahl
labelOverflow

Gibt an, was passieren soll, wenn die Beschriftung länger als die festgelegte Breite der Beschriftung ist.

Mögliche Werte:

  • none: Verhindert einen Textumbruch (Standard)
  • truncateMit ... zeigen, dass der Text nicht zu Ende ist
  • break: Text zwischen den Wörtern umbrechen
  • breakAllInnerhalb des Wortes abbrechen
avoidLabelOverlap

Legt fest, ob das Überlappen von Beschriftungen verhindert werden soll.

Mögliche Werte:

  • True: Das Überlappen von Beschriftungen wird verhindert.
  • False: Das Überlappen von Beschriftungen wird nicht verhindert.
radius

Legt den Radius in Pixeln fest.

Mögliche Werte:

  • Beliebige Ganzzahl
radiusOuterDonut

Legt den inneren Radius in Pixeln fest.

Nur relevant, wenn das Attribut donut="true" gesetzt ist.

Mögliche Werte:

  • Beliebige Ganzzahl
centerHorizontal

Legt die horizontale Position des Diagramms fest.

Mögliche Werte:

  • Beliebige Ganzzahl
centerVertical

Legt die vertikale Position des Diagramms fest.

Mögliche Werte:

  • Beliebige Ganzzahl
tooltipPercentage

Legt fest, ob zusätzlich zum Wert eine Prozentangabe in der Beschriftung und im Tooltip angezeigt wird.

Mögliche Werte:

  • True: Prozentangabe wird angezeigt.
  • False: Prozentangabe wird nicht angezeigt.

Tooltip

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

Beispiel

XML
<Properties>
	<Property name="DataSource" type="Complex">
		<Property name="ABC-Analysis" type="List">
			<Property name="ItemGroup" type="String"/>
			<Property name="Profit" type="Integer"/>
		</Property>
	</Property>
</Properties>
<FlowLayout>
	<Chart fontFamily="Font03" title="ABC-Analysis / Profit from different item groups">
		<Pie data="#DataSource.ABC-Analysis" fontFamily="Font03" name="#ItemGroup" normals="false" value="#Profit">
           <Tooltip fontFamily="Font03"/>
        </Pie>
	</Chart>
	<Chart fontFamily="Font02" title="ABC-Analysis / Profit from different item groups">
		<Pie data="#DataSource.ABC-Analysis" donut="true" fontFamily="Font03" name="#ItemGroup"  normals="true" value="#Profit">
			<Tooltip fontFamily="Font03"/>
		</Pie>
	</Chart>
</FlowLayout>

Das obige Beispiel führt zu folgenden Diagrammen:

JavaScript errors detected

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

If this problem persists, please contact our support.