iOS图表制作-01

基本的柱状图、折线图展示：（无交互事件）

一、柱状图展示

1、ZWChartContentView 柱状图承载视图:

默认6个柱状图，不滚动；超过6个，会设置可以滚动

ZWChartContentView.h

@interfaceZWChartContentView :UIView

/**  柱状图距离两边的距离:默认30 */

@property (nonatomic, assign)  CGFloat histogramSpace;

/**  柱状图数据数组  */

@property(nonatomic,strong)  NSArray*histogramDataArray;

/** 柱状图颜色数组  */

@property(nonatomic,strong)  NSArray*histogramColorArray;

/** 柱状图数据颜色  */

@property(nonatomic,strong)  UIColor*histogramTextColor;

/** 柱状图数据字体大小:默认15  */

@property(nonatomic,assign)  CGFloathistogramTextFont;

@end

ZWChartContentView.m

#import "ZWChartContentView.h"

#import "ZWChartsView.h"

@interface ZWChartContentView()

@property (strong, nonatomic) UIScrollView *scrollView;//数据过多，需要滚动

@property (strong, nonatomic) ZWChatsView *histogramView;

@end

@implementationZWChartContentView

- (instancetype)initWithFrame:(CGRect)frame

{

    if(self= [superinitWithFrame:frame]) {


        [selfsetUI];

    }

    return self;

}

#pragma mark - 绘制坐标轴

- (void)drawRect:(CGRect)rect

{


}

#pragma mark - setUI

- (void)setUI

{

    self.backgroundColor = [UIColor brownColor];


    //添加图标展示视图

    [self addSubview:self.histogramView];

}

#pragma mark - setter/getter method

//柱状图数据

- (void)setHistogramDataArray:(NSArray*)histogramDataArray

{

    if(histogramDataArray.count> 6) {

        [self.histogramView removeFromSuperview];

        [self addSubview:self.scrollView];

        [self.scrollView addSubview:self.histogramView];

        self.histogramView.histogramWidth = 30.0;

        self.histogramView.histogramSpace = 30.0;

        CGFloatcontent_w = 30.0*(histogramDataArray.count* 2 + 1);

        self.histogramView.frame = CGRectMake(30.0, 30.0, content_w, self.scrollView.bounds.size.height-50.0);

        [self.scrollView setContentSize:CGSizeMake(content_w+30.0f, 0)];

    }

    self.histogramView.histogramDataArray = histogramDataArray;

    [self.histogramView setNeedsDisplay];

}

//柱状图颜色

- (void)setHistogramColorArray:(NSArray*)histogramColorArray

{

    self.histogramView.histogramColorArray = histogramColorArray;

}

//柱状图距离两边的距离

- (void)setHistogramSpace:(CGFloat)histogramSpace

{

    self.histogramView.histogramSpace = histogramSpace;

}

//柱状图数据颜色

- (void)setHistogramTextColor:(UIColor*)histogramTextColor

{

    self.histogramView.histogramTextColor = histogramTextColor;

}

//柱状图数据字体大小

- (void)setHistogramTextFont:(CGFloat)histogramTextFont

{

    self.histogramView.histogramTextFont = histogramTextFont;

}

#pragma mark - 懒加载

- (UIScrollView*)scrollView

{

    if (!_scrollView) {

        _scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];

        _scrollView.backgroundColor = [UIColor redColor];

    }

    return _scrollView;

}

- (ZWChatsView*)histogramView

{

    if (!_histogramView) {

        _histogramView = [[ZWChatsView alloc] initWithFrame:CGRectMake(30, 30, self.bounds.size.width-40, 300)];

        _histogramView.backgroundColor = [UIColor greenColor];

    }

    return _histogramView;

}

@end

2、ZWChatsView.h  创建柱状图以及坐标轴尺度

ZWChatsView.h

#define Histogram_Height_Scale100.0//柱状图高度比例

#define Histogram_Space30//柱状图间隔距离

/**

 * ZWChatsView: 利用图形上下文绘制柱状图（仅供简单的展示）

 */

@interfaceZWChatsView :UIView

/**  柱状图距离两边的距离:默认30 */

