iOS折现图、饼图的绘制

1、直线图(包含虚线的画法)

效果图

代码：

- (void)drawRect:(CGRect)rect {
    //拿到上下文context
    CGContextRef context = UIGraphicsGetCurrentContext();
    //线的颜色
    CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor);
    //线宽
    CGContextSetLineWidth(context, 0.5);
    //横线
    for (int i = 0; i < 12; i ++) {
        //起始点位置
        CGContextMoveToPoint(context, 0, i * self.frame.size.height/11);
        //终止点位置
        CGContextAddLineToPoint(context, self.frame.size.width, i * self.frame.size.height/11);
        //画线
        CGContextStrokePath(context);
    }
    
    //竖线（虚线）
    for (int i = 0; i < 6; i ++) {
        if (i == 0 || i == 5) {
            //先绘制1个点，再跳过一个点
            CGFloat length[] = {1, 1};
            //phase - 表示在第一个虚线绘制的时候跳过多少个点
            //lengths – 指明虚线是如何交替绘制，具体看例子
            //count – lengths数组的长度
            CGContextSetLineDash(context, 0, length, 0);
        }else {
            CGFloat length[] = {4,4};
            CGContextSetLineDash(context, 0, length, 2);
        }
        CGContextMoveToPoint(context, i * self.frame.size.width/5, 0);
        CGContextAddLineToPoint(context, i * self.frame.size.width/5, self.frame.size.height);
        CGContextStrokePath(context);
    }
    
    CGContextSetLineWidth(context, 3);
    CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
    
    //画线
    CGContextMoveToPoint(context, self.frame.size.width / 5 * 1 + 1.5, self.frame.size.height / 11 * 3 + 1.5);
    CGContextAddLineToPoint(context, self.frame.size.width / 5 * 2 - 1.5, self.frame.size.height / 11 * 4 - 1.5);
    
    CGContextMoveToPoint(context, self.frame.size.width / 5 * 2 + 1.5, self.frame.size.height / 11 * 4 + 1.5);
    CGContextAddLineToPoint(context, self.frame.size.width / 5 * 4 - 1.5, self.frame.size.height / 11 * 8 - 1.5);
    CGContextStrokePath(context);
    
    //画点
    CGContextSetFillColor(context, CGColorGetComponents([UIColor blueColor].CGColor));
    CGContextFillEllipseInRect(context, CGRectMake(self.frame.size.width / 5 * 1 - 3, self.frame.size.height / 11 * 3 - 3, 6, 6));
    CGContextFillEllipseInRect(context, CGRectMake(self.frame.size.width / 5 * 2 - 3, self.frame.size.height / 11 * 4 - 3, 6, 6));
    CGContextFillEllipseInRect(context, CGRectMake(self.frame.size.width / 5 * 4 - 3, self.frame.size.height / 11 * 8 - 3, 6, 6));
    
}

2、饼图

效果图

代码：

- (void)drawRect:(CGRect)rect {
    //一层遮罩
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = [UIColor lightGrayColor].CGColor;
    //strokeStart它表示描线开始的地方占总路径的百分比，默认值是0 取值范围[0,1]
    layer.strokeStart = 0;
    //代表了绘制结束的地方站总路径的百分比 默认值是1 取值范围是[0,1]
    layer.strokeEnd = 1;
    layer.lineWidth = 60;
    layer.frame = CGRectMake(self.frame.size.width/2 - 30, self.frame.size.height/2 - 30, 60, 60);
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2, self.frame.size.height/2) radius:60/2 startAngle:-M_PI_2 endAngle:M_PI_2 * 3 clockwise:YES];
    layer.path = path.CGPath;
    
    
    //起始位置，圆的顶点 为 -M_PI/2
    CGFloat startAngle = - M_PI_2;
    //数据源
    NSArray *dataArr = @[@20, @30, @40, @50];
    NSArray *colorArr = @[[UIColor redColor], [UIColor yellowColor], [UIColor blueColor], [UIColor purpleColor]];
    for (int i = 0; i < dataArr.count; i ++) {
        NSNumber *count = dataArr[i];
        UIBezierPath *berPath = [UIBezierPath bezierPath];
        //endAngle = startAngle + 所占比例*整圆的弧度M_PI*2
        [berPath addArcWithCenter:CGPointMake(self.frame.size.width/2, self.frame.size.height/2) radius:60 startAngle:startAngle endAngle:startAngle + count.floatValue / 140 * M_PI * 2 clockwise:YES];
        [berPath addLineToPoint:CGPointMake(self.frame.size.width/2, self.frame.size.height/2)];
        
        CAShapeLayer *shapLayer = [CAShapeLayer layer];
        shapLayer.frame = CGRectMake(self.frame.size.width/2 - 30, self.frame.size.height/2 - 30, 60, 60);
        shapLayer.path = berPath.CGPath;
        //描边颜色
        shapLayer.strokeColor = [[UIColor whiteColor] CGColor];
        //背景色
        shapLayer.fillColor = [colorArr[i] CGColor];
        [self.layer addSublayer:shapLayer];
        //重新设置startAngle
        startAngle = startAngle + count.floatValue / 140 * M_PI * 2;
    }
    
    //在设置动画之前设置遮罩
    self.layer.mask = layer;
     
    //添加一个动画
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.fromValue = @0;
    animation.toValue = @1;
    animation.duration = 1;
    animation.repeatCount = 1;
    //设置样式 淡入淡出
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    animation.removedOnCompletion = YES;
       
    [layer addAnimation:animation forKey:nil];
    
}