Section author: carsten

6.7. PieChartWidget

Das Pie-Chart zeigt Daten als Tortenstücke (Kreissegmente) an. Im Pie-Chart sind keine Labels vorgesehen. Diese müssen ggf. mittels einer LabelBar zusätzlich angezeigt werden.

Innerhalb des Pie-Charts werden Templates zur Erzeugung der einzelnen Segmente genutzt.

Note

Es ist geplant Labels an einzelne Tortenstücke heften zu können. Aber das ist Zukunftsmusik.

6.7.1. Beispiele

Ein einfaches Chart mit fünf Segmenten:

<?xml version="1.0" encoding="UTF-8"?>
<presentation width="340" height="200">

  <widget name="ThePieChart" type="PieChart" location="10,10" shape="R 300 160">
    <property name="Values" type="List[Number]" value="2,4,3,5,7" />
<!--    <property name="Expansions" value="3" />-->
<!--    <template name="PieTemplates" type="Widget">-->
<!--      <widget name="pieSegment">-->
<!--        <property name="BackgroundColor" value="red" />-->
<!--      </widget>-->
<!--    </template>-->
  </widget>

</presentation>

6.7.2. Properties

Neben den Properties, die für alle Charts gelten (siehe Abschnitt Gemeinsame Properties aller Charttypen), hat das PieChart folgende eigene Properties:

Cutout (Number)

Ein Kreischart kann in der mitte eine Aussparung haben. Cutout legt den Radius dieser Aussparung als Anteil am Radius des Kreises fest.

Default:0

Wertebereich: 0 bis 1

Values (List[Number])

Die Liste der Werte welche im PieChart dargestellt werden sollen. Die Summe aller Werte wird als 100% des Radius betrachtet. Somit beschreiben die einzelnen Werte den prozentualen Winkel. <– Stimmt zwar, ist aber missverständlich formuliert. Oder hab ich da was falsch verstanden? / malte

Beispiel:

<!-- PieChart mit 5 Segmenten mit jeweils 20% des Gesamtwinkels-->
<property name="Values" value="2,2,2,2,2"/>

<!-- PieChart mit 3 Segmenten mit jeweils 20%/40%/40% des Gesamtwinkels -->
<property name="Values" value="2,4,4"/>

<!-- PieChart mit 3 Segmenten mit jeweils 25% des Gesamtwinkels -->
<property name="Values" value="4,4,4,4"/>

Expansions (List[Number])

Einzelne Kreissegmente können mit dieser Liste nach aussen verschoben werden. Der Wert beschreibt den Versatz in Screeneinheiten (Pixel) nach außen; die Position in der Liste das jeweilige Kreissegment. Werden weniger Werte angegeben, als im Chart vorhanden sind, werden die Werte abwechselnd für die einzelnen Segmente genutzt:

<!-- alle Segmente mit einer Expansion von 5 -->
<property name="Values" value="3,4,2,6,7"/>
<property name="Expansions" value="5" />

<!-- Expansion immer abwechselnd mit 10 bzw. 5 -->
<property name="Values" value="3,4,2,6,7"/>
<property name="Expansions" value="10,5," />

<!-- Expansion für alle Segmente spezifisch gesetzt -->
<property name="Values" value="3,4,2,6,7"/>
<property name="Expansions" value="10,5,4,6" />

AnimationProgress (List[Number])

Eine Liste von Werten üblicherweise zwischen 0 und 1 die mit dem Winkel der einzelnen Kreissegmente multipliziert werden. Dadurch kann man individuelle Kreissegmente animieren. Sofern weniger Werte angegeben werden, als Segmente vorhanden sind, werden die überzähligen Segmente nicht animiert. Wäre doch praktisch, wenn hier auch eine Automatismus wie bei Expansions funktionieren würde, also einen Wert angeben, für alle Segmente nutzen

DefaultExpansion (Number)

Mit dieser Eigenschaft lassen sich alle Segmente um den angegbenen Radius nach aussen rücken.

Default:0

Wo ist der Unterschied zwischen <property name=”DefaultExpansion” value=”10” /> und <property name=”Expansions” value=”10” /> Gibt es einen?/malte

ExpansionMode (Symbol)

noch nicht definiert.

PieMode (Symbol)

• ‘circle’: Die Veränderung der Breite oder Höhe des Kreischarts ändert zwar den Radius der Segmente aber nicht den Aspekt. Es wird immer ein “rundes” Chart gezeichnet. Die Chartfläche wird in den zur Verfügung stehenden Raum eingepasst, unter Berücksichtigung der Property Radius.
• ‘seats’: Es werden nur 0 bis 180 Grad gezeichnet. (Halbkreischart). Das Chart wird in den zur Verfügung stehenden Raum eingepasst, unter Berücksichtigung der Property Radius.
• ‘ellipse’: Die Kreissegmente richten sowohl Breite als auch Höhe nach dem Kreischart aus. Das Chart füllt also den kompletten zur Verfügung stehenden Raum aus, unter Berücksichtigung der Property Radius.

Default: ellipse

StartAngle (Number)

StartAngle definiert den Startwinkel des Charts in Grad. Dieser startet bei 0 Grad nach links und dreht im Normalfall gegen den Uhrzeigersinn. (Siehe Direction). Bei PieMode='seats' wird diese Eigenschaft ignoriert. (immer 0 Grad)

Default: 0

EndAngle (Number)

Definiert den Endwinkel des Charts in Grad. Bei PieMode='seats' wird diese Eigenschaft ignoriert. (immer 180 Grad)

Default: 360

Direction (Symbol)

• ‘clockwise’ oder ‘cw’: Das Erhöhen von StartAngle oder EndAngle bewirkt eine Drehung im Uhrzeigersinn.
• ‘counterclockwise’ oder ‘ccw’: Das Erhöhen von StartAngle oder EndAngle bewirkt eine Drehung gegen den Uhrzeigersinn. (Standarteinstellung)

Default: counterclockwise

Groups (List[Object])

Über diese Eigenschaft lassen sich Gruppen von Kreissegmenten definieren die zwischen anderen Gruppen einen Spalt freilassen.

Radius (Number)

Der Maximale Radius der Segmente. Dieser Radius kann größer werden wenn man Expansions einsetzt.