@property (nonatomic, assign)  CGFloat histogramSpace;

/**  柱状图数据数组  */

@property(nonatomic,strong)  NSArray*histogramDataArray;

/** 柱状图颜色数组  */

@property(nonatomic,strong)  NSArray*histogramColorArray;

/** 柱状图数据颜色  */

@property(nonatomic,strong)  UIColor*histogramTextColor;

/** 柱状图数据字体大小:默认15  */

@property(nonatomic,assign)  CGFloathistogramTextFont;

@end

ZWChatsView.m

#import "ZWChatsView.h"

@interface ZWChatsView()

@property (assign, nonatomic) CGFloat view_H;//视图高度

@property (assign, nonatomic) CGFloat view_W;//视图宽度

@property (assign, nonatomic) CGFloat max_scale;//根据数据获取最大刻度值

@end

@implementation ZWChatsView

- (instancetype)initWithFrame:(CGRect)frame

{

    if(self= [superinitWithFrame:frame]) {


        self.backgroundColor = [UIColor whiteColor];

        self.histogramDataArray= @[@20, @15, @70, @70, @55];

        self.histogramColorArray = @[[UIColor redColor], [UIColor greenColor], [UIColor blueColor], [UIColor brownColor], [UIColor yellowColor]];

        self.histogramTextColor = [UIColor redColor];

        self.histogramTextFont = 15.0;

        self.histogramSpace= 30;

    }

    return self;

}

#pragma mark -

#pragma mark - setUI

- (void)drawRect:(CGRect)rect {


    if (self.histogramDataArray.count == 0) {

        return;

    }


    CGContextRef context = UIGraphicsGetCurrentContext();


    NSUInteger count = self.histogramDataArray.count;

    //柱状图宽度

    CGFloatw = (self.view_W- 2 *self.histogramSpace- (count-1)*Histogram_Space) / count;

    CGFloatx = 0;

    CGFloaty = 0;

    CGFloath = 0;


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


        x = (w +Histogram_Space)*i +self.histogramSpace;

        h = ([self.histogramDataArray[i] integerValue] / Histogram_Height_Scale) * self.view_H;

        y =self.view_H- h;


        UIColor*color;

        if (self.histogramColorArray.count == 1) {

            color = (UIColor*)self.histogramColorArray[0];

        }else{

            color =self.histogramColorArray[i];

        }


        //绘制横坐标刻度尺

        [self createLabelXWithHistogram_x:x histogram_y:y histogram_w:w tag:i];


        //绘制矩形图

        [self drawHistogramWithContext:context color:color histogram_x:x histogram_y:y histogram_w:w histogram_h:h];


        //文本绘制

        NSString *str = [NSString stringWithFormat:@"%ld", [self.histogramDataArray[i] longValue]];

        NSMutableDictionary *dict = [self drawDataTextWithtext:str color:self.histogramTextColor size:self.histogramTextFont];

        //设置文字矩形的左上角位置,并且不会自动换行

        CGPointpoint =CGPointMake(x + w * 0.25, y - 20);

        //drawInRect:会自动换行

        //drawAtPoint:不会自动换行

        [strdrawAtPoint:pointwithAttributes:dict];

    }


    //画坐标轴

    [self drawCoordinateAxisWithContext:context];


    //添加Y轴坐标刻度

    [self createLabelY];

}

#pragma mark - 画坐标轴

- (void)drawCoordinateAxisWithContext:(CGContextRef)context

{

    /*******画出坐标轴********/

    CGContextSetLineWidth(context, 3.0);

    CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);

    CGContextMoveToPoint(context, 0, 0);

    CGContextAddLineToPoint(context, 0, self.view_H);

    CGContextAddLineToPoint(context,self.view_W, self.view_H);

    CGContextStrokePath(context);

}

#pragma mark - 添加横-纵坐标刻度尺

//创建x轴的数据

- (void)createLabelXWithHistogram_x:(CGFloat)histogram_x histogram_y:(CGFloat)histogram_y histogram_w:(CGFloat)histogram_w tag:(NSInteger)tag

