WPF DevExpress 设置雷达图Radar样式
DevExpress中定义的ChartControl很不错,很多项目直接使用这种控件。
本节讲述雷达图的样式设置

<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: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> </dxc:RadarDiagram2D> </dxc:ChartControl> </Grid>
1、先设置主体,首先背景设置成透明
ShapeStyle="Polygon"是设置雷达图的形状,Polygon指多边形,Circle就是圆圈了。
RotationDirection="Clockwise",指是数据否顺时针显示
2、设置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设置是否补充线条,
AutoGrid="False" GridSpacing="20"设置刻度间隔
dxc:AxisLabel Visible="False"这个可以设置是否显示Y刻度
Range 当然就是范围了,默认不设置也没问题
3、设置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设置中间交叉线的颜色。
dxc:AxisLabel设置数据标题的样式
4、数据
<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可以重写数据点的模板
dxc:SeriesLabel Visible="True" ConnectorVisible="False" ElementTemplate="{StaticResource LabelItemDataTemplate}" 这个设置数据值的显示样式
值得一提的是,雷达图中数据值默认显示的是Value,那如果需要的话,是否可以设置为其它值呢?答案是可以的,通过用Tag存储数据或者直接用数据绑定,然后在dxc:RadarAreaSeries2D.Label的模板中绑定父属性Tag或者绑定数据就行了。
分类:
WPF/Silverlight
标签:
DevExpress
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)