iOS之画饼图

iOS之画饼图

1.效果图如下

2.画饼图实现步骤如下:

  • 1.在main.storyboard中拖入一个UIView控件,并设置其Custom Class 为HMPieView。如下图

  • 2.新建HMPieView类
//
//  HMPieView.h
//  03-饼图
//

#import <UIKit/UIKit.h>

@interface HMPieView : UIView

@end
//
//  HMPieView.m
//  03-饼图
//

#import "HMPieView.h"
#import "UIColor+Random.h"
@implementation HMPieView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code

    NSArray *data = @[@25,@25,@50];

    // 1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 2.拼接路径
    CGPoint center = CGPointMake(125, 125);
    CGFloat radius = 120;
    CGFloat startA = 0;
    CGFloat angle = 0;
    CGFloat endA = 0;

    for (NSNumber *number in data) {
        // 2.拼接路径
        startA = endA;
        angle = number.intValue / 100.0 * M_PI * 2;
        endA = startA + angle;
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
        [path addLineToPoint:center];

        [[UIColor randomColor] set];
        // 把路径添加上下文
        CGContextAddPath(ctx, path.CGPath);

        // 渲染
        CGContextFillPath(ctx);

    }

}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    CGFloat a = arc4random_uniform(6);
    //CGFloat a =  arc4random()%6;
    NSLog(@"随机数--%f",a);

    [self setNeedsDisplay];
}

- (void)drawPie
{
    // 1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 2.拼接路径
    CGPoint center = CGPointMake(125, 125);
    CGFloat radius = 120;
    CGFloat startA = 0;
    CGFloat angle = 0;
    CGFloat endA = 0;

    // 第一个扇形
    angle = 25 / 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);
    [[UIColor redColor] set];

    // 渲染
    CGContextFillPath(ctx);

    // 第二个扇形
    startA = endA;
    angle = 25 / 100.0 * M_PI * 2;
    endA = startA + angle;
    UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
    [path1 addLineToPoint:center];
    // 添加到上下文
    CGContextAddPath(ctx, path1.CGPath);
    [[UIColor greenColor] set];
    // 渲染
    CGContextFillPath(ctx);

    // 第三个扇形
    startA = endA;
    angle = 50 / 100.0 * M_PI * 2;
    endA = startA + angle;
    UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
    [path2 addLineToPoint:center];
    // 添加到上下文
    CGContextAddPath(ctx, path2.CGPath);
    [[UIColor blueColor] set];
    // 渲染
    CGContextFillPath(ctx);

   }

@end
  • 3.新建UIColor+Random类
//
//  UIColor+Random.h
//  03-饼图
//

#import <UIKit/UIKit.h>

@interface UIColor (Random)
+ (UIColor *)randomColor;
@end
//
//  UIColor+Random.m
//  03-饼图
//

#import "UIColor+Random.h"

@implementation UIColor (Random)

+ (UIColor *)randomColor
{
    /*
     颜色有两种表现形式 RGB RGBA
     RGB 24
     R,G,B每个颜色通道8位
     8的二进制 255
     R,G,B每个颜色取值 0 ~255
     120 / 255.0

     */
    CGFloat r = arc4random_uniform(256) / 255.0;
    CGFloat g = arc4random_uniform(256) / 255.0;
    CGFloat b = arc4random_uniform(256) / 255.0;

    return [UIColor colorWithRed:r green:g blue:b alpha:1];
}

@end
时间: 2024-10-21 04:58:45

iOS之画饼图的相关文章

ios实现画虚线

//一定要重写UIView类中的-(void)drawRect:(CGRect)rect方法才能画线: //绘制UIView -(void)drawRect:(CGRect)rect { [self drawLine]; } /** *  画线 */ -(void)drawLine { //1.获取上下文 CGContextRef context = UIGraphicsGetCurrentContext(); //2.创建可变的路径并设置路径 CGMutablePathRef path = C

canvas如何画饼图

画饼图,废话不多说,直接上代码和效果图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>绘制弧线</title> <style type="text/css"> canvas{ border:1px solid #f00; } </style> </head> <body> &

(转)浅谈HTML5与css3画饼图!

神马系饼图? 饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到.如cnzz的统计饼图 从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现 目前众多站点制作饼图大多使用flash,或者后台语言生成,如PHP,Python只要安装相应的基础库就能实现画图.但很少有站点这么干,因为耗费服务器资源. cnzz里使用的就是flash PHP生成的 HTML5与CSS3也能画出饼图 不得不说,HTML5与CSS3的推出,将推翻老一代的网页制作者.特别在当今浏览

计算机图形学第四章练习——画饼图

计算机图形学第四章后边示例代码里有一段画饼图的练习,画出来是这样的 中间有一段中心画圆法未实现,搜集了网上资料补全并执行了这段代码,作为openGL的学习练习 #include <GL/glut.h> #include <stdlib.h> #include <math.h> GLsizei winWidth = 400, winHeight = 300; const GLdouble twoPi = 6.283185; class scrPt { public: GL

iOS CGContextRef 画一条直线,仅仅是画一条直线

今天周末休息,想好好补补课,无奈,弄了一上午,全部都是半边拉块的demo,有一种深深的挫败感. 中午睡醒一觉后,又看了一集“奔跑吧兄弟”,然后一下午时间就过去了. 仔细一想,应该是我的补课方法不对:要补的东西太多了,必须得从大处入手,如果从小处入手,那得花老鼻子的时间来弄了. 然后,那就从困扰了好久的画线开始吧. 前两天做项目,头儿让我用画线实现一个功能,他一说画线我就打怵,因为对这一方面不是很熟,这几天鼓捣了几下子,但是每次都是做着做着这个,又发现了另外一个不会的东东,转战去其他战场了,等反应

r画饼图

原始图样: library(ggplot2) dt = data.frame(A = c(2, 7, 4, 10, 1), B = c('B','A','C','D','E')) p = ggplot(dt, aes(x = "", y = A, fill = B)) + geom_bar(stat = "identity") + coord_polar(theta = "y") ## 把柱状图折叠成饼图(极坐标) p 如何去除饼图中心的杂点:

使用css3画饼图

CSS3 Gradient介绍参考地址: http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html http://www.zhangxinxu.com/wordpress/?p=3639 效果图: html: <div class="colorWheel"> <div class="piece"></div> </div> css

jquery flot pie画饼图

具体效果如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script language="javascript" type="text/j

JS 画饼图,折线图

网址: http://www.hcharts.cn/demo/index.php 效果图: 它的网址里面都很全的.简单实用扣代码即可 使用时注意数据格式即可 1 //获取mood_evalue的百分比 2 $total_mood_evalue = 0; 3 //初始化key的数组,统计key的百分比 4 $mood_key_arr = array(); 5 6 //1-5分别对应值1-5: 7 $mood_evalue_1 = $mood_evalue_2 = $mood_evalue_3 =