iOS画柱状图，折线图

iOS画柱状图和折线图

首先新建一个UIView 的类，

然后重写 drawRect 的方法

#define LINEWIDTH 10 //柱状图的柱的宽度
@implementation SZColumnarView

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.

*/
- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    
    CGFloat viewHeight = self.frame.size.height;
    
    CGFloat viewWidth = self.frame.size.width;
    
    CGFloat maxNum = [[[self.numArr lastObject] valueForKey:@"money"] floatValue];
    
    
    CGFloat maxHeight = viewHeight - 100;
    
    CGFloat pointX = (viewWidth - 100 - LINEWIDTH *_numArr.count)/(_numArr.count - 1) + LINEWIDTH;
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    for (int i = 0; i < self.numArr.count; i ++ ) {
        //获得处理的上下文
        
        
        //指定直线样式
        CGContextSetLineCap(context,kCGLineCapSquare);
        //直线宽度
        CGContextSetLineWidth(context,LINEWIDTH);
        
        //设置颜色
        CGContextSetRGBStrokeColor(context,0, 0, 0, 1.0);
 
        //开始绘制
        CGContextBeginPath(context);
        
        //画笔移动到点(31,170)
        
        CGFloat lineHeight = [[[self.numArr objectAtIndex:i] valueForKey:@"money"]floatValue] / maxNum * maxHeight;
        
        
        CGContextMoveToPoint(context,
                             pointX * i + 50 + 10,  viewHeight - 50);//开始的坐标
        
        //下一点
        CGContextAddLineToPoint(context,
                                pointX * i + 50 + 10, viewHeight - 50 - lineHeight );//结束的坐标
        
        UILabel *labTitle = [[UILabel alloc] init];//(由于画文字，文字长度还要算，太麻烦，所以偷一下懒，直接用label了)
        
        labTitle.textColor = [UIColor lightGrayColor];
        
        labTitle.font = [UIFont systemFontOfSize:15];
        
        labTitle.text = [[[self.numArr objectAtIndex:i] valueForKey:@"vip"] description];
        
        [labTitle sizeToFit];
        
        labTitle.center = CGPointMake(pointX * i + 50 + 10, viewHeight - 25);
        [self addSubview:labTitle];
        
        UILabel *labMoney = [[UILabel alloc] init];
        
        labMoney.textColor = [UIColor lightGrayColor];
        
        labMoney.font = [UIFont systemFontOfSize:13];
        
        labMoney.text = [[[self.numArr objectAtIndex:i] valueForKey:@"money"] description];
        
        [labMoney sizeToFit];
        
        labMoney.center = CGPointMake(pointX * i + 50 + 10, viewHeight - 50 - lineHeight - 15);
        
        [self addSubview:labMoney];
//        //下一点
//        CGContextAddLineToPoint(context,
//                                159, 148);

        //绘制完成
        CGContextStrokePath(context);
        

//画虚线折线图
        if (i < _numArr.count - 1) {
            
            CGFloat endY = [[[self.numArr objectAtIndex:i + 1] valueForKey:@"money"]floatValue] / maxNum * maxHeight;
            CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
            //设置虚线宽度
            CGContextSetLineWidth(context, 1);
            //设置虚线绘制起点
            
            //设置虚线排列的宽度间隔:下面的arr中的数字表示先绘制3个点再绘制1个点
            CGFloat arr[] = {4,2};
            //下面最后一个参数“2”代表排列的个数。
            CGContextSetLineDash(context, 0, arr, 2);
            
            CGContextMoveToPoint(context, pointX * i + 50 + 10, viewHeight - 50 - lineHeight - 40);
            //设置虚线绘制终点
            CGContextAddLineToPoint(context, pointX * (i + 1) + 50 + 10 , viewHeight - 50 - endY - 40);
            CGContextDrawPath(context, kCGPathStroke);
        }
        
        
    }
    
    
}

- (void) drawText:(NSString *)text x:(float)x y:(float)y {
    
    UIFont *font = [UIFont fontWithName:@"Arial" size:15];
    
    [text drawAtPoint:CGPointMake(x, y) withFont:font];
    
}
@end

然后在view controller中使用

 SZColumnarView *v = [[SZColumnarView alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 300)];
    
    
    NSDictionary *dic1 = @{@"vip":@"VIP1",@"money":@"2000"};
    NSDictionary *dic2 = @{@"vip":@"VIP2",@"money":@"5000"};
    NSDictionary *dic3 = @{@"vip":@"VIP3",@"money":@"10000"};
    NSDictionary *dic4 = @{@"vip":@"VIP4",@"money":@"15000"};
    NSDictionary *dic5 = @{@"vip":@"VIP5",@"money":@"20000"};
    NSDictionary *dic6 = @{@"vip":@"白金会员",@"money":@"20000"};
    
    v.numArr = @[dic1,dic2,dic3,dic4,dic5,dic6];//数组的数据格式根据自己的需要进行修改，同步需要修改SZColumnarView中获取数据的方法
    
    v.backgroundColor = [UIColor whiteColor];
    
    v.backgroundColor = [UIColor colorWithRed:238/255.0 green:238/255.0 blue:238/255.0 alpha:1.0];
    
    [self.view addSubview:v];