实现方式: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]; }