實現方式: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]; }