iOS中图表要怎么画

因为公司是做移动医疗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

著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。