API: Chart Controls

API-Referenz für Diagramme und Visualisierungen.

TWvdSChart

Basis-Chart-Control für alle Diagrammtypen.

Namespace

WvdS.UI.Controls.Charts

PXAML

<Chart Title="Sales Overview">
  <Chart.Series>
    <LineSeries Title="Revenue"
                ArgumentDataMember="Month"
                ValueDataMember="Revenue"
                DataSource="{Binding SalesData}" />
    <BarSeries Title="Orders"
               ArgumentDataMember="Month"
               ValueDataMember="OrderCount"
               DataSource="{Binding SalesData}" />
  </Chart.Series>
  <Chart.Legend Position="Right" />
</Chart>

Properties

Property Typ Default Beschreibung
Title string | Diagrammtitel | ^ Series | TWvdSSeriesCollection | nil | Datenreihen | ^ Legend | TWvdSLegend | nil | Legende | ^ AxisX | TWvdSAxis | nil | X-Achse | ^ AxisY | TWvdSAxis | nil | Y-Achse | ^ Palette | TWvdSPalette | nil | Farbpalette | ^ EnableZoom | Boolean | False | Zoom aktiviert | ^ EnablePan | Boolean | False | Schwenken aktiviert | ==== Events ==== | Event | Signatur | Beschreibung | ^ OnSeriesClick | TSeriesClickEvent | Klick auf Datenpunkt | ^ OnLegendClick | TLegendClickEvent | Klick auf Legende | —- ===== TWvdSSparkline ===== Kompakte Inline-Diagramme. ==== Namespace ==== WvdS.UI.Controls.Charts ==== PXAML ==== <code xml> <Sparkline Type=„Line“ Data=„{Binding TrendData}“ Width=„100“ Height=„20“ /> <Sparkline Type=„Bar“ Data=„{Binding Values}“ HighlightMin=„True“ HighlightMax=„True“ /> </code> ==== Properties ==== | Property | Typ | Default | Beschreibung | ^ Type | TWvdSSparklineType | stLine | Line, Bar, WinLoss, Area | ^ Data | TDoubleArray | nil | Datenpunkte | ^ HighlightMin | Boolean | False | Minimum hervorheben | ^ HighlightMax | Boolean | False | Maximum hervorheben | ^ NegativeColor | TWvdSColor | clRed | Farbe für negative Werte | —- ===== Series-Typen ===== Alle Series teilen gemeinsame Basis-Properties: | Property | Typ | Beschreibung | ^ Title | string | Reihen-Titel | ^ DataSource | IEnumerable | Datenquelle | ^ ArgumentDataMember | string | X-Wert Feld | ^ ValueDataMember | string | Y-Wert Feld | ^ Color | TWvdSColor | Farbe | ^ Visible | Boolean | Sichtbar | —- ===== TWvdSLineSeries ===== Liniendiagramm. ==== PXAML ==== <code xml> <LineSeries Title=„Temperature“ ArgumentDataMember=„Date“ ValueDataMember=„Temp“ MarkerType=„Circle“ LineStyle=„Solid“ /> </code> ==== Properties ==== | Property | Typ | Default | Beschreibung | ^ MarkerType | TWvdSMarkerType | mtNone | None, Circle, Square, Triangle | ^ MarkerSize | Integer | 8 | Marker-Größe | ^ LineStyle | TWvdSLineStyle | lsSolid | Solid, Dash, Dot | ^ LineWidth | Integer | 2 | Linienbreite | —- ===== TWvdSAreaSeries ===== Flächendiagramm. ==== PXAML ==== <code xml> <AreaSeries Title=„Revenue“ ArgumentDataMember=„Month“ ValueDataMember=„Amount“ Opacity=„0.7“ /> </code> ==== Properties ==== | Property | Typ | Default | Beschreibung | ^ Opacity | Double | 0.5 | Transparenz (0-1) | ^ ShowLine | Boolean | True | Obere Linie anzeigen | —- ===== TWvdSBarSeries ===== Balkendiagramm. ==== PXAML ==== <code xml> <BarSeries Title=„Sales“ ArgumentDataMember=„Product“ ValueDataMember=„Quantity“ BarWidth=„0.8“ /> </code> ==== Properties ==== | Property | Typ | Default | Beschreibung | ^ BarWidth | Double | 0.6 | Balkenbreite (0-1) | ^ CornerRadius | Integer | 0 | Eckenradius | ^ ShowLabels | Boolean | False | Werte anzeigen | —- ===== TWvdSPieSeries ===== Kreisdiagramm. ==== PXAML ==== <code xml> <Chart> <PieSeries ArgumentDataMember=„Category“ ValueDataMember=„Value“ InnerRadius=„0“ StartAngle=„0“ ShowLabels=„True“ /> </Chart> </code> ==== Properties ==== | Property | Typ | Default | Beschreibung | ^ InnerRadius | Double | 0 | Donut-Loch (0=Pie) | ^ StartAngle | Double | 0 | Startwinkel | ^ ShowLabels | Boolean | True | Labels anzeigen | ^ ExplodeOffset | Double | 0 | Segment-Abstand | —- ===== TWvdSFunnelSeries ===== Trichterdiagramm für Sales Funnels. ==== PXAML ==== <code xml> <Chart> <FunnelSeries ArgumentDataMember=„Stage“ ValueDataMember=„Count“ NeckHeight=„0.3“ NeckWidth=„0.3“ /> </Chart> </code> ==== Properties ==== | Property | Typ | Default | Beschreibung | ^ NeckHeight | Double | 0.3 | Halshöhe (0-1) | ^ NeckWidth | Double | 0.3 | Halsbreite (0-1) | ^ GapRatio | Double | 0 | Abstand zwischen Segmenten | —- ===== TWvdSScatterSeries ===== Streudiagramm. ==== PXAML ==== <code xml> <ScatterSeries ArgumentDataMember=„X“ ValueDataMember=„Y“ MarkerType=„Circle“ MarkerSize=„10“ /> </code> —- ===== TWvdSBubbleSeries ===== Blasendiagramm. ==== PXAML ==== <code xml> <BubbleSeries ArgumentDataMember=„X“ ValueDataMember=„Y“ SizeDataMember=„Size“ MinBubbleSize=„10“ MaxBubbleSize=„50“ /> </code> ==== Properties ==== | Property | Typ | Default | Beschreibung | ^ SizeDataMember | string | Feld für Blasengröße
MinBubbleSize Integer 10 Minimale Blasengröße
MaxBubbleSize Integer 50 Maximale Blasengröße

