iOS中图表要怎么画

来源：互联网发布：linux c开发视频教程编辑：程序博客网时间：2024/04/28 23:32

因为公司是做移动医疗APP的，里面会牵扯到用户的数据问题，关于用户每天记录的数据要怎么显示，这时就用到了图表了，有了图表它可以明了的显示用户的数据，提高用户的体验。
那下面就要说这个图标到底该怎么画，思路在那里，要往哪方面想。

先看下效果图吧：

屏幕快照 2016-06-03 11.53.04.png

1.思路

该图表是用上下文，也就是CGContextRef进行绘制，大家可能对它不是很陌生，它可以画一条线，画个正方形，长方形，圆等，有很多作用，该文章就是在于怎么通过这点，线，圆，画出你需要的表格。

首先你要计算好，你要画多大的图表，要分成几个间隔，有哪些变量等。

2.主要代码

先创建一个类.h里面

typedef enum DrowLineType{    PointType = 0,    BrokenType ,    BezierType,}DrowLineType;@interface ZYJ_Draw : UIView// 数据-(void)setData:(NSMutableArray*)LevelDataArray;// 获取绘制类型@property(assign,nonatomic) DrowLineType * LineType;//点数据的日期-(void)drawData:(NSMutableArray *)drawDataArray;//画点的数据-(void)drawDatacount:(NSMutableArray *)drawDataCountArry;

.m里面，在这里面，我要分开说，把这个图表分成部分来写。

声明

#define POINT_CIRCLE  6.0f@interface ZYJ_Draw(){@private    NSArray * KLevelDataArray;//横坐标数据    NSMutableArray *KdrawDataCountArry;    NSMutableArray *kdrawDataArray;    float _width;    float _height;    NSMutableArray *SeconArry; //计算时间的数据}@property(nonatomic)float width;@property(nonatomic)float height;@end

1.横线

上下文

// 获取上下文,进行绘制    CGContextRef ContextRef = UIGraphicsGetCurrentContext();

画横线，横线是12条

// 线的颜色 横线    CGContextSetStrokeColorWithColor(ContextRef, [UIColor lightGrayColor].CGColor);    for (int i =0 ; i<12; i++) {        if (i!=0||i!=11) {             CGContextSetLineWidth(ContextRef, 0.9);        }        CGContextMoveToPoint(ContextRef, 0,i*self.frame.size.height/11);        CGContextAddLineToPoint(ContextRef,self.frame.size.width,(self.frame.size.height/11)*i);        CGContextStrokePath(ContextRef);    }

2.竖线

// 设置线的宽度 竖线    for (int i= 0; i< 7; i++) {        if (i==0||i==6) {            CGFloat lengths[] = {1,1};            CGContextSetLineDash(ContextRef, 0, lengths, 0);        }        else        {            CGFloat lengths[] = {3,3};            CGContextSetLineDash(ContextRef, 0, lengths, 2);        }        CGContextMoveToPoint(ContextRef, i*self.frame.size.width/6, self.frame.size.height);        CGContextAddLineToPoint(ContextRef, i*self.frame.size.width/6,0);        CGContextStrokePath(ContextRef);    }

到这的话，图表的大致就好了，剩下的x，y轴，和折线的形成了

3.x轴

// 水平坐标的数据    for (int i = 0 ; i<KLevelDataArray.count; i++) {        float x=self.bounds.size.width/(KLevelDataArray.count-1);        UILabel * LevelLabel= [[UILabel alloc]initWithFrame:CGRectMake(i*x-20, self.bounds.size.height+5, 40, 10)];        LevelLabel.textAlignment=NSTextAlignmentCenter;        LevelLabel.text = KLevelDataArray[i];        //LevelLabel.backgroundColor=[UIColor redColor];        LevelLabel.textColor = UIColorFromRGB(0x333333);        LevelLabel.font = [UIFont systemFontOfSize:12];        [ self addSubview:LevelLabel];    }

4.y轴

y轴没有写到这个类里面，写到了Controller里面

//画竖直的坐标    for (int i =(int)self.VerticalDataArray.count -1 ; i>=0; i--) {        UILabel * VerticalDataArrayLabel = [[UILabel alloc]init];        [drwaBG addSubview:VerticalDataArrayLabel];        float y=i*(430/(self.VerticalDataArray.count+1));        VerticalDataArrayLabel.textAlignment=NSTextAlignmentCenter;        [VerticalDataArrayLabel mas_makeConstraints:^(MASConstraintMaker *make) {            make.top.equalTo(titleLable.mas_bottom).offset(XYZScreenRateIphoneHeight*(20+y));            make.left.equalTo(drwaBG).offset(XYZScreenRateIphoneWidth*0);            make.height.equalTo(@(XYZScreenRateIphoneWidth*10));            make.width.equalTo(@(XYZScreenRateIphoneWidth*30));        }];        VerticalDataArrayLabel.font = [UIFont systemFontOfSize:12];        VerticalDataArrayLabel.text = self.VerticalDataArray[self.VerticalDataArray.count-i-1];    }

