天天看点

WPF实现雷达图(仿英雄联盟)

WPF开发者QQ群: 340500857  | 微信群 -> 进入公众号主页 加入组织

前言

    有小伙伴提出需要实现雷达图。 

WPF实现雷达图(仿英雄联盟)

由于在WPF中没有现成的雷达图控件,所以我们自己实现一个。

PS:有更好的方式欢迎推荐。

代码如下

一、创建 RadarChart.cs 菜单继承 Control代码如下。

RadarChart.cs实现思路如下

1、RadarArray :存放展示集合 。

2、重写OnRender 。

3、根据三角函数和圆的半径计算出圆上的N个点绘制成多边形

GetPolygonPoint()。

4、在绘制多边形的时候因为需要多个大小不一的多边形,则需要

多次调用GetPolygonPoint()方法,最外层绘制150,中间层100

中心点层 50。

5、DrawPoints() 方法增加了一个bool参数isDrawText是否绘制Text文

本,因为最外侧需要绘制文本。

二、创建RadarChartExample.xaml代码如下

三、创建RadarChartExample.xaml.cs代码如下

ReadrChartExample.cs 思路如下

1、ValueMax 需要注意最小值0,最大值100。

效果预览

数据来源于英雄联盟用户

数据1《屈越》

数据2《方拯》

WPF实现雷达图(仿英雄联盟)
WPF实现雷达图(仿英雄联盟)

更多教程欢迎关注微信公众号:加微信群限时

WPF实现雷达图(仿英雄联盟)

微信群人数太多扫码进不来了,请添加个人微信邀请你(请标注理由)。(yanjinhuawechat)或(W_Feng_aiQ)

WPF开发者QQ群: 340500857 

blogs: https://www.cnblogs.com/yanjinhua

源码Github:https://github.com/yanjinhuagood/WPFDevelopers.git

gitee:https://gitee.com/yanjinhua/WPFDevelopers.git