环形分布图，又称饼图，常用于统计学模块，可以直观的表示各个子项在整体中的占比。比如：
环形展开分布图.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方法，生成开始和持续时间数组、开始和结束角度数组。
网友评论