5.折线

在画折线时，要确定一个点x,y坐标才能画点，我用的是用测量时间确定x坐标，也就是这个点距离最左边的的距离，测量的值确定y轴。

确定x坐标

如上图可以看到，我在画竖线时，每个间隔是有一定的宽度，我把它转化分钟，下面是该点距离最左边的宽度，也就是x的位移

 NSString *strtime=SeconArry[i];        int  j=[strtime intValue];        float width=j*self.frame.size.width/6/4/60+1.5;

确定y坐标

因为y坐标是变化，它是变化的，下面是一个点的y坐标

 if (count>=4.0&&count<=9.0) {            float height=self.frame.size.height-star-2*star-(count-4)*star-3;            self.height=height;            CGContextSetFillColor(ContextRef,  CGColorGetComponents(UIColorFromRGB(0x24b3fa).CGColor));        }

折线代码

float star=self.frame.size.height/11;    //画折线    CGContextSetStrokeColorWithColor(ContextRef, [UIColor blackColor].CGColor);    CGContextSetLineWidth(ContextRef, 0.6f);    NSLog(@"%@",KdrawDataCountArry);    //CGContextMoveToPoint(ContextRef, 20, 200);    for (NSInteger i=0; i<KdrawDataCountArry.count; i++) {        CGContextSetLineDash(ContextRef, 0, 0, 0);        NSString *strtime=SeconArry[i];        int  j=[strtime intValue];        float width=j*self.frame.size.width/6/4/60+1.5;        NSString *str=KdrawDataCountArry[i];        float count=[str floatValue];        if (count>=4.0&&count<=9.0) {            float height=self.frame.size.height-star-2*star-(count-4)*star;            self.height=height;        }        else if (count<4)        {            float height=self.frame.size.height-star-count*star/2;            self.height=height;        }        else if(count>9.0&&count<=11.0)        {            float height=self.frame.size.height-star-7*star-(count-9)*star/2;            self.height=height;        }        else if (count>11.0&&count<15.0)        {            float height=self.frame.size.height-star-8*star-(count-11.0)*star/4;            self.height=height;        }        else        {            float height=self.frame.size.height-star-9*star-(count-15.0)*star/18;            self.height=height;        }        //开始画线        if (i==0) {            CGContextMoveToPoint(ContextRef, width, self.height);        }        else        {            CGContextAddLineToPoint(ContextRef, width, self.height);        }    }    CGContextStrokePath(ContextRef);

6.画点

画点和画折线几本上是一样的，下面就是画点的程序

 // 进行绘图 画点    for (NSInteger i=0; i<KdrawDataCountArry.count; i++) {        NSString *strtime=SeconArry[i];        int  j=[strtime intValue];        float width=j*self.frame.size.width/6/4/60-1.5;        NSString *str=KdrawDataCountArry[i];        float count=[str floatValue];        if (count>=4.0&&count<=9.0) {            float height=self.frame.size.height-star-2*star-(count-4)*star-3;            self.height=height;            CGContextSetFillColor(ContextRef,  CGColorGetComponents(UIColorFromRGB(0x24b3fa).CGColor));        }        else if (count>9.0&&count<=11.0)        {            float height=self.frame.size.height-star-7*star-(count-9)*star/2;            self.height=height;            CGContextSetFillColor(ContextRef,  CGColorGetComponents([UIColor redColor].CGColor));        }        else if (count>11.0&&count<=15.0)        {            float height=self.frame.size.height-star-8*star-(count-11.0)*star/4;            self.height=height;            CGContextSetFillColor(ContextRef,  CGColorGetComponents([UIColor redColor].CGColor));        }        else if (count>15.0&&count<=33.0)        {            float height=self.frame.size.height-star-9*star-(count-15.0)*star/18;            self.height=height;            CGContextSetFillColor(ContextRef,  CGColorGetComponents([UIColor redColor].CGColor));        }        else        {            float height=self.frame.size.height-star-count*star/2;            self.height=height;            CGContextSetFillColor(ContextRef,  CGColorGetComponents([UIColor redColor].CGColor));        }        CGContextFillEllipseInRect(ContextRef, CGRectMake(width, self.height, 6.0, 6.0));    }

以上就是用上下文画表格的主要代码，有没有感觉很简单，其实一点点的来的话，也没有很难，下面是完整的效果图

屏幕快照 2016-06-03 15.12.47.png

如果有什么疑问可以给我留言，我会及时改正。

代码下载地址https://github.com/zhaoyanjie/ZYJ_DrawViewController.git

网盘下载地址 http://pan.baidu.com/s/1nvvUgS5

文／敲代码的小矮人（简书作者）
原文链接：http://www.jianshu.com/p/c9a07b97d3ee
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

0 0