iOS自定义多边形分析图

• 看到朋友讨论群里面发了一个类似于这样的需求，当时很感兴趣，刚好上线了，有点闲暇时间，决定试一试。（上面是完成的效果图，没有做适配）

View.h文件

#import <UIKit/UIKit.h>


@interface GraphView : UIView


@property(nonatomic,strong)NSDictionary *dataDic;// 接收数据信息

@property(nonatomic,strong)NSArray *nameArr;

@end

View.m文件

#import "GraphView.h"

#define kCount self.dataDic.count // 传入的数据中的个数


@implementation GraphView


- (void)drawRect:(CGRect)rect

{

//一个不透明类型的Quartz 2D绘画环境,相当于一个画布,你可以在上面任意绘画

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetLineWidth(context, 2.0); // 线宽

    CGContextSetStrokeColorWithColor(context, [UIColorgrayColor].CGColor);// 线框颜色

    UIColor *aColor = [UIColorcolorWithRed:1green:0.5blue:0.2alpha:0.2];

    CGContextSetFillColorWithColor(context, aColor.CGColor);// 填充颜色


// 

    CGPoint center = CGPointMake(200, 200);

// 从一个点开始

    CGContextMoveToPoint(context, center.x, center.y + 160.0);


    for(int i = 1; i < kCount; ++i)

    {

        self.nameArr = @[@"Chinese",@"Math",@"English",@"History",@"PE"];

    // 

        CGPoint point = [self getXAndYWithScores:_dataDic[_nameArr[i - 1]] integer:i];

    // 记录上一个点，并连接到这个点；

        CGContextAddLineToPoint(context, center.x + point.x, center.y + point.y);

    }


    CGContextClosePath(context); // 结束一次画图

    CGContextDrawPath(context, kCGPathFillStroke);// 图形内容填充颜色方式（填满）

    CGContextStrokePath(context); // 可不要


// 如果是画两组不同的图形， 重新创建一次 CGContextRef

    CGContextRef context2 = UIGraphicsGetCurrentContext();

    CGContextSetRGBStrokeColor(context2, 28, 132, 250, 1);

    CGContextSetLineWidth(context2, 1.0);

    CGContextSetStrokeColorWithColor(context2, [UIColorlightGrayColor].CGColor);// 线框颜色


// 几条射线，和注释

    for(int i = 1; i <= kCount; i++)

    {

        CGContextMoveToPoint(context2, center.x, center.y);


        CGFloat x = 200.0 * sinf(i * 2.0 * M_PI / kCOunt);

        CGFloat y = 200.0 * cosf(i * 2.0 * M_PI / 5.0);

        CGContextAddLineToPoint(context2, center.x + x, center.y + y);

        

        UILabel *nameLb = [[UILabelalloc]initWithFrame:CGRectMake(0, 0, 80, 30)];

        nameLb.text = self.nameArr[i - 1];

        nameLb.center = CGPointMake(center.x + x, center.y + y);

        [selfaddSubview:nameLb];

    }


    CGContextClosePath(context2);

    CGContextDrawPath(context2, kCGPathFillStroke);

    CGContextStrokePath(context2);


} 


// 

- (CGPoint)getXAndYWithScores:(NSString *)scores integer:(NSInteger)integer

{

    CGFloat x = 160.0 * ([scores floatValue] / 100) * sinf(integer * 2.0 * M_PI / kCount

);// 如果想要多边形， 改动5.0 就行了， 前面相应的地方也修改

    CGFloat y = 160.0 * ([scores floatValue] / 100) * cosf(integer * 2.0 * M_PI / kCount);

    CGPoint point = CGPointMake(x, y);

    return point;

}

调用View

#import "ViewController.h"

#import "GraphView.h"

@interfaceViewController ()

@end


@implementation ViewController


- (void)viewDidLoad {
    [superviewDidLoad];

    // 多线的， 可以根据需求进行调整

    NSDictionary *dataDic = @{@"Chinese":@66,@"Math":@88,@"English":@54,@"History":@90,@"PE":@40};// 随意填写, 数组更加方便

    GraphView *grapview = [[GraphView alloc]initWithFrame:self.view.bounds];

    grapview.dataDic = dataDic;// 传值到 UIView界面

    

    grapview.backgroundColor = [UIColor clearColor];

    [self.view addSubview:grapview];

}

// 6边形的效果

六边形2.png