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

Odoo 8 Graph 视图之雷达图 (Radar\Spider)
据说7.0是有Radar图的,但是8以后被阉割掉了.自己动手 ,丰衣足食. 经过一天的努力,雷达图现已成功加入群共享套餐.
关于echarts生成雷达图的一些参数介绍
export const industryFactorOption = { title: { text: '雷达图', textStyle: { color: 'rgba(221,221,221,1) ...
用pChart生成雷达图图片
需求 :由于工作需要,需要在一张背景图上添加这一张雷达图,之后图片可以在微信中长按保存.所以说我必须生成一张带有雷达图的图片第一反应是用百度echars雷达图做动态显示,之后截图.考虑到工作量和效率, ...
python批量制作雷达图
老板要画雷达图,但是数据好多组怎么办?不能一个一个点excel去画吧,那么可以利用python进行批量制作,得到样式如下: 首先制作一个演示的excel,评分为excel随机数生成: 1 =INT(( ...
echarts雷达图点击事件
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...
第三方Charts绘制图表四种形式:饼状图，雷达图，柱状图，直线图
对于第三方框架Charts(Swift版本,在OC项目中需要添加桥接头文件),首先要解决在项目中集成的问题,集成步骤: 一.下载Charts框架下载地址:https://github.com/dan ...
echarts雷达图点击事件包含（2.x，3.85，4.02）测试
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...
数据可视化基础专题（十二）：Matplotlib 基础（四）常用图表（二）气泡图、堆叠图、雷达图、饼图、
1 气泡图气泡图和上面的散点图非常类似,只是点的大小不一样,而且是通过参数 s 来进行控制的,多的不说,还是看个示例: 例子一: import matplotlib.pyplot as plt im ...
利用matlibplot绘制雷达图
之前在一些数据分析案例中看到用 Go 语言绘制的雷达图,非常的漂亮,就想着用matlibplot.pyplot也照着画一个,遗憾的是matlibplot.pyplot模块中没有直接绘制雷达图的函数,不 ...

随机推荐

iOS开发的知名大牛博客小汇
王巍的博客:王巍目前在日本横滨任职于LINE.工作内容主要进行Unity3D开发,8小时之外经常进行iOS/Mac开发.他的陈列柜中已有多款应用,其中番茄工作法工具非常棒.http://onevcat ...
前端开发面试题收集(html部分)
1.问:<keygen>是正确的HTML5标签吗? 答:是. <keygen> 标签规定用于表单的密钥对生成器字段.当提交表单时,私钥存储在本地,公钥发送到服务器. 2.问:& ...
SQLServer 2016安装时的错误：Polybase要求安装Oracle JRE 7更新51或更高版本
异常处理汇总-数据库系列 http://www.cnblogs.com/dunitian/p/4522990.html 水印就不加了,在老家~(另一篇文章好像没发布成功,简单说下,2016安装完毕是 ...
新项目的CQRS设计
刚换了个工作,闲话不说了.前两天开始一个新项目,大概是一个任务管理系统,由使用者来选取任务,执行任务,反馈完成,我大概做了些设计,本来是打算看能不能在新公司铺垫一下DDD,不过后来这块功能没分到我这, ...
c#面向对象基础技能——学习笔记（二）基于OOP思想研究对象的【属性】
字段(成员变量): 字段只能从对象中访问实例字段,无法直接从类中访问(换言之,不创建实例就不能访问),可以理解为:字段一般用在内部数据交互使用,当需要为外部提供数据时,(要优先使用自动实现的属性而不是 ...
CentOS下安装hadoop
CentOS下安装hadoop 用户配置添加用户 adduser hadoop passwd hadoop 权限配置 chmod u+w /etc/sudoers vi /etc/sudoers 在 ...
设计模式（十四）模板方法模式（Template Pattern）
一.引言提到模板,大家肯定不免想到生活中的“简历模板”.“论文模板”.“Word中模版文件”等,在现实生活中,模板的概念就是——有一个规定的格式,然后每个人都可以根据自己的需求或情况去更新它,例如简 ...
HTML5新增及移除的元素
HTML经过10多年的发展,其元素经历了废弃与不断重新定义的过程.为了更好的处理现在的互联网应用,HTML5新增了图形绘制.多媒体播放.页面结构.应用程序存储.网络工作等新元素.http://hove ...
linux中字体的安装以及Terminal字体重叠问题解决
安装wps的时候,经常会提示你系统字体缺失,这些字体网上都有,就不分享了,直接讲安装吧. 就比如这个Wingdings字体,在字体目录中新建一个目录Wingdings,将ttf字体文件复制进去,在终端 ...
Android 手机卫士8--删除通话记录
1.编写代码需要注意bug: 再删除通话记录的时候,删除的是以前的通话记录,本次拦截下来的电话号码,通话记录没有删除?????? 问题原因:数据库中本次通话记录的电话号码还没有插入,就做了删除操作 2 ...

WPF DevExpress 设置雷达图Radar样式

WPF DevExpress 设置雷达图Radar样式的更多相关文章

随机推荐

热门专题