{

    UILabel* label = [[UILabelalloc]initWithFrame:CGRectMake(histogram_x,self.view_H, histogram_w, 20.0)];

    label.textAlignment = NSTextAlignmentCenter;

    label.tag= 1000 + tag;

    label.text = [NSString stringWithFormat:@"%ld月",tag+1];

    label.font = [UIFont systemFontOfSize:10];

    label.transform = CGAffineTransformMakeRotation(M_PI * 0.3); //设置字体倾斜

    [selfaddSubview:label];

}

//创建y轴数据

- (void)createLabelY

{

    CGFloatcount = 10;

    CGFloatlabel_H =self.view_H/ count;

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

        UILabel* label = [[UILabelalloc]initWithFrame:CGRectMake(-32, label_H*i, 30, label_H)];

        label.textAlignment = NSTextAlignmentRight;

        label.layer.borderColor = [UIColor greenColor].CGColor;

        label.layer.borderWidth= 1.0;

        label.tag= 2000 + i;

        label.text= [NSStringstringWithFormat:@"%.0f",count*10];

        label.font = [UIFont systemFontOfSize:10];

        [selfaddSubview:label];


        count -= 1;

    }

}

#pragma mark - 画柱状图

- (void)drawHistogramWithContext:(CGContextRef)context color:(UIColor*)color histogram_x:(CGFloat)histogram_x histogram_y:(CGFloat)histogram_y histogram_w:(CGFloat)histogram_w histogram_h:(CGFloat)histogram_h

{


    //画矩形柱体

    UIBezierPath*path = [UIBezierPathbezierPathWithRect:CGRectMake(histogram_x, histogram_y, histogram_w, histogram_h)];

    //填充对应颜色

    [colorset];

    CGContextAddPath(context, path.CGPath);


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

    CGContextFillPath(context);

}

#pragma mark - 设置数据文字

- (NSMutableDictionary*)drawDataTextWithtext:(NSString*)text color:(UIColor*)color size:(CGFloat)size

{

    //创建文字属性字典

    NSMutableDictionary *dict = [NSMutableDictionary dictionary];

    dict[NSFontAttributeName] = [UIFont systemFontOfSize:size];

    dict[NSForegroundColorAttributeName] = color;

    //设置笔触宽度

    dict[NSStrokeWidthAttributeName] = @1;

    returndict;

}

#pragma mark -

#pragma mark - 逻辑处理

#pragma mark -

#pragma mark - 懒加载

//柱状图数据

- (void)setHistogramDataArray:(NSArray*)histogramDataArray

{

    _histogramDataArray= histogramDataArray;

}

//柱状图颜色

- (void)setHistogramColorArray:(NSArray*)histogramColorArray

{

    _histogramColorArray= histogramColorArray;

}

//柱状图距离两边的距离

- (void)setHistogramSpace:(CGFloat)histogramSpace

{

    _histogramSpace= histogramSpace;

}

//柱状图数据颜色

- (void)setHistogramTextColor:(UIColor*)histogramTextColor

{

    _histogramTextColor= histogramTextColor;

}

//柱状图数据字体大小

- (void)setHistogramTextFont:(CGFloat)histogramTextFont

{

    _histogramTextFont= histogramTextFont;

}

- (CGFloat)view_H

{

    return self.bounds.size.height;

}

- (CGFloat)view_W

{

    return self.bounds.size.width;

}

@end

3、控制器里面

- (void)viewDidLoad {

    [super viewDidLoad];


    [self addSubviews];

}

#pragma mark - 添加子控件

- (void)addSubviews

{


    ZWChartContentView *chartContentV = [[ZWChartContentView alloc] initWithFrame:CGRectMake(5, 100, self.view.bounds.size.width-10, 350)];

//不设置数据，默认为6个，不能滚动

    [self.viewaddSubview:chartContentV];

}

效果图：


设置数据源：超过6个会自动添加scrollView用以滚动

    chartContentV.histogramDataArray= @[@20, @15, @70, @66, @55, @38, @47, @90, @81, @12, @59, @58];

效果图：


未完待续.......

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,905评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,140评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,791评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,483评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,476评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,516评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,905评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,560评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,778评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,338评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,925评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2赞 342