WPF DevExpress sets Radar chart Radar style, wpfdevexpress

WPF DevExpress sets Radar chart Radar style, wpfdevexpress

 

The ChartControl defined in DevExpress is very good. Many projects use this control directly.

This section describes how to set radar chart styles.

<Grid> <Grid. resources> <DataTemplate x: Key = "LabelItemDataTemplate" DataType = "dxc: SeriesLabelItem"> <Border CornerRadius = "8" Padding = "8, 1" Background = "Transparent"> <! -- <Border. background> <Binding Path = "Color"> <Binding. converter> <dxc: BrushOverlayConverter/> </Binding. converter> </Binding> </Border. background> --> <TextBlock Text = "{Binding Text}"/> </Border> </DataTemplate> </Grid. resources> <dxc: ChartControl Background = "Transparent" BorderBrush = "Transparent" BorderThickness = "0" ToolTipEnabled = "True"> <dxc: RadarDiagram2D x: name = "RadarDiagram2D" DomainBrush = "Transparent" ShapeStyle = "Circle" RotationDirection = "Clockwise" DomainBorderBrush = "# FF0885FF"> <dxc: RadarDiagram2D. axisY> <dxc: RadarAxisY2D GridLinesBrush = "# FF0885FF" GridLinesMinorVisible = "False" Brush = "Transparent"> <dxc: RadarAxisY2D. numericScaleOptions> <dxc: ContinuousNumericScaleOptions AutoGrid = "False" GridSpacing = "20" GridOffset = "0"> </dxc: ContinuousNumericScaleOptions> </dxc: RadarAxisY2D. numericScaleOptions> <dxc: RadarAxisY2D. label> <dxc: AxisLabel Visible = "False"> </dxc: AxisLabel> </dxc: RadarAxisY2D. label> <dxc: RadarAxisY2D. wholeRange> <dxc: Range AutoSideMargins = "False"> </dxc: Range> </dxc: RadarAxisY2D. wholeRange> </dxc: RadarAxisY2D> </dxc: RadarDiagram2D. axisY> <dxc: RadarDiagram2D. axisX> <dxc: RadarAxisX2D GridLinesBrush = "# FF0885FF"> <dxc: RadarAxisX2D. label> <dxc: AxisLabel Foreground = "White" Staggered = "False"> </dxc: AxisLabel> </dxc: RadarAxisX2D. label> </dxc: RadarAxisX2D> </dxc: RadarDiagram2D. axisX> <dxc: RadarDiagram2D. series> <dxc: radareaseries2d Transparency = "0.7" Brush = "GreenYellow"> <dxc: radareaseries2d. markerModel> <dxc: CustomMarker2DModel> <dxc: CustomMarker2DModel. pointTemplate> <ControlTemplate TargetType = "dxc: customModelControl "> <Ellipse Width =" 4 "Height =" 4 "Fill =" GreenYellow "> </Ellipse> </ControlTemplate> </dxc: CustomMarker2DModel. pointTemplate> </dxc: CustomMarker2DModel> </dxc: RadarAreaSeries2D. markerModel> <dxc: radareaseries2d. label> <dxc: SeriesLabel Visible = "True" ConnectorVisible = "False" ElementTemplate = "{StaticResource LabelItemDataTemplate}" Indent = "0" dxc: CircularSeries2D. angle = "0"> </dxc: SeriesLabel> </dxc: RadarAreaSeries2D. label> <dxc: SeriesPoint Argument = "C #" Value = "95" Tag = "30"> </dxc: SeriesPoint> <dxc: seriesPoint Argument = "Java" Value = "20" Tag = "100" type = "codeph" text = "codeph"/> <dxc: seriesPoint Argument = "Python" Value = "60" Tag = "30"/> <dxc: seriesPoint Argument = "Ruby" Value = "80" Tag = "20"/> <dxc: SeriesPoint Argument = "VB. net "Value =" 50 "Tag =" 0 "/> <dxc: SeriesPoint Argument =" VBA "Value =" 90 "Tag =" 62 "/> </dxc: radarAreaSeries2D> </dxc: RadarDiagram2D. series> </dxc: RadarDiagram2D> </dxc: ChartControl> </Grid>View Code

1. Set the subject first, and set the background to transparent.

