iOS绘图 - 自定义柱状图绘制

I. 创建 自定义柱状图类(UIView的子类)

• HistogramView.h

#import <UIKit/UIKit.h>

@interface HistogramView : UIView

@end

• HistogramView.m

#import "HistogramView.h"

@implementation HistogramView

- (void)drawRect:(CGRect)rect {

    //数据数组
    NSArray *arr = @[@20, @15, @70];

    //颜色数组
    NSArray *colorArr = @[[UIColor redColor], [UIColor greenColor], [UIColor yellowColor]];

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGFloat viewW = self.bounds.size.width;
    CGFloat viewH = self.bounds.size.height;

    NSUInteger count = arr.count;
    CGFloat w = viewW / (count * 2 - 1);
    CGFloat x = 0;
    CGFloat y = 0;
    CGFloat h = 0;

    for (int i = 0; i < count; i ++) {

        x = i * w * 2;
        h = ([arr[i] integerValue] / 100.0) * viewH;
        y = viewH - h;

        //画矩形柱体
        UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(x, y, w, h)];

        //填充对应颜色
        [(UIColor *)colorArr[i] set];

        CGContextAddPath(ctx, path.CGPath);

        //注意是Fill, 而不是Stroke, 这样才可以填充矩形区域
        CGContextFillPath(ctx);

        //文本绘制
        NSString *str = [NSString stringWithFormat:@"%ld", [arr[i] longValue]];

        //创建文字属性字典
        NSMutableDictionary *dic = [NSMutableDictionary dictionary];
        dic[NSFontAttributeName] = [UIFont systemFontOfSize:13];
        dic[NSForegroundColorAttributeName] = [UIColor blackColor];
        //设置笔触宽度
        dic[NSStrokeWidthAttributeName] = @1;

        //设置文字矩形的左上角位置,并且不会自动换行
        CGPoint p = CGPointMake(x + w * 0.25, y - 20);

        //drawInRect:会自动换行
        //drawAtPoint:不会自动换行
        [str drawAtPoint:p withAttributes:dic];
    }
}

II. ViewController里面的调用

• ViewController.m

#import "ViewController.h"
#import "HistogramView.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet HistogramView *histogramView; //调用柱状图

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
}

//点击按钮, 重新绘制图像, 可用于刷新数据, 拓展性很高
- (IBAction)needDisplay:(id)sender {

    [self.histogramView setNeedsDisplay];
}

@end