API: Chart Controls

API Reference for charts and visualizations.

TWvdSChart

Base chart control for all chart types.

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 Type Default Description
Title string | Chart title | ^ Series | TWvdSSeriesCollection | nil | Data series | ^ Legend | TWvdSLegend | nil | Legend | ^ AxisX | TWvdSAxis | nil | X-axis | ^ AxisY | TWvdSAxis | nil | Y-axis | ^ Palette | TWvdSPalette | nil | Color palette | ^ EnableZoom | Boolean | False | Zoom enabled | ^ EnablePan | Boolean | False | Panning enabled | ==== Events ==== | Event | Signature | Description | ^ OnSeriesClick | TSeriesClickEvent | Click on data point | ^ OnLegendClick | TLegendClickEvent | Click on legend | —- ===== TWvdSSparkline ===== Compact inline charts. ==== 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 | Type | Default | Description | ^ Type | TWvdSSparklineType | stLine | Line, Bar, WinLoss, Area | ^ Data | TDoubleArray | nil | Data points | ^ HighlightMin | Boolean | False | Highlight minimum | ^ HighlightMax | Boolean | False | Highlight maximum | ^ NegativeColor | TWvdSColor | clRed | Color for negative values | —- ===== Series Types ===== All series share common base properties: | Property | Type | Description | ^ Title | string | Series title | ^ DataSource | IEnumerable | Data source | ^ ArgumentDataMember | string | X-value field | ^ ValueDataMember | string | Y-value field | ^ Color | TWvdSColor | Color | ^ Visible | Boolean | Visible | —- ===== TWvdSLineSeries ===== Line chart. ==== PXAML ==== <code xml> <LineSeries Title=„Temperature“ ArgumentDataMember=„Date“ ValueDataMember=„Temp“ MarkerType=„Circle“ LineStyle=„Solid“ /> </code> ==== Properties ==== | Property | Type | Default | Description | ^ MarkerType | TWvdSMarkerType | mtNone | None, Circle, Square, Triangle | ^ MarkerSize | Integer | 8 | Marker size | ^ LineStyle | TWvdSLineStyle | lsSolid | Solid, Dash, Dot | ^ LineWidth | Integer | 2 | Line width | —- ===== TWvdSAreaSeries ===== Area chart. ==== PXAML ==== <code xml> <AreaSeries Title=„Revenue“ ArgumentDataMember=„Month“ ValueDataMember=„Amount“ Opacity=„0.7“ /> </code> ==== Properties ==== | Property | Type | Default | Description | ^ Opacity | Double | 0.5 | Transparency (0-1) | ^ ShowLine | Boolean | True | Show top line | —- ===== TWvdSBarSeries ===== Bar chart. ==== PXAML ==== <code xml> <BarSeries Title=„Sales“ ArgumentDataMember=„Product“ ValueDataMember=„Quantity“ BarWidth=„0.8“ /> </code> ==== Properties ==== | Property | Type | Default | Description | ^ BarWidth | Double | 0.6 | Bar width (0-1) | ^ CornerRadius | Integer | 0 | Corner radius | ^ ShowLabels | Boolean | False | Show values | —- ===== TWvdSPieSeries ===== Pie chart. ==== PXAML ==== <code xml> <Chart> <PieSeries ArgumentDataMember=„Category“ ValueDataMember=„Value“ InnerRadius=„0“ StartAngle=„0“ ShowLabels=„True“ /> </Chart> </code> ==== Properties ==== | Property | Type | Default | Description | ^ InnerRadius | Double | 0 | Donut hole (0=Pie) | ^ StartAngle | Double | 0 | Start angle | ^ ShowLabels | Boolean | True | Show labels | ^ ExplodeOffset | Double | 0 | Segment offset | —- ===== TWvdSFunnelSeries ===== Funnel chart for sales funnels. ==== PXAML ==== <code xml> <Chart> <FunnelSeries ArgumentDataMember=„Stage“ ValueDataMember=„Count“ NeckHeight=„0.3“ NeckWidth=„0.3“ /> </Chart> </code> ==== Properties ==== | Property | Type | Default | Description | ^ NeckHeight | Double | 0.3 | Neck height (0-1) | ^ NeckWidth | Double | 0.3 | Neck width (0-1) | ^ GapRatio | Double | 0 | Gap between segments | —- ===== TWvdSScatterSeries ===== Scatter chart. ==== PXAML ==== <code xml> <ScatterSeries ArgumentDataMember=„X“ ValueDataMember=„Y“ MarkerType=„Circle“ MarkerSize=„10“ /> </code> —- ===== TWvdSBubbleSeries ===== Bubble chart. ==== PXAML ==== <code xml> <BubbleSeries ArgumentDataMember=„X“ ValueDataMember=„Y“ SizeDataMember=„Size“ MinBubbleSize=„10“ MaxBubbleSize=„50“ /> </code> ==== Properties ==== | Property | Type | Default | Description | ^ SizeDataMember | string | Bubble size field
MinBubbleSize Integer 10 Minimum bubble size
MaxBubbleSize Integer 50 Maximum bubble size

TWvdSCandlestickSeries

Candlestick chart for stock data.

PXAML

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

Properties

Property Type Default Description
OpenDataMember string | Open price | ^ HighDataMember | string | High price
LowDataMember string | Low price | ^ CloseDataMember | string | Close price
UpColor TWvdSColor clGreen Color on gain
DownColor TWvdSColor clRed Color on loss

TWvdSRadarSeries

Radar/Spider chart.

PXAML

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

TWvdSTreeMapSeries

TreeMap visualization.

PXAML

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

TWvdSSankeyDiagram

Sankey flow diagram.

PXAML

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

Properties

Property Type Default Description
SourceDataMember string | Source node | ^ TargetDataMember | string | Target node
WeightDataMember string '' Flow weight

TWvdSWaterfallSeries

Waterfall chart.

PXAML

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

Properties

Property Type Default Description
StartValue Double 0 Start value
ShowTotal Boolean True Show total
PositiveColor TWvdSColor clGreen Positive color
NegativeColor TWvdSColor clRed Negative color

See Also

Zuletzt geändert: on 2026/01/29 at 10:32 PM