首页 热点专区 义务教育 高等教育 出国留学 考研考公
您的当前位置:首页正文

饼状图

2024-12-16 来源:要发发教育

展示一下效果图:

show.gif

大致思路如下:
1.确定中心点。中心点就是view的中心,最大线长MIN(宽,高)的一半。

_centerPoint = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));

2.-π/2位置作为第一个轴角度,依次确定每个轴的角度。

#pragma mark - 第N条边的角度
- (CGFloat)degreeForForCornerIndex:(NSInteger)index {
    CGFloat eachCornerRedius = M_PI * 2.0 / _cornerNum;
    CGFloat redius0 = -M_PI_2;
    CGFloat rediusN = redius0 + eachCornerRedius * index;
    return rediusN;
}

3.根据每个轴上的长度,来得到绘制的坐标点。

#pragma mark - 在第N条边上,长M的线对应的point
- (CGPoint)pointForCornerIndex:(NSInteger)index length:(CGFloat)length {
    CGFloat redius = [self degreeForForCornerIndex:index];  //得到角度
    CGFloat X = cos(redius) * length;
    CGFloat Y = sin(redius) * length;
    return CGPointMake(_centerPoint.x + X, _centerPoint.y + Y);
}

4.连接每个坐标点画成面。

#pragma mark - 画七角圈圈并填充
- (void)drawSevenLineWithLengths:(NSArray<NSNumber *> *)lengths color:(UIColor *)color fillColor:(UIColor *)fillColor context:(CGContextRef)context {
    UIGraphicsPushContext(context);
    CGPoint firstPoint = CGPointZero;
    UIBezierPath *path = [UIBezierPath bezierPath];
    [color setStroke];
    [fillColor setFill];
    [path setLineWidth:0.5];
    for (NSInteger i = 0; i < lengths.count; i++) {
        CGPoint point = [self pointForCornerIndex:i length:[lengths[i] floatValue]];
        if (i == 0) {
            [path moveToPoint:point];
            firstPoint = point;
        }
        else {
            [path addLineToPoint:point];
        }
        if (i == lengths.count - 1) {   //最后一笔画完填充
            [path addLineToPoint:firstPoint];
            [path stroke];
            [path fill];
        }
    }
    UIGraphicsPopContext();
}

5.画描述文字,此文字是中心点在轴线上。

#pragma mark - 画统计提示
- (void)drawSevenTipsInContext:(CGContextRef)context {
    NSArray *Tips = _descriptions;
    CGFloat location = _descriptionOffsetCenter;
    for (NSInteger i = 0; i < Tips.count; i++) {
        CGPoint point = [self pointForCornerIndex:i length:location];
        NSAttributedString *attributeText = [[NSAttributedString alloc] initWithString:Tips[i]
                                                                            attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:12],
                                                                                         NSForegroundColorAttributeName : UIColorHex(#888888)}];
        CGRect textRect = [self rectForAttributeText:attributeText centerPoint:point];
        [attributeText drawInRect:textRect];
    }
}

6.此时背影图已经画好,计算每个给进来的progress计算出长度与值的比例,根据progress的值乘以比例,计算出在轴线上的长度。

CGFloat rate = (_lineLength - _innerSpace)/[_fullProgressArray[i] floatValue];
CGFloat value = [_progressArray[i] floatValue];
CGFloat length = _innerSpace + rate * value;

7.同样道理走第3-5步。
8.画时间圆弧,不再陈述。

总结:
根据index确定哪条轴,根据哪条轴确定角度,根据progess值计算出在此轴上的长度,轴上的长度可以确定点。把点画出来,连接成面,fill颜色。

显示全文