ShapeStyle = "Polygon" is used to set the radar chart shape. Polygon refers to a Polygon and Circle refers to a Circle.

RotationDirection = "Clockwise" indicates whether the data is displayed Clockwise.

2. Set AxisY

    <dxc:RadarDiagram2D.AxisY>        <dxc:RadarAxisY2D GridLinesBrush="#FF0885FF" GridLinesMinorVisible="False" Brush="Transparent">            <dxc:RadarAxisY2D.NumericScaleOptions>                <dxc:ContinuousNumericScaleOptions AutoGrid="False" GridSpacing="20" GridOffset="0" ></dxc:ContinuousNumericScaleOptions>            </dxc:RadarAxisY2D.NumericScaleOptions>            <dxc:RadarAxisY2D.Label>                <dxc:AxisLabel Visible="False"></dxc:AxisLabel>            </dxc:RadarAxisY2D.Label>            <dxc:RadarAxisY2D.WholeRange>                <dxc:Range MinValue="0" MaxValue="100" AutoSideMargins="False"></dxc:Range>            </dxc:RadarAxisY2D.WholeRange>        </dxc:RadarAxisY2D>    </dxc:RadarDiagram2D.AxisY>

GridLinesMinorVisible: Set whether to add a line,

AutoGrid = "False" GridSpacing = "20" set the scale Interval

Dxc: AxisLabel Visible = "False". You can set whether to display the Y scale.

Of course, Range is the Range. It is okay if it is not set by default.

3. Set AxisX

    <dxc:RadarDiagram2D.AxisX>        <dxc:RadarAxisX2D GridLinesVisible="True" Interlaced="False" GridLinesMinorVisible="False" GridLinesBrush="#FF0885FF">            <dxc:RadarAxisX2D.Label>                <dxc:AxisLabel Foreground="White">                 </dxc:AxisLabel>            </dxc:RadarAxisX2D.Label>        </dxc:RadarAxisX2D>    </dxc:RadarDiagram2D.AxisX>

GridLinesBrush sets the color of the intermediate cross line.

Dxc: AxisLabel: Set the data title Style
4. Data

    <dxc:RadarDiagram2D.Series>        <dxc:RadarAreaSeries2D Transparency="0.7" Brush="GreenYellow">            <dxc:RadarAreaSeries2D.MarkerModel>                <dxc:CustomMarker2DModel>                    <dxc:CustomMarker2DModel.PointTemplate>                        <ControlTemplate TargetType="dxc:CustomModelControl">                            <Ellipse Width="4" Height="4" Fill="GreenYellow"></Ellipse>                        </ControlTemplate>                    </dxc:CustomMarker2DModel.PointTemplate>                </dxc:CustomMarker2DModel>            </dxc:RadarAreaSeries2D.MarkerModel>            <dxc:RadarAreaSeries2D.Label>                <dxc:SeriesLabel Visible="True" ConnectorVisible="False" ElementTemplate="{StaticResource LabelItemDataTemplate}"                                     Indent="0" dxc:CircularSeries2D.Angle="0"></dxc:SeriesLabel>            </dxc:RadarAreaSeries2D.Label>            <dxc:SeriesPoint Argument="C#" Value="95" Tag="30"></dxc:SeriesPoint>            <dxc:SeriesPoint Argument="Java" Value="20" Tag="100" />            <dxc:SeriesPoint Argument="Python" Value="60" Tag="30" />            <dxc:SeriesPoint Argument="Ruby" Value="80" Tag="20"/>            <dxc:SeriesPoint Argument="VB.Net" Value="50" Tag="0"/>            <dxc:SeriesPoint Argument="VBA" Value="90" Tag="62" />        </dxc:RadarAreaSeries2D>    </dxc:RadarDiagram2D.Series>

CustomMarker2DModel. PointTemplate can override the data point template.

Dxc: SeriesLabel Visible = "True" ConnectorVisible = "False" ElementTemplate = "{StaticResource LabelItemDataTemplate}" display style of the Set Data Value

It is worth mentioning that the data Value displayed in the radar chart is Value by default. Can it be set to another Value if needed? The answer is yes. You can store data by using tags or bind data directly, and then bind the parent attribute Tag or bind data to the dxc: RadarAreaSeries2D. Label template.