因?yàn)楣臼亲鲆苿?dòng)醫(yī)療APP的，里面會(huì)牽扯到用戶的數(shù)據(jù)問(wèn)題丁恭，關(guān)于用戶每天記錄的數(shù)據(jù)要怎么顯示牲览，這時(shí)就用到了圖表了，有了圖表它可以明了的顯示用戶的數(shù)據(jù)贡必，提高用戶的體驗(yàn)仔拟。
那下面就要說(shuō)這個(gè)圖標(biāo)到底該怎么畫理逊，思路在那里盒揉，要往哪方面想刚盈。
先看下效果圖吧：
屏幕快照 2016-06-03 11.53.04.png
1.思路
該圖表是用上下文，也就是CGContextRef進(jìn)行繪制崭闲，大家可能對(duì)它不是很陌生威蕉，它可以畫一條線韧涨，畫個(gè)正方形，長(zhǎng)方形如孝，圓等娩贷，有很多作用，該文章就是在于怎么通過(guò)這點(diǎn)，線腹躁，圓纺非，畫出你需要的表格赘方。
首先你要計(jì)算好窄陡，你要畫多大的圖表，要分成幾個(gè)間隔涂圆，有哪些變量等币叹。
2.主要代碼
先創(chuàng)建一個(gè)類.h里面
typedef enum DrowLineType{
PointType = 0,
BrokenType ,
BezierType,
}DrowLineType;
@interface ZYJ_Draw : UIView
// 數(shù)據(jù)
-(void)setData:(NSMutableArray*)LevelDataArray;
// 獲取繪制類型
@property(assign,nonatomic) DrowLineType * LineType;
//點(diǎn)數(shù)據(jù)的日期
-(void)drawData:(NSMutableArray *)drawDataArray;
//畫點(diǎn)的數(shù)據(jù)
-(void)drawDatacount:(NSMutableArray *)drawDataCountArry;
.m里面踩衩，在這里面，我要分開說(shuō)锚赤，把這個(gè)圖表分成部分來(lái)寫褐鸥。
聲明
#define POINT_CIRCLE 6.0f
@interface ZYJ_Draw()
{
@private
NSArray * KLevelDataArray;//橫坐標(biāo)數(shù)據(jù)
NSMutableArray *KdrawDataCountArry;
NSMutableArray *kdrawDataArray;
float _width;
float _height;
NSMutableArray *SeconArry; //計(jì)算時(shí)間的數(shù)據(jù)
}
@property(nonatomic)float width;
@property(nonatomic)float height;
@end
1.橫線
上下文
// 獲取上下文,進(jìn)行繪制
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.豎線
// 設(shè)置線的寬度 豎線
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軸
// 水平坐標(biāo)的數(shù)據(jù)
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軸沒(méi)有寫到這個(gè)類里面掸鹅，寫到了Controller里面
//畫豎直的坐標(biāo)
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.折線
在畫折線時(shí)巍沙，要確定一個(gè)點(diǎn)x,y坐標(biāo)才能畫點(diǎn)荷鼠，我用的是用測(cè)量時(shí)間確定x坐標(biāo)，也就是這個(gè)點(diǎn)距離最左邊的的距離矮嫉，測(cè)量的值確定y軸蠢笋。
確定x坐標(biāo)
如上圖可以看到麸澜，我在畫豎線時(shí)，每個(gè)間隔是有一定的寬度编矾，我把它轉(zhuǎn)化分鐘窄俏，下面是該點(diǎn)距離最左邊的寬度，也就是x的位移
NSString *strtime=SeconArry[i];
int j=[strtime intValue];
float width=j*self.frame.size.width/6/4/60+1.5;
確定y坐標(biāo)
因?yàn)閥坐標(biāo)是變化限寞，它是變化的履植，下面是一個(gè)點(diǎn)的y坐標(biāo)
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.畫點(diǎn)
畫點(diǎn)和畫折線幾本上是一樣的，下面就是畫點(diǎn)的程序
// 進(jìn)行繪圖 畫點(diǎn)
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));
}
以上就是用上下文畫表格的主要代碼，有沒(méi)有感覺(jué)很簡(jiǎn)單鼻种，其實(shí)一點(diǎn)點(diǎn)的來(lái)的話沙热，也沒(méi)有很難校读，下面是完整的效果圖
屏幕快照 2016-06-03 15.12.47.png
如果有什么疑問(wèn)可以給我留言歉秫，我會(huì)及時(shí)改正。
代碼下載地址https://github.com/zhaoyanjie/ZYJ_DrawViewController.git
網(wǎng)盤 下載地址 http://pan.baidu.com/s/1nvvUgS5
