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 DevExpress 设置雷达图Radar样式的更多相关文章

  1. Odoo 8 Graph 视图 之 雷达图 (Radar\Spider)

    据说7.0是有Radar图的,但是8以后被阉割掉了.自己动手 ,丰衣足食. 经过一天的努力,雷达图现已成功加入群共享套餐.

  2. 关于echarts生成雷达图的一些参数介绍

    export const industryFactorOption = { title: { text: '雷达图', textStyle: { color: 'rgba(221,221,221,1) ...

  3. 用pChart生成雷达图图片

    需求 :由于工作需要,需要在一张背景图上添加这一张雷达图,之后图片可以在微信中长按保存.所以说我必须生成一张带有雷达图的图片第一反应是用百度echars雷达图做动态显示,之后截图.考虑到工作量和效率, ...

  4. python批量制作雷达图

    老板要画雷达图,但是数据好多组怎么办?不能一个一个点excel去画吧,那么可以利用python进行批量制作,得到样式如下: 首先制作一个演示的excel,评分为excel随机数生成: 1 =INT(( ...

  5. echarts雷达图点击事件

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...

  6. 第三方Charts绘制图表四种形式:饼状图,雷达图,柱状图,直线图

    对于第三方框架Charts(Swift版本,在OC项目中需要添加桥接头文件),首先要解决在项目中集成的问题,集成步骤: 一.下载Charts框架 下载地址:https://github.com/dan ...

  7. echarts雷达图点击事件 包含(2.x,3.85,4.02)测试

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...

  8. 数据可视化基础专题(十二):Matplotlib 基础(四)常用图表(二)气泡图、堆叠图、雷达图、饼图、

    1 气泡图 气泡图和上面的散点图非常类似,只是点的大小不一样,而且是通过参数 s 来进行控制的,多的不说,还是看个示例: 例子一: import matplotlib.pyplot as plt im ...

  9. 利用matlibplot绘制雷达图

    之前在一些数据分析案例中看到用 Go 语言绘制的雷达图,非常的漂亮,就想着用matlibplot.pyplot也照着画一个,遗憾的是matlibplot.pyplot模块中没有直接绘制雷达图的函数,不 ...

随机推荐

  1. 通过Gradle为APK瘦身

    引言:在过去几年中,APK 文件的大小曾急剧增长态势.一般来说,其原因如下:Android开发者获取了更多的依赖库,添加了更多的密度,Apps 增加了更多的功能.但实际上我们应该让APKs 尽可能的小 ...

  2. [原创]MYSQL的简单入门

    MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...

  3. MongoDB 存储引擎:WiredTiger和In-Memory

    存储引擎(Storage Engine)是MongoDB的核心组件,负责管理数据如何存储在硬盘(Disk)和内存(Memory)上.从MongoDB 3.2 版本开始,MongoDB 支持多数据存储引 ...

  4. VS2010中dll不可用问题

    最近做项目的时候,深圳那边提供了一个算法.算法在那边跑的好的很,但是在我这边怎么跑都跑不起来,总是报错:说找不到dll. 1.第一种想法:找不到dll,是不是dll放的位置不对.找了一下目录,导入的路 ...

  5. LATEX数学公式基本语法

    TEX 是Donald E. Knuth 编写的一个以排版文章及数学公式为目标的计算机程序.TEX的版本号不断趋近于π,现在为3.141592.由Pascal 语言写成,特点: 免费.输出质量高.擅长 ...

  6. 支持高并发的IIS Web服务器常用设置

    适用的IIS版本:IIS 7.0, IIS 7.5, IIS 8.0 适用的Windows版本:Windows Server 2008, Windows Server 2008 R2, Windows ...

  7. 再谈JavaScript闭包及应用

    .title-bar { width: 80%; height: 35px; padding-left: 35px; color: white; line-height: 35px; font-siz ...

  8. 使用SignalR实现服务端消息推送

    概述 这篇文章参考的是Server Broadcast with SignalR 2这篇教程,很不错的一篇教程,如果有兴趣的话可以查看原文,今天记录下来作为一个学习笔记,这样今后翻阅会更方便一点. 这 ...

  9. JavaScript触屏滑动API介绍

    随着触屏手机.平板电脑的普及和占有更多用户和使用时间,触屏的触碰.滑动等事件也成为javaScript开发不可避免的知识,现在何问起就和大家一起学习js的触屏操作,js的触屏touchmove事件,为 ...

  10. 创建虚拟目录失败,必须为服务器名称指定“localhost”?看进来!!

    没废话,直接讲! 关于微信开发过程,远程调试后,再次打开vs出现项目加载失败的解决办法! 上图: 这图应该不陌生,你肯定打开iis把绑定的域名给干掉了.这个提示很坑人,简直就是坑爹!!!fck!! 来 ...