绘制饼状图、柱状图和进度条

绘制图形 基本步骤:

1. 获取图形上下文
2. 创建路径
3. 将路径添加到上下文中
4. 渲染 当然，操作需要在view的drawRect:方法中。

###绘制饼状图

1. 构建数据: 如NSArray *data = @[@15, @30, @12, @18, @25];
2. 根据数据个数绘制扇形
3. 注意:
   • 每个弧的起始、结束弧度都是不一样的
   • 每次绘制完毕一个弧以后 都要重新设置下一次的起始弧度为当前的结束 弧度。
   • 本次绘制的结束弧度，为起始弧度 + 本次的弧度。

//绘制一个饼状图
    //构建数据
    NSArray *data = @[@15, @30, @12, @18, @25];
    
    //获取图形上下文
    CGContextRef ref = UIGraphicsGetCurrentContext();
    
    //创建路径
    //确定圆心
    CGPoint centerP = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
    
    //半径
    CGFloat r = MIN(rect.size.width, rect.size.height) * 0.5;
    
    //起始弧度
    CGFloat start = 0;
    
    //终止弧度
    CGFloat end = 0;
    
    for (int i = 0; i < data.count; i ++) {
        
        //计算起始和终止弧度
        
        //终止弧度
        end = [data[i] floatValue] / 100.0 * (M_PI * 2) + start;
        
        //
        
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:centerP radius:r startAngle:start endAngle:end clockwise:YES];
        
        //连一条到中心点的线
        [path addLineToPoint:centerP];
        
        //路径添加到上下文中
        CGContextAddPath(ref, path.CGPath);
        
        //下一个扇形的起始弧度就是上一个扇形的终止弧度
        start = end;
        
        //设置颜色
        [[UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1] set];
        //渲染
        CGContextDrawPath(ref, kCGPathFill);
    }
复制代码

###绘制柱状图

1. 构建数据: 如NSArray *data = @[@180.8, @300, @125.2, @186.5, @125, @160, @216, @360];
2. 根据数据的个数绘制柱状图
3. 计算每个柱子的x，y， w，h

//绘制一个柱状图
    //数据
    NSArray *data = @[@180.8, @300, @125.2, @186.5, @125, @160, @216, @360];
    
    NSArray *colorData = @[[UIColor redColor], [UIColor cyanColor], [UIColor yellowColor], [UIColor greenColor], [UIColor blueColor], [UIColor magentaColor], [UIColor purpleColor], [UIColor brownColor]];
    
    //上下文
    CGContextRef ref = UIGraphicsGetCurrentContext();
    
    //计算每个柱子的x y w h
    CGFloat w = rect.size.width / (data.count * 2 - 1);
    
    for (int i = 0; i < data.count; i ++) {
        
        //创建路径
        CGFloat x = i * (w + w);
        CGFloat h = rect.size.height * ([data[i] floatValue] / 500.0);
        CGFloat y = rect.size.height - h;
        
        UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(x, y, w, h)];
        
        //添加到上下文中
        CGContextAddPath(ref, path.CGPath);
        
        //设置颜色
//        [[UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1] set];//随机色
        //指定颜色
        UIColor *color = (UIColor *)colorData[i];
        [color set];
        
        //渲染
        CGContextDrawPath(ref, kCGPathFill);
    }
复制代码

###绘制进度条

1. 控制器中将slider的值传递给自定义view。
2. 自定义view中，根据传递过来的值进行绘制。
3. 创建一个与自定义view一样大小的label来显示下载进度。

[self addSubview:self.percentageLabel];
    self.percentageLabel.frame = CGRectMake(10, (rect.size.height - 20)/2.0, rect.size.width - 20, 20);
    self.percentageLabel.text = [NSString stringWithFormat:@"%.2f%%", self.percentage * 100];
    
    //上下文
    CGContextRef ref = UIGraphicsGetCurrentContext();
    
    //创建路径
    //圆心
    CGPoint centerP = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
    
    //半径
    CGFloat r = MIN(rect.size.width, rect.size.height) * 0.5 - 5;
    
    //起始弧度
    CGFloat start = -M_PI_2;
    
    //终止弧度
    CGFloat end = (M_PI * 2) * self.percentage - M_PI_2;
    
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:centerP radius:r startAngle:start endAngle:end clockwise:YES];
    
    //关闭路径
//    [path closePath];
    
    //到圆心连线
    [path addLineToPoint:centerP];
    
    //设置线宽
    CGContextSetLineWidth(ref, 10);
    //设置线颜色
    [[UIColor redColor] set];
    //设置圆角
    CGContextSetLineCap(ref, kCGLineCapRound);
    
    //路径添加到上下文
    CGContextAddPath(ref, path.CGPath);
    
    //渲染
    CGContextDrawPath(ref, kCGPathFill);
复制代码

饼状图 柱状图 进度