iOS 饼图的实现封装

淡淡的烟草味﹌ 2022-06-04 04:58 189阅读 0赞

效果图：

![Center][]

主要代码：

PieChart.h

#import <UIKit/UIKit.h>
    
    @interface PieChart : UIView
    @property(nonatomic,strong)NSArray *percentages;//占比数组
    @property(nonatomic,strong)NSArray *colors;//占比的颜色数组
    @property(nonatomic,strong)NSArray *texts;//文本数组
    @property(nonatomic,strong)UIFont *textFont;//文本字体大小
    @property(nonatomic,strong)UIColor *textColor;//文本字体颜色
    @property(nonatomic)CGFloat textWidth;
    @property(nonatomic)CGFloat textHeight;
    
    @end

PieChart.m

#import "PieChart.h"
    #define CENTER_X self.bounds.size.width / 2
    #define CENTER_Y self.bounds.size.height / 2
    
    #define FIRST_LINE_X(x) CENTER_X + x
    #define FIRST_LINE_Y(y) CENTER_Y + y
    
    #define SEC_LINE_X(x) x > 0 ? FIRST_LINE_X(x) + secLine : FIRST_LINE_X(x) - secLine
    
    #define SIN(x) sin(x / 180 * M_PI)
    #define COS(x) cos(x / 180 * M_PI)
    
    static NSInteger secLine = 10;//第二条线的长度
    static NSInteger firstLine = 5;//第一条线的长度
    static CGFloat radiusRatio = 4.5;//半径比率
    
    @interface PieChart (){
        NSInteger totalAngle;
        CGFloat radius;
    }
    
    @end
    @implementation PieChart
    - (void)awakeFromNib {
        [super awakeFromNib];
        [self commonInit];
    }
    
    -(instancetype)init {
        if (self = [super init]) {
            [self commonInit];
        }
        return self;
    }
    - (instancetype)initWithCoder:(NSCoder *)coder
    {
        self = [super initWithCoder:coder];
        if (self) {
            [self commonInit];
        }
        return self;
    }
    -(instancetype)initWithFrame:(CGRect)frame {
        self = [super initWithFrame:frame];
        if (self) {
            [self commonInit];
        }
        return self;
    }
    
    -(void)commonInit{
        self.textColor = [UIColor blackColor];
        self.textFont = [UIFont systemFontOfSize:6];
        self.textWidth = 30;
        self.textHeight = 30;
    }
    
    - (void)drawRect:(CGRect)rect {
        for (UIView *view in self.subviews) {
            [view removeFromSuperview];
        }
        CGFloat width = rect.size.width;
        CGFloat height = rect.size.height;
        
        if (width > height) {
            radius = height/radiusRatio;
        }else {
            radius = width/radiusRatio;
        }
        CGPoint center = CGPointMake(width/2, height/2);
        
        CGFloat all;
        //已加载的扇形弧度总和
        CGFloat endPercent = 0.0;
        //当前扇形所占弧度
        CGFloat curPercent = 0.0;
        //每个扇形的百分比
        CGFloat perPercent = 0.0;
    
        for (NSNumber *n in self.percentages) {
            all += [n floatValue];
        }
        
        for (int i = 0; i<self.percentages.count; i++) {
            perPercent = [self.percentages[i] floatValue] / all;
            curPercent = perPercent * 2 * M_PI;
            endPercent = perPercent * 2 * M_PI + endPercent;
    
            [(UIColor *)self.colors[i] set];
            UIBezierPath *path = [UIBezierPath new];
            [path moveToPoint:center];
            [path addArcWithCenter:center radius:radius startAngle:endPercent - curPercent  endAngle:endPercent clockwise:YES];
            [path fill];
            [path closePath];
            
            double angle = [self countLocationOftheExplainLine:endPercent curDegrees:curPercent];
            [self drawLineAngle:angle i:i];
        }
    }
    
    -(double)countLocationOftheExplainLine:(CGFloat)totalDegrees curDegrees:(CGFloat)curDegrees {
        CGFloat percent = (totalDegrees - curDegrees / 2) / M_PI_2;
        //和横纵轴形成的夹角
        totalAngle = percent * 90;
        //判断所在范围
        if ((totalAngle >= 90 && totalAngle < 180) || (totalAngle >= 270 && totalAngle < 360)) {
            return 90 - totalAngle % 90;
        }
        return totalAngle % 90 ;
    }
    
    //画线
    - (void)drawLineAngle:(double)angle i:(int)i{
        CGFloat pointX = COS(angle);
        CGFloat pointY = SIN(angle);
        if (totalAngle >= 90 && totalAngle < 180) {
            pointX = -pointX;
        }
        if (totalAngle >= 180 && totalAngle < 270) {
            pointX = -pointX;
            pointY = -pointY;
        }
        if (totalAngle >= 270 && totalAngle < 360) {
            pointY = -pointY;
        }
        
        CGFloat lineX = FIRST_LINE_X(pointX * (radius + firstLine));
        CGFloat lineY = FIRST_LINE_Y(pointY * (radius + firstLine));
        
        [(UIColor *)self.colors[i] set];
    
        UIBezierPath *linePath = [UIBezierPath new];
        
        [linePath moveToPoint:CGPointMake(FIRST_LINE_X(pointX * radius/2), FIRST_LINE_Y(pointY * radius/2))];
        [linePath addLineToPoint:CGPointMake(lineX, lineY)];
        [linePath addLineToPoint:CGPointMake(SEC_LINE_X(pointX*(radius + firstLine)), lineY)];
        [linePath stroke];
        [linePath closePath];
        
        [self addLabelPointX:lineX pointY:lineY i:i];
    }  
    
    //添加文本
    - (void)addLabelPointX:(CGFloat)pointX pointY:(CGFloat)pointY i:(int)i{
        if (pointX < CENTER_X) {
            pointX -= self.textHeight + secLine;
        }else {
            pointX += secLine;
        }
        UILabel *percentLabel = [[UILabel alloc]initWithFrame:CGRectMake(pointX, pointY - self.textHeight/2, self.textWidth , self.textHeight)];
        percentLabel.text = [NSString stringWithFormat:@"%@",self.texts[i]];
        percentLabel.textAlignment = NSTextAlignmentLeft;
        percentLabel.numberOfLines = 0;
        if (pointX < CENTER_X) {
            percentLabel.textAlignment = NSTextAlignmentRight;
        }
        percentLabel.textColor = self.textColor;
        percentLabel.font = self.textFont;
        [self addSubview:percentLabel];
    }
    
    @end

使用：

![Center 1][]

self.pieChart.percentages = @[@20,@3,@59,@19,@100,@59,@15];
        self.pieChart.colors = @[[UIColor greenColor],[UIColor redColor],[UIColor yellowColor],[UIColor blueColor],[UIColor lightGrayColor],[UIColor greenColor],[UIColor redColor]];
        NSArray *arr =  @[@"优",@"良",@"轻度污染",@"中度污染",@"重度污染",@"严重污染",@"—"];
        NSMutableArray *marr = [NSMutableArray array];
        int index = 0;
        for (NSNumber *n in self.pieChart.percentages) {
            [marr addObject:[NSString stringWithFormat:@"%@：%@%%",arr[index],n]];
            index++;
        }
        
        self.pieChart.texts = marr;
        [self.pieChart setNeedsDisplay];

我的业余技术微信公众号：YKJGZH，欢迎大家进入

[Center]: /images/20220604/3a5dc2cb0b1b477e951d54f819df9948.png
[Center 1]: /images/20220604/8118f6e26c1b4b848cfca1422fed2d44.png