iOS中圖表要怎么畫

因為公司是做移動醫(yī)療APP的，里面會牽扯到用戶的數(shù)據(jù)問題，關(guān)于用戶每天記錄的數(shù)據(jù)要怎么顯示，這時就用到了圖表了，有了圖表它可以明了的顯示用戶的數(shù)據(jù)，提高用戶的體驗。
那下面就要說這個圖標到底該怎么畫，思路在那里，要往哪方面想。

先看下效果圖吧：

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

1.思路

該圖表是用上下文，也就是CGContextRef進行繪制，大家可能對它不是很陌生，它可以畫一條線，畫個正方形，長方形，圓等，有很多作用，該文章就是在于怎么通過這點，線，圓，畫出你需要的表格。

首先你要計算好，你要畫多大的圖表，要分成幾個間隔，有哪些變量等。

2.主要代碼

先創(chuàng)建一個類.h里面

typedef enum DrowLineType{
    PointType = 0,
    BrokenType ,
    BezierType,
}DrowLineType;
@interface ZYJ_Draw : UIView
// 數(shù)據(jù)
-(void)setData:(NSMutableArray*)LevelDataArray;
// 獲取繪制類型
@property(assign,nonatomic) DrowLineType * LineType;
//點數(shù)據(jù)的日期
-(void)drawData:(NSMutableArray *)drawDataArray;
//畫點的數(shù)據(jù)
-(void)drawDatacount:(NSMutableArray *)drawDataCountArry;

.m里面，在這里面，我要分開說，把這個圖表分成部分來寫。

聲明

#define POINT_CIRCLE  6.0f
@interface ZYJ_Draw()
{
@private
    NSArray * KLevelDataArray;//橫坐標數(shù)據(jù)
    NSMutableArray *KdrawDataCountArry;
    NSMutableArray *kdrawDataArray;
    float _width;
    float _height;
    NSMutableArray *SeconArry; //計算時間的數(shù)據(jù)
}
@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.豎線

// 設(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軸

// 水平坐標的數(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軸沒有寫到這個類里面，寫到了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坐標

如上圖可以看到，我在畫豎線時，每個間隔是有一定的寬度，我把它轉(zhuǎn)化分鐘，下面是該點距離最左邊的寬度，也就是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

網(wǎng)盤 下載地址 http://pan.baidu.com/s/1nvvUgS5

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容