CGContextRef簡單繪製-03餅圖、柱狀圖

餅圖

實現方式:dom

一、先計算出每組數據佔總數據的比例;spa

二、每組數據所佔的百分比乘以360度,得出餅圖的角度code

3.依次畫出每組的數據;orm

//繪製餅狀圖
    //總共100,三個餅圖 2五、2五、50,每一個餅圖顏色隨機
    //根據每一個餅圖佔據總數的百分比乘上360度,得出每一個餅圖的大小
    
    NSArray *data = @[@28, @42, @30];
    
    CGPoint center = CGPointMake(100, 100);
    CGFloat radius = 90;
    CGFloat startA = 0;
    CGFloat endA   = 0;
    
    for(int i = 0; i < data.count; i++){
        
        //獲取上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        
        //繪圖路徑
        startA = endA;
        NSNumber *num = data[i];
        CGFloat angle = num.integerValue / 100.0 * M_PI * 2;
        endA = startA + angle;
        
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
        
        [path addLineToPoint:center];
        
        CGContextAddPath(ctx, path.CGPath);
        
        CGContextFillPath(ctx);
        
    }

柱狀圖

實現方式:it

一、根據數據的總個數,計算出每組數據造成柱狀圖時所佔View的寬度,兩個柱狀圖直接的間隔大小 = 柱狀圖的寬度form

柱狀圖W = ViewW / (數據總個數 * 2 - 1)渲染

二、根據每組數據佔據總數的比例,計算出柱狀圖的高度;數據

//畫柱狀圖
    //總共100,三個柱狀圖 2五、2五、50,每一個柱狀圖顏色隨機
    //根據每一個柱狀圖佔據總數的百分比乘上View高度,得出每一個柱狀圖的高度
    //兩個柱狀圖直接的間隔=柱狀圖的寬度,View上顯示的柱狀圖+間隔=柱狀圖個數*2-1
    
    NSArray *data = @[@28, @32, @40];
    
    NSInteger viewW = rect.size.width;
    NSInteger viewH = rect.size.height;
    
    CGFloat barH = 0;   //柱狀圖高度
    CGFloat barW = viewW / (data.count * 2 - 1);   //柱狀圖寬度
    
    
    for(int i = 0; i <data.count; i++){
        
        NSNumber *num = data[i];
    
        barH = num.integerValue / 100.0 * viewH;    //bar的高度
        CGFloat barX = i * 2 * barW;
        CGFloat barY = viewH - barH;
        
        //獲取繪圖上下文
        CGContextRef ctf = UIGraphicsGetCurrentContext();
        
        //獲取繪圖路徑
        UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(barX, barY, barW, barH)];
        
        //添加路徑到上下文
        CGContextAddPath(ctf, path.CGPath);
        
        //渲染
        CGContextFillPath(ctf);
    }

產生隨機顏色

能夠把下面這段代碼包裝成UIColor的分類,方便使用di

+(instancetype)RandomColor
{
   CGFloat r = arc4random_uniform(255) / 255.0;
   CGFloat g = arc4random_uniform(255) / 255.0;
   CGFloat b = arc4random_uniform(255) / 255.0;
    
    return [UIColor colorWithRed:r  green:g blue:b alpha:1];
}
相關文章
相關標籤/搜索