iOS雷达图 - 简书
最近公司要做一个医学考试类的App，里面有一个能力分析的雷达图，leader让我来封装这个雷达图。这个模块是在做测心率模块期间完成的，也是使用的CoreGraphics来实现的。
之前并不知道雷达图长什么样，这个是我在百度上下载的。大概就长这个样子，我们要用的和这个不太一样，没有文字和介绍。
写这个的时候，没有查阅什么资料，所以不太清楚别人是怎么做的。
我是从角度出发的，例如上面的图中，有5个能力模块，5个能力模块的分支（后面就叫它主干了，我也不知道叫什么）两两的夹角都是相同的。
首先把一个主干放在y轴上，这个主干绕原点 O一周是2π,被5个主干5等分，那么每一个夹角都是2π/5。
主干的长是相同的，可以通过正弦和余弦来求出每个主干落点的坐标,再从原点O到落点画线。
之后的网格和能力分布的画法也是这个思路，同样是从y轴上的主干取点，不同的是斜边的长度会根据网格间距和能力百分比变化，如下图：
不知道大家还记不记得正弦和余弦是啥了，我是已经还给数学老师了(虽然初中数学也是年组第一的)，刚好写这个的前一天在看高数。。
正弦： sin? = 对边/斜边
余弦： cos? = 临边/斜边
初始化，定义几个属性后面使用
// 元素数组
@property (strong, nonatomic) NSArray &Element *&*
这是一个放Model的数组，用来储存能力模块信息
// 每一个主干的长度
static float element_w = 0;
// 主干到View预留的空白部分宽度
static float border_w
// 中心点的横坐标
static float center_w
// 中心点的纵坐标
static float center_h
- (instancetype)initWithFrame:(CGRect)frame Elements:(NSArray &Element *&*)elements {
if (self = [super initWithFrame:frame]) {
self.backgroundColor = [UIColor whiteColor];
self.elements =
if (self.frame.size.width&self.frame.size.height)
element_w = (self.frame.size.height-border_w*2)/2;
element_w = (self.frame.size.width-border_w*2)/2;
center_w = self.frame.size.width/2;
center_h = self.frame.size.height/2;
- (void)buildRadarMap {
if (self.elements.count&3)
// 获取画布
CGContextRef context = UIGraphicsGetCurrentContext();
// 划线颜色
if (self.trunkLineColor)
CGContextSetStrokeColorWithColor(context, self.trunkLineColor.CGColor);
CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
// 划线宽度
if (self.lineWidth)
CGContextSetLineWidth(context, self.lineWidth);
CGContextSetLineWidth(context, 1);
// 起点坐标
CGContextMoveToPoint(context, center_w, center_h);
// 第一条线
CGContextAddLineToPoint(context, center_w, center_h - element_w);
//画元素主干
for (int i = 1; i &self.elements. i++) {
double pi = (M_PI*2.0/(self.elements.count))*i;
// 计算主干落点坐标
Coordinate(pi, element_w, center_w, center_h,&x, &y);
// 设置每次的初始点坐标
CGContextMoveToPoint(context, center_w, center_h);
// 设置终点坐标
CGContextAddLineToPoint(context, x, y);
CGContextStrokePath(context);
注：self.trunkLineColor是我设置的一个外部可控主干的颜色，如果尾部没有设置就给默认值。self.lineWidth就是先的宽度了。
雷达图分成几等份 默认1等份（最外面一圈的框框）
@property (assign, nonatomic)
雷达线的宽度 默认1
@property (assign, nonatomic) float lineW
主干线颜色 默认黑色
@property (strong, nonatomic) UIColor *trunkLineC
分等份线颜色 默认黑色
@property (strong, nonatomic) UIColor *partLineC
比例线颜色 默认绿色
@property (strong, nonatomic) UIColor *percentLineC
- (void)setTrunkLineColor:(UIColor *)trunkLineColor {
_trunkLineColor =trunkLineC
[self setNeedsDisplay];
- (void)setPartLineColor:(UIColor *)partLineColor {
_partLineColor = partLineC
[self setNeedsDisplay];
- (void)setPercentLineColor:(UIColor *)percentLineColor {
_percentLineColor = percentLineC
[self setNeedsDisplay];
设置set方法调用setNeedsDisplay外部设置颜色的时候会调用drawRect:
3.计算落点的方法
#pragma mark - 算落点坐标
void Coordinate (double pi, float l, float c_w , float c_h, float *x, float *y) {
if (pi & M_PI_2) {
*x = c_w + sin(pi)*l;
*y = c_h - cos(pi)*l;
} else if (pi == M_PI_2) {
*x = c_w + sin(pi)*l;
*y = c_h + cos(pi)*l;
} else if (pi & M_PI) {
*x = c_w + sin(pi)*l;
*y = c_h - cos(pi)*l;
} else if (pi == M_PI) {
*x = c_w + sin(pi)*l;
*y = c_h + cos(pi)*l;
} else if (pi & M_PI_2*3) {
*x = c_w + sin(pi)*l;
*y = c_h - cos(pi)*l;
} else if (pi == M_PI_2*3) {
*x = c_w + sin(pi)*l;
*y = c_h + cos(pi)*l;
*x = c_w + sin(pi)*l;
*y = c_h - cos(pi)*l;
原点横坐标
原点纵坐标
落点横坐标
落点纵坐标
坐标系和View的Rect还不太一样，比如在坐标系第二、三象限的y是负值，而我们要的坐标的y是越往下越大，所以我们要c_h+(-y)，x同理。
4.画网格，也就是要把主干分成几等分，为了更灵活我也设置了可以从外部设置。
雷达图分成几等份 默认1等份（最外面一圈的框框）
@property (assign, nonatomic)
- (void)setPart:(float)part {
[self setNeedsDisplay];
#pragma mark - 画雷达分等分图
- (void)buildPart {
float r = self.part&=1?1:self.
// 获取画布
CGContextRef context = UIGraphicsGetCurrentContext();
// 划线颜色
if (self.partLineColor)
CGContextSetStrokeColorWithColor(context, self.partLineColor.CGColor);
CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
// 划线宽度
if (self.lineWidth)
CGContextSetLineWidth(context, self.lineWidth);
CGContextSetLineWidth(context, 1);
// 话分割线
for (int j = 0; j&r; j++) {
// 设置每次的初始点坐标
CGContextMoveToPoint(context, center_w, border_w);
// 画百分比分部
for (int i = 1; i&=self.elements. i++) {
double pi = (M_PI*2.0/(self.elements.count))*i;
Coordinate(pi,element_w*(r-j)/r, center_w, center_h,&x, &y);
if (i == 1) {
CGContextMoveToPoint(context, center_w, border_w + element_w*j/r);
if (i == self.elements.count) {
CGContextAddLineToPoint(context, center_w, border_w + element_w*j/r);
CGContextAddLineToPoint(context, x, y);
CGContextStrokePath(context);
原理和画主干是一样的，只不过是每次的起点变成了上一个点的落点。把主干的长度进行了分割
5.画能力占比线
#pragma mark - 画百分比占比线
- (void)buildPercent {
// 获取画布
CGContextRef context = UIGraphicsGetCurrentContext();
// 划线颜色
if (self.percentLineColor)
CGContextSetStrokeColorWithColor(context, self.percentLineColor.CGColor);
CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
// 划线宽度
if (self.lineWidth)
CGContextSetLineWidth(context, self.lineWidth);
CGContextSetLineWidth(context, 1);
Element *ele = self.elements[0];
CGContextMoveToPoint(context, center_w, border_w +element_w*(1-ele.percent));
for (int i = 1; i&=self.elements. i++) {
if (i == self.elements.count) {
//终点，最终回到开始点坐标
Element *ele = self.elements[0];
CGContextAddLineToPoint(context, center_w, border_w +element_w*(1-ele.percent));
Element *ele = self.elements[i];
double pi = (M_PI*2.0/(self.elements.count))*i;
Coordinate(pi,element_w*ele.percent, center_w, center_h,&x, &y);
CGContextAddLineToPoint(context, x, y);
CGContextStrokePath(context);
这里和画网格不一样的就是每次的把主干的长度按照这个能力值的百分比分割
因为有之前的心率那得基础，这里完成的很快，然后做了一个相对比较灵活的封装，还没有加能力描述和百分比值，后续加上。
代码地址：
欢迎吐槽，欢迎指正，欢迎批评，欢迎提问。
9.23 11:43
重新封装了一个雷达图，这次的会比较全面。封装后的效果图
代码地址还是之前的
有所为 有所不为
刚拿到设计稿的时候大概看了一眼，当时心里想着放张背景图，然后计算下相应点的坐标，在最上面画一层就OK了，其实一开始实现的时候也确实是这么做的，然后我就日了狗了，发现设计稿上多层五边形的间隔不是相等的，也就是说继续按照之前的想法进行实现就要计算出每层顶点的坐标，那样的话代码估...
之前一直抱着一种不很好的态度去写代码，不求甚解，不会就google，现在感觉长期这样是不行的，必须自己也依靠实践经验去写一写框架，发现并不难，于是写了一个使用起来很舒服的图表，可随意定制。后面还将上传封装清晰的“柱状图”上传，供大家交流学习。 Git仓库代码demo
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
当你对各种军用雷达头大的时候，推荐你读读这一篇。 舰载雷达 |型号|应用||:-:|:-:|:-:|:-:|:-:|:-:||AN/SPY-4 AESA雷达|DDG-1000/福特号||AN/SPY-3 AESA雷达|DDG-1000/福特号||AN/SPY-1D PESA...
转自：http://blog.sina.com.cn/s/blog_17dwug0.html 有很多家长在后台留言，说孩子不喜欢学习、不听话、不懂事、不体贴父母……殊不知，一个家庭里，父母是什么样，孩子就会养成什么样。 都说父亲决定孩子飞的高度，母亲决定...
#幸福是需要修出来的～每天进步1%～幸福实修08班～015-董超-杭州 【幸福三朵玫瑰】 昨日3朵玫瑰 运动? 阅读? 和孩子出游? 今日3朵玫瑰 运动 阅读 和孩子出游 【幸福实修99天目标】 每天6点起床 每天阅读，每月读完3本书 每天运动半小时 【幸福...
在我出生的这些年，我真的没有见过那么大的房子，至少从来没有想过我会拥有那样的房子，但是当x先生把我带到那栋华丽的房子面前，我泣不成声。他把我揽在怀里，颤抖着声音。宝贝儿，我们终于有自己的家了。 1 15年的3月份，我认识了x先生，略长的头发，文艺青年特有的眼镜，抽烟上瘾。 ...
陌上花开 — 谭维维（电影《相爱相亲》主题曲） 最初了解到《相爱相亲》还是四月份在北影节看《20 30 40》之后张艾嘉的访谈里，宋宁当时就坐在身后，姥姥也来了，那会儿对这部片子是没什么概念的，只觉得张姐年过六十后，活得十分优雅与洒脱。 直到前段时间看了粗剪版本，最近又看了...
7月1日的马道镇乱石窖村委会格外热闹，留坝县医院、航空工业自控所、乱石窖村党员欢聚这里，共同开展庆“七一”主题党日系列活动，为建党96周年献礼、为决战决胜脱贫攻坚战再添动力。
在庄严的国歌声中，拉开庆典序幕，新老党员重温入党时的思想激情和奋斗追求，回顾入党宣...【图文】雷达图课件_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
雷达图课件
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢excel2007 雷达图 几组数据 设置不同比例尺_百度知道
excel2007 雷达图 几组数据 设置不同比例尺
excel2007 雷达图
几组数据数值大小差异比较大，， 怎么设置不同比例尺？并且比例尺也显示在边上？
数据如下，，比例尺设置不同，让3组数据的图差不多大小，
风向 N NNE NE ENE E ESE SE SSE S SSW SW WSW W WNW NW NNW
频率 6 4 5 5 10 10 10 4 4 4...
我有更好的答案
步骤1：按图健入单元格区域A1:D7中文字与数据，略加编辑修饰。选取单元格区域A1:D7，单击“插入”选项卡，在选项卡的“图表”区域中选中“带数据标记的雷达图”(其他图表-雷达图的第2个子图表类型)。&步骤2：单击绘图区，适当放大数据系列(点或线)标志。从中心向四周共射出6条数值坐标轴，分别代表治疗有效率、重患收治率等6个指标，图中的等边六边形是6个数值坐标轴的主要网格线。步骤3：在数值坐标轴主要网格线上点击右健，选取“设置网格线格式”，点击“线形”，将线条样式选为虚线(第3条);将颜色变为自己想要的颜色，如50%灰色。步骤4：在任一数值坐标轴上单击右健，选取“设置坐标轴格式-填充”，将颜色变为自己想要的颜色，如50%灰色;选取“设置坐标轴格式”，可按自己的意愿设置最小值、最大值、主要刻度单位、次要刻度单位等，本例分别设为0、100、50、50;选取“数字”，分类下拉列表中选“数字”，小数位数后改变为“0”，负数选“-1234”。按确定健。步骤5：适当调整图例的位置、形状，调整绘图区的大小，调整整个图表区域的字体大小等，可获得如图右侧的雷达图。
再作图PS，到你想要的效果；3）删除坐标轴刻度;ln(x)变换，手动添加刻度数据方法二：通过函数变化，将原始数据线性变换或 1&#47、最大风速设置为“主要坐标轴”，对数刻度(我试了log3效果不错)，调整主要坐标轴最大值和对数基底，，调整次要坐标轴最大值，到你想要的效果；2）频率这个不难方法一：1）平均风速设置为“次要坐标轴”
为您推荐：
其他类似问题
雷达图的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。}