TWvdSCandlestickSeries

Candlestick-Chart für Börsendaten.

PXAML

<CandlestickSeries ArgumentDataMember="Date"
                   OpenDataMember="Open"
                   HighDataMember="High"
                   LowDataMember="Low"
                   CloseDataMember="Close" />

Properties

Property Typ Default Beschreibung
OpenDataMember string | Eröffnungskurs | ^ HighDataMember | string | Höchstkurs
LowDataMember string | Tiefstkurs | ^ CloseDataMember | string | Schlusskurs
UpColor TWvdSColor clGreen Farbe bei Gewinn
DownColor TWvdSColor clRed Farbe bei Verlust

TWvdSRadarSeries

Radar/Spider-Diagramm.

PXAML

<Chart ChartType="Radar">
  <RadarSeries ArgumentDataMember="Skill"
               ValueDataMember="Score"
               Fill="True"
               FillOpacity="0.3" />
</Chart>

TWvdSTreeMapSeries

TreeMap-Visualisierung.

PXAML

<Chart ChartType="TreeMap">
  <TreeMapSeries LabelDataMember="Name"
                 ValueDataMember="Size"
                 GroupDataMember="Category" />
</Chart>

TWvdSSankeyDiagram

Sankey-Flussdiagramm.

PXAML

<SankeyDiagram DataSource="{Binding FlowData}"
               SourceDataMember="From"
               TargetDataMember="To"
               WeightDataMember="Value" />

Properties

Property Typ Default Beschreibung
SourceDataMember string | Quell-Knoten | ^ TargetDataMember | string | Ziel-Knoten
WeightDataMember string '' Flussstärke

TWvdSWaterfallSeries

Wasserfall-Diagramm.

PXAML

<WaterfallSeries ArgumentDataMember="Category"
                 ValueDataMember="Change"
                 StartValue="1000"
                 ShowTotal="True" />

Properties

Property Typ Default Beschreibung
StartValue Double 0 Startwert
ShowTotal Boolean True Gesamtsumme anzeigen
PositiveColor TWvdSColor clGreen Farbe positiv
NegativeColor TWvdSColor clRed Farbe negativ

Siehe auch

Zuletzt geändert: den 29.01.2026 um 15:13