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或者绑定数据就行了。
 
 
时间: 2024-10-20 19:19:17

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

WPF之设置多控件样式

需求是这样的,系统要监测风,雨,雪多个自然灾害.在界面上有这些灾害突发的报警框.本来报警框的背景是由于级别不同显示不同的颜色,但是现在发现,当报警背景为蓝色是,黑色字体 看不出来.又由于技术文档上规定背景颜色了,所以现在只能改变所有lbl的字体.而这些控件都是WPF自定义控件的一些 元素. 要实现这个功能,有很多种方式.WPF的好处 就是既可以像Html+CSS 去设置, 也可以像Winform一样去更改.重点说一下解决方式. 这个功能要调用的有大概10多处,每个窗体有6个左右lbl,所以每次给

用pChart生成雷达图图片

需求 :由于工作需要,需要在一张背景图上添加这一张雷达图,之后图片可以在微信中长按保存.所以说我必须生成一张带有雷达图的图片第一反应是用百度echars雷达图做动态显示,之后截图.考虑到工作量和效率,放弃.改为pchart 直接生成雷达图图片 然后用imagick拓展贴到背景图上面.由于imagick攻略比较详细,这里不做赘述,而pchart中文文档则比较匮乏,所以简略介绍下. 第一步 在pchart官网下载类库 http://www.pchart.net/download  建议在本地环境调试

python批量制作雷达图

老板要画雷达图,但是数据好多组怎么办?不能一个一个点excel去画吧,那么可以利用python进行批量制作,得到样式如下: 首先制作一个演示的excel,评分为excel随机数生成: 1 =INT((RAND()+4)*10)/10 加入标签等得到的excel样式如下(部分,共计32行): 那么接下来就是打开python写码了,本文是基于python3.4进行编写 1 wb = load_workbook(filename=r'C:\Users\Administrator\Desktop\数据指

echarts雷达图点击事件

最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype html> <html lang="us"> <head> <meta charset="utf-8"> <title></title> <script src="http://echa

利用matlibplot绘制雷达图

之前在一些数据分析案例中看到用 Go 语言绘制的雷达图,非常的漂亮,就想着用matlibplot.pyplot也照着画一个,遗憾的是matlibplot.pyplot模块中没有直接绘制雷达图的函数,不过可以基于‘polar’图形特征来改进,下面就记录一下如何绘制雷达图. import numpy as np import matplotlib.pyplot as plt # 用于正常显示中文 plt.rcParams['font.sans-serif'] = 'SimHei' #用于正常显示符号

javascript雷达图/星形图/极坐标图Radar &amp; Polar chart介绍

Radar & Polar chart 控件为软件开发人员提供了雷达图/星形图/极坐标图,它以轴上的同一个点为起点,绘制出三个或更多的变量. 具体功能: 任意多的轴 动态或静态 简单.堆积.100%堆积的图表 网格线能转换为圆环 在轴之间进行填充 以自定义范围值填充 跨平台 导出为图像 可通过JavaScript进行控制 可直接通过HTML文件进行设置和数据交换 自定义图像和Flash(动态)背景 无限的标签 可旋转的标签 可使用预设频率重新加载数据 格式任何气球文本 Amcharts可以从简单

WPF:设置DataGrid中DataGridColumn列的普通样式和编辑样式

WPF:设置DataGrid中DataGridColumn列的普通样式和编辑样式 时间:2012-02-01 20:28来源:博客园 作者:刘圆圆 点击:1570次 0:DataGridColumn类型的继承树 DataGridColumn的派生类: 一般情况下DataGridBoundColumn和DataGridComboBoxColumn足以满足多数列的样式,如果需要自定义列样式,则可以使用DataGridTemplateColumn类型. 在设置列编辑样式之前,我们先创建一个简单的Dat

WPF后台设置xaml控件的样式System.Windows.Style

WPF后台设置xaml控件的样式System.Windows.Style 摘-自 :感谢 作者: IT小兵   http://3w.suchso.com/projecteac-tual/wpf-zhishi-houtai-shezhi-style.html Style myStyle = (Style)this.FindResource("TabItemStyle");//TabItemStyle 这个样式是引用的资源文件中的样式名称 静态资源在第一次编译后即确定其对象或值,之后不能对

wpf 中DataGrid 控件的样式设置及使用

本次要实现的效果为: 这个DataGrid需要绑定一个集合对象,所以要先定义一个Experience类,包含三个字段 /// <summary> /// 定义工作经历类 /// </summary> public class Experience { /// <summary> /// 获取或设置工作的起始时间 /// </summary> public string Start { get; set; } /// <summary> /// 获