CGContextRef简单绘制-03饼图、柱状图

饼图

实现方式:dom

一、先计算出每组数据占总数据的比例;spa

二、每组数据所占的百分比乘以360度,得出饼图的角度code

3.依次画出每组的数据;orm

//绘制饼状图
    //总共100,三个饼图 2五、2五、50,每一个饼图颜色随机
    //根据每一个饼图占据总数的百分比乘上360度,得出每一个饼图的大小
    
    NSArray *data = @[@28, @42, @30];
    
    CGPoint center = CGPointMake(100, 100);
    CGFloat radius = 90;
    CGFloat startA = 0;
    CGFloat endA   = 0;
    
    for(int i = 0; i < data.count; i++){
        
        //获取上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        
        //绘图路径
        startA = endA;
        NSNumber *num = data[i];
        CGFloat angle = num.integerValue / 100.0 * M_PI * 2;
        endA = startA + angle;
        
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
        
        [path addLineToPoint:center];
        
        CGContextAddPath(ctx, path.CGPath);
        
        CGContextFillPath(ctx);
        
    }

柱状图

实现方式:it

一、根据数据的总个数,计算出每组数据造成柱状图时所占View的宽度,两个柱状图直接的间隔大小 = 柱状图的宽度form

柱状图W = ViewW / (数据总个数 * 2 - 1)渲染

二、根据每组数据占据总数的比例,计算出柱状图的高度;数据

//画柱状图
    //总共100,三个柱状图 2五、2五、50,每一个柱状图颜色随机
    //根据每一个柱状图占据总数的百分比乘上View高度,得出每一个柱状图的高度
    //两个柱状图直接的间隔=柱状图的宽度,View上显示的柱状图+间隔=柱状图个数*2-1
    
    NSArray *data = @[@28, @32, @40];
    
    NSInteger viewW = rect.size.width;
    NSInteger viewH = rect.size.height;
    
    CGFloat barH = 0;   //柱状图高度
    CGFloat barW = viewW / (data.count * 2 - 1);   //柱状图宽度
    
    
    for(int i = 0; i <data.count; i++){
        
        NSNumber *num = data[i];
    
        barH = num.integerValue / 100.0 * viewH;    //bar的高度
        CGFloat barX = i * 2 * barW;
        CGFloat barY = viewH - barH;
        
        //获取绘图上下文
        CGContextRef ctf = UIGraphicsGetCurrentContext();
        
        //获取绘图路径
        UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(barX, barY, barW, barH)];
        
        //添加路径到上下文
        CGContextAddPath(ctf, path.CGPath);
        
        //渲染
        CGContextFillPath(ctf);
    }

产生随机颜色

能够把下面这段代码包装成UIColor的分类,方便使用di

+(instancetype)RandomColor
{
   CGFloat r = arc4random_uniform(255) / 255.0;
   CGFloat g = arc4random_uniform(255) / 255.0;
   CGFloat b = arc4random_uniform(255) / 255.0;
    
    return [UIColor colorWithRed:r  green:g blue:b alpha:1];
}
相关文章
相关标签/搜索