iOS三种环形分布图的绘制

环形分布图，又称饼图，常用于统计学模块，可以直观的表示各个子项在整体中的占比。比如：

环形展开分布图.png

由于工作需要，研究并开发了如下效果的饼图：1.环形单项占比饼图；2.环形多项占比饼图；3.环形多项占比饼图2

动态效果如下：
单项占比分布图

单项占比分布图.gif

环形多项占比饼图

环形多项占比饼图.gif

环形多项展开饼图.gif

下面介绍一下第三种风格的画法：

- (void)strokePath {
    [self removeAllSubLayers];
    
    [self drawDefaultPie];
    [self loadSubviewLayers];
    
}

- (void)loadSubviewLayers {
    for (NSInteger i=0; i<self.itemArray.count; i++) {
        if (self.isShowAnimation) {
            NSDictionary * userInfo = @{@"index":@(i)};
            NSTimer * timer = [NSTimer timerWithTimeInterval:[self.timeStartArray[i] floatValue] target:self selector:@selector(timerAction:) userInfo:userInfo repeats:NO];
            [[NSRunLoop currentRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];
        }else {
            [self drawEachPieWithIndex:i];
        }
    }
}

说明: strokePath函数为外部刷新函数。当环形分布图所需要的数据获取之后，执行此函数进行重绘。loadSubviewLayers加载所有子视图和子layer。这里是重点：所有子layer的加载使用定时器完成。根据传递进来的valueAarry和总的动画时间，计算每个子layer的动画持续时间和动画开始时间，然后按照时间先后顺序执行。

#pragma mark - 定时器
- (void)timerAction:(NSTimer *)sender{
    NSInteger index = [[sender.userInfo objectForKey:@"index"] integerValue];
    [self drawEachPieWithIndex:index];
    
    [sender invalidate];
    sender = nil;
}
- (void)drawEachPieWithIndex:(NSInteger)index {
    CGFloat startAngle = [self.startAngleArray[index] floatValue];
    CGFloat endAngle = [self.endAngleArray[index] floatValue];
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:self.centerPoint radius:self.radius startAngle:startAngle endAngle:endAngle  clockwise:YES];
    CAShapeLayer *shapeLayer = [CAShapeLayer new];
    shapeLayer.path = [path CGPath];
    shapeLayer.lineWidth = self.lineWidth;
    shapeLayer.strokeColor = ((UIColor *)self.colorArray[index]).CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    
    if (self.isShowAnimation) {
        [shapeLayer addAnimation:[self animationWithDuration:[self.durationArray[index] floatValue]] forKey:nil];
    }
    [self.layer addSublayer:shapeLayer];
    
    if (self.isShowItemLabel) {
        [self drawEachItemLabelWithIndex:index];
    }
}

说明：此段代码分别创建了相应数量的计时器并分别创建子分布图

- (CABasicAnimation *)animationWithDuration:(CGFloat)duraton {
    CABasicAnimation * fillAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    fillAnimation.duration = duraton;
    fillAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    fillAnimation.fillMode = kCAFillModeForwards;
    fillAnimation.removedOnCompletion = NO;
    fillAnimation.fromValue = @(0.f);
    fillAnimation.toValue = @(1.f);
    return fillAnimation;
}

说明：通用动画加载方法。

- (void)setValueArray:(NSMutableArray *)valueArray {
    _valueArray = valueArray;
    
    //计算开始和持续时间数组
    self.timeStartArray = [NSMutableArray array];
    self.durationArray = [NSMutableArray array];
    CGFloat startTime = 0.5f;
    [self.timeStartArray  addObject:[NSNumber numberWithFloat:startTime]];
    for (NSInteger i=0; i<valueArray.count; i++) {
        self.durationArray[i] = [NSNumber numberWithFloat:[valueArray[i] floatValue] * self.totalDuration];
        startTime += [valueArray[i] floatValue] * self.totalDuration;
        [self.timeStartArray  addObject:[NSNumber numberWithFloat:startTime]];
    }
    //计算开始和结束角度数组
    self.startAngleArray = [NSMutableArray array];
    self.endAngleArray = [NSMutableArray array];
    self.itemLabelCenterArray = [NSMutableArray array];
    CGFloat startAngle = self.startAngle, endAngle;
    for (NSInteger i=0; i<valueArray.count; i++) {
        [self.startAngleArray  addObject:[NSNumber numberWithFloat:startAngle]];
        endAngle = startAngle + [self.valueArray[i] floatValue] * 2 * M_PI;
        [self.endAngleArray  addObject:[NSNumber numberWithFloat:endAngle]];
        [self.itemLabelCenterArray addObject:[NSNumber numberWithFloat:(startAngle + (endAngle-startAngle)/2.0)]];
        
        startAngle = endAngle;
    }
}

说明:控件传值关键属性。重写set方法，生成开始和持续时间数组、开始和结束角度数组。

XRAnnularPieView项目代码