iOS 自定义雷达图

自定义圆形虚线背景雷达图。

图片.png

1.新建一个view（SBRadarChartsView）
2.重写drawRect

//画虚线的
    CGFloat dashPattern[] = {2,1};// 实线长为2，空白为1
    
    CGFloat lineWidth = 0.5;
    
    //半径
    CGFloat radius = self.frame.size.width/2.0;
    
    //moke 数据
    NSMutableArray *datas = [NSMutableArray arrayWithArray:@[@"40",@"50",@"80",@"50",@"90",@"50",@"70",@"90",@"30"]];
    
    NSMutableArray *titles = [NSMutableArray arrayWithArray:@[@"阴虚",@"痰湿",@"温热",@"血瘀",@"气郁",@"特禀",@"平和",@"气虚",@"阳虚"]];

    //圆环个数
    int count = 5;
    
    //圆环间距
    int margin = 30;
    
    //区域是否绘制曲线边线
    BOOL isCurve = NO;
    
    //1.绘制圆环
    for (int i = 0; i<count; i++) {
        UIBezierPath* path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(i*margin, i*margin, self.frame.size.width-(i*(margin *2)), self.frame.size.width-(i*(margin *2)))];
        [path setLineDash:dashPattern count:1 phase:1];
        path.lineWidth = lineWidth;
        [[UIColor lightGrayColor] set];
        path.lineCapStyle = kCGLineCapRound; //线条拐角
        path.lineJoinStyle = kCGLineJoinRound; //终点处理
        [path stroke];
    }
    
    
    
    //2.绘制穿插线（从圆心到最大圆斜线）
    for (int i = 0; i<datas.count; i++) {
        UIBezierPath *path = [UIBezierPath bezierPath];
        [path moveToPoint:CGPointMake(radius,radius)];
        CGPoint point = [self calcCircleCoordinateWithCenter:CGPointMake(radius,radius) andWithAngle:i*(360/datas.count) andWithRadius:radius];
        [path addLineToPoint:point];
        [path setLineWidth:lineWidth];
        [path setLineDash:dashPattern count:1 phase:1];
        [[UIColor lightGrayColor] setStroke];
        [path stroke];
    }
    
    //value array里面的最大值
    float maxValue = [[datas valueForKeyPath:@"@max.intValue"] floatValue];
    
    //3.获取数据源的每项point
    NSMutableArray *pointArray = [[NSMutableArray alloc] init];
    NSMutableArray *itemPointArray = [[NSMutableArray alloc] init];

    for (int index = 0; index < datas.count; index++) {
        //data point
        CGPoint point = [self calcCircleCoordinateWithCenter:CGPointMake(radius, radius) andWithAngle:index*(360/datas.count) andWithRadius:[datas[index] floatValue]/maxValue *radius];
        NSValue *value = [NSValue valueWithCGPoint:point];
        [pointArray addObject:value];
        
        //item point
        CGPoint itemPoint = [self calcCircleCoordinateWithCenter:CGPointMake(radius, radius) andWithAngle:index*(360/datas.count) andWithRadius:radius];
        NSValue *valuePoint = [NSValue valueWithCGPoint:itemPoint];
        [itemPointArray addObject:valuePoint];
    }
    
    //4.绘制图层
    UIBezierPath* path = [UIBezierPath bezierPath];
    path.lineWidth = 1.0;
    path.lineCapStyle = kCGLineCapRound; //线条拐角
    path.lineJoinStyle = kCGLineJoinRound; //终点处理
    for (int index = 0; index < pointArray.count; index++) {
        
        CGPoint point = [pointArray[index] CGPointValue];

        if (index == 0) {
            [path moveToPoint:[pointArray[index] CGPointValue]];
        }else{
            //画曲线 找出控制点
            if (isCurve) {
                CGPoint nextP = [pointArray[index-1] CGPointValue];
                
                CGPoint control1 = P_M(point.x + (nextP.x - point.x) / 2.0, nextP.y);
                CGPoint control2 = P_M(point.x + (nextP.x - point.x) / 2.0, point.y);
                
                [path addCurveToPoint:point controlPoint1:control1 controlPoint2:control2];
            }
        }
        
        [path addLineToPoint:point];
        
        //5.绘制各每项数据顶点小圆点
        UIView *doi = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 5, 5)];
        doi.backgroundColor = [UIColor whiteColor];
        
        doi.layer.borderWidth = 1;
        doi.layer.borderColor = [[UIColor redColor] colorWithAlphaComponent:0.5].CGColor;
        doi.layer.masksToBounds = YES;
        doi.layer.cornerRadius = 5/2.0;
        doi.center = point;
        [self addSubview:doi];
    }
    [[[UIColor redColor] colorWithAlphaComponent:0.3] setFill];
    [path fill];
    
    
    //6.绘制每项的标题
    for (int index = 0; index < itemPointArray.count; index++) {
        
        CGPoint p = [itemPointArray[index] CGPointValue];
        CGFloat width = [SBTools sb_string_max_size:[UIFont systemFontOfSize:12] text:titles[index] maxWidth:MAXFLOAT].width;
        UILabel *item = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, width, 20)];
        item.text = titles[index];
        item.font = [UIFont systemFontOfSize:12];
        
        CGFloat angle = index*(360/datas.count);//角度
        
        if (angle == 0) {
            item.center = CGPointMake(p.x + width/2.0, p.y);
        }else if (angle < 90){
            item.center = CGPointMake(p.x + width/2.0, p.y - 10);
        }else if (angle == 90){
            item.center = CGPointMake(p.x , p.y-10);
        }else if (angle < 180){
            item.center = CGPointMake(p.x - width/2.0, p.y - 10);
        }else if (angle == 180){
            item.center = CGPointMake(p.x - width/2.0 , p.y);
        }else if (angle < 270){
            item.center = CGPointMake(p.x - width/2.0 , p.y + 10);
        }else if (angle == 270){
            item.center = CGPointMake(p.x , p.y+10);
        }else if (angle > 270){
            item.center = CGPointMake(p.x + width/2.0 , p.y + 10);
        }
        
        [self addSubview:item];
    }

3.坐标计算

#pragma mark 计算圆圈上点在IOS系统中的坐标
-(CGPoint) calcCircleCoordinateWithCenter:(CGPoint) center  andWithAngle : (CGFloat) angle andWithRadius: (CGFloat) radius{
    CGFloat x2 = radius*cosf(angle*M_PI/180);
    CGFloat y2 = radius*sinf(angle*M_PI/180);
    return CGPointMake(center.x+x2, center.y-y2);
}

4.调用

 SBRadarChartsView *radar = [[SBRadarChartsView alloc] initWithFrame:CGRectMake(20, 100, SB_SCREEN_WIDTH - 40, SB_SCREEN_WIDTH - 40)];
    [self.view addSubview:radar];

Demo代码请参考gitHub:https://github.com/Manchitor/SBTools