16. Jun 2025
Lesedauer 6 Min.
Stapelgrafik
Chart-Komponenten in Visual Basic
Flexible Stapel-Charts für VB- und WPF-Anwendungen.
dotnetpro
Stapel-Charts veranschaulichen die Größenverhältnisse zwischen zusammengehörigen Werten. Ein Beispiel aus dem Finanzbereich sind die sofort oder in wenigen Tagen verfügbaren Gelder, also die Liquidität. Dazu gehören neben dem Kassenbestand die Geldbestände auf dem Girokonto, aber auch Tagesgelder, die, wenn gewünscht, schon am nächsten Bankarbeitstag verfügbar sind. In Bild 1 sehen Sie ein fiktives Beispiel dafür.
Beispiel einer einfachen Stapelgrafik (Bild 1)
Autor
Die hier beschriebenen Stapel-Charts sind wie die Donut-Charts in [1] ausschließlich für den Desktop gedacht und mit der Kombination von Windows Presentation Foundation (WPF) und Visual Basic .NET unter .NET 8 geschrieben. Auch die Hauptziele sind dieselben geblieben: Man soll das Chart-Modul mit möglichst wenigen Eingaben nutzen können. Alle Größenrelationen werden abhängig von der Canvas-Größe automatisch gesetzt, lassen sich bei Bedarf aber auch verändern. Außerdem soll eine ungünstige Reihenfolge der Werte per Mausklick korrigiert werden können, und die Farben soll der Anwender per Mausrad steuern können.Die Beispielanwendung hat zwei Leinwände namens cvLinks und cvRechts, die im XAML-Code definiert werden:
...
<span class="hljs-tag"><<span class="hljs-name">StackPanel</span> <span class="hljs-attr">Orientation</span>=<span class="hljs-string">"Horizontal"</span> </span>
<span class="hljs-tag"> <span class="hljs-attr">Margin</span>=<span class="hljs-string">"30"</span> <span class="hljs-attr">Height</span>=<span class="hljs-string">"550"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">Canvas</span> <span class="hljs-attr">Name</span>=<span class="hljs-string">"cvLinks"</span> <span class="hljs-attr">Margin</span>=<span class="hljs-string">"10 0 0 0"</span> </span>
<span class="hljs-tag"> <span class="hljs-attr">Width</span>=<span class="hljs-string">"550"</span> <span class="hljs-attr">Height</span>=<span class="hljs-string">"650"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">Background</span>=<span class="hljs-string">"LavenderBlush"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">Canvas</span> <span class="hljs-attr">Name</span>=<span class="hljs-string">"cvRechts"</span> </span>
<span class="hljs-tag"> <span class="hljs-attr">Margin</span>=<span class="hljs-string">"10 0 0 0"</span> </span>
<span class="hljs-tag"> <span class="hljs-attr">Width</span>=<span class="hljs-string">"550"</span> <span class="hljs-attr">Height</span>=<span class="hljs-string">"650"</span> </span>
<span class="hljs-tag"> <span class="hljs-attr">Background</span>=<span class="hljs-string">"LavenderBlush"</span> /></span>
...
<span class="hljs-tag"></<span class="hljs-name">StackPanel</span>></span>
...
Der Methode StapelChart müssen neben der Canvas, auf die gezeichnet werden soll, noch eine Überschrift sowie die Werte-Bezeichner-Paare übergeben werden. Darüber hinaus gibt es zwölf optionale Eingabemöglichkeiten, die für individuelle Anpassungen bereitstehen. Die komplette Signatur der Methode sehen Sie in Listing 1. Der Stapel-Chart in Bild 2 zeigt die Einnahmen eines Vereins. Der Aufruf sieht so aus:
Listing 1: Signatur der Methode StapelChart
<span class="hljs-keyword">Public</span> <span class="hljs-keyword">Sub</span> StapelChart(<br/> cv <span class="hljs-keyword">As</span> Canvas,<br/> HeadLine <span class="hljs-keyword">As</span> <span class="hljs-built_in">String</span>,<br/> wbListe <span class="hljs-keyword">As</span> List(<span class="hljs-keyword">Of</span> wbPaar),<br/> <span class="hljs-keyword">Optional</span> MitSumme <span class="hljs-keyword">As</span> <span class="hljs-built_in">Boolean</span> = <span class="hljs-literal">True</span>,<br/> <span class="hljs-keyword">Optional</span> Einheit <span class="hljs-keyword">As</span> <span class="hljs-built_in">String</span> = <span class="hljs-string">" Euro"</span>,<br/> <span class="hljs-keyword">Optional</span> nk2 <span class="hljs-keyword">As</span> <span class="hljs-built_in">Boolean</span> = <span class="hljs-literal">True</span>,<br/> <span class="hljs-keyword">Optional</span> Farbset <span class="hljs-keyword">As</span> <span class="hljs-built_in">Integer</span> = <span class="hljs-number">0</span>,<br/> <span class="hljs-keyword">Optional</span> Farbverlauf <span class="hljs-keyword">As</span> <span class="hljs-built_in">Integer</span> = <span class="hljs-number">1</span>,<br/> <span class="hljs-keyword">Optional</span> sBreite <span class="hljs-keyword">As</span> <span class="hljs-built_in">Integer</span> = <span class="hljs-number">0</span>,<br/> <span class="hljs-keyword">Optional</span> freeLeft <span class="hljs-keyword">As</span> <span class="hljs-built_in">Integer</span> = <span class="hljs-number">0</span>,<br/> <span class="hljs-keyword">Optional</span> freeTop <span class="hljs-keyword">As</span> <span class="hljs-built_in">Integer</span> = <span class="hljs-number">0</span>,<br/> <span class="hljs-keyword">Optional</span> freeBottom <span class="hljs-keyword">As</span> <span class="hljs-built_in">Integer</span> = <span class="hljs-number">0</span>,<br/> <span class="hljs-keyword">Optional</span> HLFontSize <span class="hljs-keyword">As</span> <span class="hljs-built_in">Integer</span> = <span class="hljs-number">0</span>,<br/> <span class="hljs-keyword">Optional</span> lines <span class="hljs-keyword">As</span> <span class="hljs-built_in">Boolean</span> = <span class="hljs-literal">True</span>,<br/> <span class="hljs-keyword">Optional</span> CU <span class="hljs-keyword">As</span> <span class="hljs-built_in">String</span> = <span class="hljs-string">""</span><br/>)<br/> ...<br/><span class="hljs-keyword">End</span> <span class="hljs-keyword">Sub</span> 
Fiktiver Verein: StapelChart(cvRechts, "Einnahmen",data2, CU:="Herkunft der Gelder im Jahr 2024") (Bild 2)
Autor
StapelChart(<span class="hljs-name">cvRechts</span>, <span class="hljs-string">"Einnahmen"</span>, data2,
CU<span class="hljs-symbol">:=</span><span class="hljs-string">"Herkunft der Gelder im Jahr 2024"</span>)
Die Grafik wird folglich auf die rechte Canvas gezeichnet (cvRechts), die Überschrift lautet Einnahmen, in data2 liegen die Werte und Bezeichner, und eine optionale Chartunterschrift (CU:=”...”) wird ebenfalls festgelegt.Weil Wert und Bezeichner quasi unzertrennlich zusammengehören, kennt das Programm die Struktur wbPaar, die wie folgt aussieht:
<span class="hljs-keyword">Structure</span> wbPaar
<span class="hljs-keyword">Dim</span> w <span class="hljs-keyword">As</span> Decimal ' Wert
<span class="hljs-keyword">Dim</span> b <span class="hljs-keyword">As</span> String ' Bezeichner
End <span class="hljs-keyword">Structure</span>
Da in der Regel mehrere Wert-Bezeichner-Pärchen erforderlich sind, werden diese in einer Liste verwaltet, sie heißt wbListe. Die für den obigen Aufruf zusammengestellte Liste data2, deren Ergebnis Sie in Bild 2 sehen, wird mit folgenden Zeilen erzeugt:
Dim data2 As New List(Of wbPaar) From {
New wbPaar With {
<span class="hljs-selector-class">.w</span> = <span class="hljs-number">4120.0</span>, <span class="hljs-selector-class">.b</span> = <span class="hljs-string">"Mitgliedsbeiträge"</span>},
New wbPaar With {
<span class="hljs-selector-class">.w</span> = <span class="hljs-number">320.0</span>, <span class="hljs-selector-class">.b</span> = <span class="hljs-string">"Zuschüsse"</span>},
New wbPaar With {
<span class="hljs-selector-class">.w</span> = <span class="hljs-number">640.0</span>, <span class="hljs-selector-class">.b</span> = <span class="hljs-string">"Spenden"</span>},
New wbPaar With {
<span class="hljs-selector-class">.w</span> = <span class="hljs-number">1397.12</span>, <span class="hljs-selector-class">.b</span> = <span class="hljs-string">"Jubiläumsfest"</span>},
New wbPaar With {
<span class="hljs-selector-class">.w</span> = <span class="hljs-number">993.8</span>, <span class="hljs-selector-class">.b</span> = <span class="hljs-string">"Weihnachtsmarkt"</span>},
New wbPaar With {
<span class="hljs-selector-class">.w</span> = <span class="hljs-number">44.5</span>, <span class="hljs-selector-class">.b</span> = <span class="hljs-string">"Andere"</span>}
}
Das sieht kompliziert aus, ist es aber nur, weil hier die Daten quasi manuell für eine Beispielgrafik erfasst wurden. Nutzt man StapelChart zur Ausgabe von Grafiken zu den von einem Programm ermittelten Daten, gilt es dafür einmalig den Code für die Übergabe der Daten zu schreiben.
Methode StapelChart
Damit die wenigen Eingaben genügen, um eine ansehnliche Grafik zu ergeben, muss die Methode StapelChart einige Aufgaben erledigen:- Prüfen, ob die maximale Anzahl von neun Wert-Bezeichner-Paaren überschritten wurde.
- Die optionalen Werte passend zur Canvas-Größe einstellen.
- Die Eckpunkte für die Grafik (StartPt_oben und StartPt_unten) berechnen.
- Alle Werte in eine Variable von Typ StapelInfos (Listing 2) übernehmen.
Listing 2: Die Struktur StapelInfos
<span class="hljs-keyword">Structure</span> StapelInfos<br/> <span class="hljs-keyword">Dim</span> cv <span class="hljs-keyword">As</span> Canvas<br/> <span class="hljs-keyword">Dim</span> Headline <span class="hljs-keyword">As</span> <span class="hljs-built_in">String</span><br/> <span class="hljs-keyword">Dim</span> wbListe <span class="hljs-keyword">As</span> List(<span class="hljs-keyword">Of</span> wbPaar)<br/> <span class="hljs-keyword">Dim</span> nk2 <span class="hljs-keyword">As</span> <span class="hljs-built_in">Boolean</span><br/> <span class="hljs-keyword">Dim</span> MitSumme <span class="hljs-keyword">As</span> <span class="hljs-built_in">Boolean</span><br/> <span class="hljs-keyword">Dim</span> Einheit <span class="hljs-keyword">As</span> <span class="hljs-built_in">String</span><br/> <span class="hljs-keyword">Dim</span> Farbset <span class="hljs-keyword">As</span> <span class="hljs-built_in">Integer</span><br/> <span class="hljs-keyword">Dim</span> Farbverlauf <span class="hljs-keyword">As</span> <span class="hljs-built_in">Integer</span><br/> <span class="hljs-keyword">Dim</span> sBreite <span class="hljs-keyword">As</span> <span class="hljs-built_in">Integer</span><br/> <span class="hljs-keyword">Dim</span> freeLeft <span class="hljs-keyword">As</span> <span class="hljs-built_in">Integer</span><br/> <span class="hljs-keyword">Dim</span> freeTop <span class="hljs-keyword">As</span> <span class="hljs-built_in">Integer</span><br/> <span class="hljs-keyword">Dim</span> freeBottom <span class="hljs-keyword">As</span> <span class="hljs-built_in">Integer</span><br/> <span class="hljs-keyword">Dim</span> HLFontSize <span class="hljs-keyword">As</span> <span class="hljs-built_in">Integer</span><br/> <span class="hljs-keyword">Dim</span> CSpaceH <span class="hljs-keyword">As</span> <span class="hljs-built_in">Integer</span><br/> <span class="hljs-keyword">Dim</span> StartPt_oben <span class="hljs-keyword">As</span> Point<br/> <span class="hljs-keyword">Dim</span> StartPt_unten <span class="hljs-keyword">As</span> Point<br/> <span class="hljs-keyword">Dim</span> Lines <span class="hljs-keyword">As</span> <span class="hljs-built_in">Boolean</span><br/> <span class="hljs-keyword">Dim</span> CU <span class="hljs-keyword">As</span> String<br/>End <span class="hljs-keyword">Structure</span> - Die Methode Stapeln(StapelInfos) aufrufen.
Dim SI As New StapelInfos
With SI
.sBreite = If(sBreite = 0,
CInt(cv.Width * 0.325), sBreite)
.freeLeft = If(freeLeft = 0,
CInt(cv.Width * 0.125), freeLeft)
.freeTop = If(freeTop = 0,
CInt(cv.Height * 0.175), freeTop)
.freeBottom = If(freeBottom = 0,
CInt(cv.Height * 0.2), freeBottom)
.HLFontSize = If(HLFontSize = 0,
CInt(cv.Height * 0.05), HLFontSize)
End With
Die Breite der Balken ist mit 32,5 Prozent der Breite der Canvas spezifiziert, die Größe der Überschrift beträgt 5 Prozent der Höhe der Canvas.Sagen Ihnen die hier gewählten Proportionen nicht zu, können Sie diese einfach ändern und ausprobieren. Nicht alle
automatisch gesetzten Größen sind hier zu finden. Die Größe der Schrift der Bezeichner neben den einzelnen Blöcken wird erst in Stapeln(StapelInfos) mit 60 Prozent der Größe der Überschrift festgelegt, und die Schriftgröße der Chart-Unterschrift wird dort mit der Schriftgröße der Bezeichner gleichgesetzt.Zudem wird die Position der optionalen Linien erst in der Methode Stapeln ermittelt. Den kompletten Code von StapelChart, der mit dem Aufruf von Stapeln(SI) endet, finden Sie in Listing 3.
automatisch gesetzten Größen sind hier zu finden. Die Größe der Schrift der Bezeichner neben den einzelnen Blöcken wird erst in Stapeln(StapelInfos) mit 60 Prozent der Größe der Überschrift festgelegt, und die Schriftgröße der Chart-Unterschrift wird dort mit der Schriftgröße der Bezeichner gleichgesetzt.Zudem wird die Position der optionalen Linien erst in der Methode Stapeln ermittelt. Den kompletten Code von StapelChart, der mit dem Aufruf von Stapeln(SI) endet, finden Sie in Listing 3.
Listing 3: Die Methode StapelChart
Public Sub StapelChart(cv As Canvas, <br/> HeadLine As String,<br/> wbListe As List(Of wbPaar),<br/> Optional ... siehe Listing 1)<br/> ' Hier werden die Daten in die Struktur <br/> ' StapelInfos gepackt, die optimalen Werte<br/> ' passend zur Canvas-Größe eingestellt<br/> ' und an Stapeln(StapelInfos) weitergereicht.<br/> If wbListe.Count &gt; 9 Then<br/> MsgBox("Maximal 9 Wertepaare ... !")<br/> Exit Sub<br/> End If<br/> Dim SI As New StapelInfos<br/> With SI<br/> .cv = cv<br/> .wbListe = wbListe<br/> .Einheit = Einheit<br/> .nk2 = nk2<br/> .MitSumme = MitSumme<br/> .Farbset = Farbset<br/> .Headline = HeadLine<br/> .Farbverlauf = Farbverlauf<br/> .Lines = lines<br/> .CU = CU<br/> ' Optionale Werte einstellen<br/> .sBreite = If(sBreite = 0, <br/> CInt(cv.Width * 0.325), sBreite)<br/> .freeLeft = If(freeLeft = 0, <br/> CInt(cv.Width * 0.125), freeLeft)<br/> .freeTop = If(freeTop = 0, <br/> CInt(cv.Height * 0.175), freeTop)<br/> .freeBottom = If(freeBottom = 0, <br/> CInt(cv.Height * 0.2), freeBottom)<br/> .HLFontSize = If(HLFontSize = 0, <br/> CInt(cv.Height * 0.05), HLFontSize)<br/> 'Startpunkte oben / unten berechnen<br/> .StartPt_oben = New Point(<br/> .freeLeft, .freeTop)<br/> .StartPt_unten = New Point(<br/> .freeLeft, cv.Height - .freeBottom)<br/> End With<br/> Stapeln(SI)<br/>End Sub Die Methode Stapeln
Die Methode Stapeln übernimmt alle StapelInfos und kann daraus den Stapel-Chart aufbauen. Folgende Teilaufgaben werden hier erledigt:Die Canvas wird leer geräumt, damit nicht mehrere Stapel übereinander gedruckt werden. Falls gewünscht, werden Linien gezeichnet, danach die Daten zur Headline in der Struktur TBDetails(Listing 4) zusammengefasst und deren Init-Methode aufgerufen, damit sie mit der Methode showOnCanvas auf der Leinwand platziert werden kann:Listing 4: Die Strukturen TBDetails und TextWH
Public Structure TBDetails<br/> Dim Text As String<br/> Dim uiObj As TextBlock<br/> Dim twh As TextWH<br/> Dim Start As Point<br/> Dim FontSize As Integer<br/> Dim FontWeight As FontWeight<br/> Dim ForeGround As Brush<br/> Dim MarginBottom As Integer<br/> Sub Init()<br/> FontSize = Math.Max(FontSize, 14)<br/> ForeGround = If(ForeGround, Brushes.Black)<br/> MarginBottom = Math.Max(MarginBottom, 4)<br/> uiObj = getTextBlock(Me)<br/> twh = TextHöheUndBreite(uiObj,<br/> VisualTreeHelper.GetDpi(<br/> Application.Current.MainWindow)<br/> .PixelsPerDip)<br/> End Sub<br/>End Structure<br/>Public Structure TextWH<br/> Dim width As Double<br/> Dim height As Double<br/>End Structure
Sub Stapeln (SI as StapelInfos)
...
Dim HL As New TBDetails
With HL
.Text = SI.Headline
.FontSize = SI.HLFontSize
.FontWeight = FontWeights.SemiBold
.Init()
.Start.X = SI.StartPt_oben.X
.Start.Y = SI.HLFontSize \ 2
End With
showOnCanvas(SI.cv, HL)
...
End Sub
Sub showOnCanvas(c As Canvas, obj As Object)
Canvas.SetLeft(obj.uiObj, obj.start.X)
Canvas.SetTop(obj.uiObj, obj.start.Y)
c.Children.Add(obj.uiObj)
End Sub
Nachdem die Headline gesetzt ist, wird ermittelt, wie viel Platz für die eigentliche Grafik zur Verfügung steht:
SI.CSpaceH = CInt(
SI.cv.Height - SI.freeTop - SI.freeBottom)
Dann wird die Summe der Werte errechnet, um die Pixel pro Werteinheit auszurechnen:
Dim SumWerte As Decimal =
SI.wbListe.Sum(Function(item) item.w)
Dim yPixelProWerteinheit As Double =
SI.CSpaceH / SumWerte
Falls gewünscht, wird die Summe der einzelnen Werte ebenfalls in TBDetails gekleidet und per showOnCanvas angezeigt:
...
If SI.MitSumme Then
Dim SumHL As New TBDetails
With SumHL
.Text = If(SI.nk2, SumWerte.nk2 + SI.Einheit,
SumWerte.ToString + SI.Einheit)
.Text = SumWerte.nk2 + SI.Einheit
.FontSize = CInt(SI.HLFontSize * 0.6)
.FontWeight = FontWeights.SemiBold
.Init()
.Start.X = SI.StartPt_oben.X +
(SI.sBreite - .twh.width) \ 2
.Start.Y = SI.StartPt_oben.Y -
(.FontSize + .FontSize \ 4)
End With
showOnCanvas(SI.cv, SumHL)
End If
...
Dann ist es so weit und die Blöcke werden gezeichnet, siehe Listing 5. Die Rechtecke werden von unten nach oben gestapelt. Für jeden Wert gibt es einen eigenen Block mit Bezeichnung. Die Breite des Blocks bestimmt SI.sBreite, die Höhe wird mit wert * yPixelProWerteinheit errechnet. Als Mindesthöhe – damit man den Block noch gut erkennt – sind 5 Pixel vorgegeben. Gezeichnet werden die Blöcke von der Methode blRechteck, welcher die Farbe mit der Farbnummer f aus dem gewählten Farbset (im Beispielprogramm gibt es drei Farbsets) übergeben wird:
Listing 5: Blöcke zeichnen
Sub Stapeln(SI as StapelInfos)<br/> ...<br/> Dim start As Point = SI.StartPt_unten<br/> Dim f As Integer = 0 ' Farbzähler<br/> Dim BU As New TBDetails<br/> For Each item In SI.wbListe<br/> Dim höhe As Double = Math.Max(<br/> item.w * yPixelProWerteinheit, 5)<br/> ' neuer Startpunkt: X bleibt gleich, <br/> ' Y muss vermindert werden<br/> start.Y = start.Y - höhe<br/> ' Das Rechteck zeichnen <br/> blRechteck(SI, start, höhe, <br/> blFarbe(f, SI.Farbset))<br/> <br/> With BU ' Die Beschriftung einfügen<br/> ' Decimal.nk2 = 2 Nachkommastellen plus <br/> ' Umwandeln in einen String<br/> ' Für 2-zeilige Texte muss das Rechteck <br/> ' mindestens 16 Prozent des Stapels ein-<br/> ' einnehmen, sonst bleibt es bei einer Zeile<br/> If item.w &gt; 0.16 * SumWerte Then<br/> .Text = If(SI.nk2, item.b + vbCrLf + <br/> item.w.nk2 + SI.Einheit, item.b + <br/> vbCrLf + item.w.ToString + SI.Einheit)<br/> Else<br/> .Text = If(SI.nk2, item.b + ": " + <br/> item.w.nk2 + SI.Einheit, item.b + <br/> ": " + item.w.ToString + SI.Einheit)<br/> End If<br/> .FontSize = CInt(SI.HLFontSize * 0.6)<br/> .FontWeight = FontWeights.SemiBold<br/> .ForeGround = New SolidColorBrush(blFarbe(<br/> f, SI.Farbset))<br/> .Init()<br/> .Start.X = start.X + SI.sBreite + 8 '<br/> .Start.Y = start.Y + höhe / 2 -<br/> .twh.height / 3 <br/> End With<br/> showOnCanvas(SI.cv, BU)<br/> f += 1 ' die nächste Farbe ist dran<br/> Next <br/> ...<br/>End Sub
blRechteck(SI, start, höhe,
blFarbe(f, SI.Farbset))
Eine Besonderheit bei der Beschriftung (BU) ist, dass für Werte ab 16 Prozent der Gesamtsumme zweizeilige Bezeichner vergeben werden, kleinere Werte sind nur einzeilig. Als FontSize werden 60 Prozent der Größe der Überschrift eingestellt. showOnCanvas übernimmt wieder das Platzieren der BUs auf der Leinwand. Die letzte Aufgabe der Methode Stapeln ist das Setzen der Chart-Unterschrift mit der Methode CU_auf_Canvas_setzen, die auch schon für die vbDonuts [1] für diesen Zweck genutzt wurde. Weil WPF die Zeilenabstände bei zweizeiligen BUs für meinen Geschmack zu groß wählt, wurden diese vermindert mit:
TextBlock.LineHeight = TextBlock.FontSize
TextBlock.LineStackingStrategy =
LineStackingStrategy.BlockLineHeight
Achtung: Fehlt die Zeile .LineStackingStrategy …, wird der Eintrag für LineHeight nicht berücksichtigt.
Blöcke zeichnen
Das Zeichnen der Blöcke erledigt die Methode blRechteck mit wenigen Zeilen Code:
Public Sub blRechteck(SI As StapelInfos,
Start As Point, h As Double, farbe As Color)
Dim myRect As New Rectangle() With {
.Width = SI.sBreite,
.Height = h,
.Stroke = Brushes.White,
.StrokeThickness = 1
}
...
' Setze die Position des Rechtecks
Canvas.SetLeft(myRect, Start.X)
Canvas.SetTop(myRect, Start.Y)
SI.cv.Children.Add(myRect)
End Sub
Anstelle der drei Punkte im Code-Schnipsel oben wird die Füllfarbe des Rechtecks gesetzt, wobei das Beispielprogramm neben einer SolidColorBrush-Variante zwei unterschiedliche Farbverläufe vorsieht:
Select Case SI.Farbverlauf
Case 1
myRect.Fill =
Farbverlauf_V1(farbe)
Case 2
myRect.Fill = Farbverlauf_Metallic(farbe)
Case Else
myRect.Fill = New SolidColorBrush(farbe)
End Select
Außerdem erhält das Rechteck drei Eventhandler, sodass es auf Klicks mit der linken und rechten Maustaste, auf das Drehen des Mausrads sowie auf Doppelklicks mit der linken Maustaste reagieren kann. Die Interaktionen des Anwenders sollen folgende Auswirkungen haben:
- Einfacher Klick mit der linken Maustaste: Sortieren der Werte aufsteigend und beim nächsten Klick absteigend, siehe Bild 3.
Links die ursprünglichen Werte, rechts die per Mausklick sortierten Werte. Ein weiterer Linksklick sortiert die Blöcke in umgekehrter Reihenfolge (Bild 3)
Autor
- Doppelklick mit der linken Maustaste: Zusammenfassen aller Werte, die einzeln kleiner als 5 Prozent der Gesamtsumme sind, zum neuen Wert Übrige, siehe Bild 4 und Listing 6.
Ein großer, viele Mini-Werte: Ein Doppelklick links fasst die kleinen Werte zu „Übrige“ zusammen (Bild 4)
Autor
Listing 6: Zusammenfassen kleiner Werte
Sub übrigeZusammenfassen(ByRef wb As List(<br/> Of wbPaar), Optional Prozent As Integer= 5)<br/> Dim sum As Decimal = <br/> wb.Sum(Function(item) item.w)<br/> ' Anhand des übergebenen Parameters Prozent<br/> ' den Schwellenwert min berechnen<br/> Dim min As Decimal = sum * Prozent / 100<br/> ' MiniWerte herausfiltern<br/> Dim MiniWerte As Integer = wb.Where(<br/> Function(item) item.w &lt; min).Count()<br/> If MiniWerte &lt; 2 Then Exit Sub <br/> Dim übrig As Decimal<br/> ' Summiere Werte kleiner als min und <br/> ' lösche die entsprechenden Elemente<br/> übrig = wb.Where(<br/> Function(item) item.w &lt; min).Sum(<br/> Function(item) item.w)<br/> wb.RemoveAll(<br/> Function(item) item.w &lt; min)<br/> wb.Add(New wbPaar With {<br/> .w = übrig, .b = "Übrige"})<br/>End Sub - Einfacher Rechtsklick: Zufälliges Neuanordnen der Reihenfolge der Blöcke, damit zu eng beieinanderstehende Beschriftungen sich voneinander entfernen (Bild 5).
Ungünstige Reihenfolge (links): Ein einfacher Rechtsklick ändert die Abfolge der Daten (Bild 5)
Autor
- Mausrad nach oben drehen: Farbverlauf wechseln; nach unten drehen: Farbset wechseln (Bild 6).
Die Farbsets und -verläufe werden per Mausrad geändert (Bild 6)
Autor
Da Rectangle-Objekte eigentlich kein Doppelklick-Ereignis kennen, wird dieser Handler hier vorgestellt. Nach der Zuordnung des Farbverlaufs wird der Handler hinzugefügt, wobei ihm auch die StapelInfos (SI) übergeben werden:
AddHandler myRect.MouseLeftButtonDown,
Sub(sender As Object, e As MouseButtonEventArgs)
myRect_MouseLeftButtonDown(sender, e, SI)
End Sub
Der Eventhandler sieht wie folgt aus:
Private Sub myRect_MouseLeftButtonDown(
sender As Object, e As MouseButtonEventArgs,
SI As StapelInfos)
If e.ClickCount = 2 Then
übrigeZusammenfassen(SI.wbListe)
Else
If SI.wbListe.Item(1).w <
SI.wbListe.Item(0).w Then
SI.wbListe =
SI.wbListe.OrderBy(
Function(item) item.w)
.ToList()
Else
SI.wbListe = SI.wbListe
.OrderByDescending(
Function(item) item.w)
.ToList()
End If
End If
Stapeln(SI)
End Sub
Steht der Klickzähler auf 2, wird die mit den StapelInfos übergebene wbListe auf- beziehungsweise absteigend sortiert, die StapelInfos werden angepasst und mit Stapeln(SI) das Neuzeichnen des Charts veranlasst. Die beiden übrigen Eventhandler sind ähnlich, wichtigster Unterschied: Anstelle der MouseButtonEventArgs müssen dem Mausrad-Handler die MouseWheelEventArgs übergeben werden.
Fussnoten
- Bernhard Lauer, Donut im Eigenbau, dotnetpro 4-5/2025, Seite 54 ff., http://www.dotnetpro.de/A2504-05VBDonuts
