IOS 饼状图简单画法

作者: 半白乀 | 来源:发表于2016-04-28 16:24 被阅读889次

效果


ios饼状图简单画法-效果图

Demo地址

重写 - (void)drawRect:(CGRect)rect { //... }


线宽,用线去涂色!

CGFloat viewHalfWidth = rect.size.width/2.0;

CGFloat lineWidth = viewHalfWidth;

内部想预留空间减去相应长度即可

CGFloat insideCircleWidth = 50;

lineWidth = viewHalfWidth - insideCircleWidth;


半径、中心点

CGFloat circleRadius = viewHalfWidth - lineWidth/2;

CGPoint circleCenterPoint = CGPointMake(viewHalfWidth, viewHalfWidth);


必要的数据

NSArray<UIColor*>*colorArray = [NSArray arrayWithObjects:[UIColor redColor],  [UIColor orangeColor], [UIColor brownColor], [UIColor cyanColor], nil];

NSArray<NSNumber*>*percentArray = [NSArray arrayWithObjects:@(.1), @(.2), @(.3), @(.4), nil];


准备好之后开始画了!

CGContextRef pieViewContext = UIGraphicsGetCurrentContext();

CGFloat startAngel = 0;

CGFloat endAngel;

for (int i =0; i < colorArray.count; i++) {

endAngel = startAngel + M_PI*2*percentArray[i].floatValue;

CGContextAddArc(pieViewContext, circleCenterPoint.x, circleCenterPoint.y, circleRadius, startAngel, endAngel, NO);

CGContextSetStrokeColorWithColor(pieViewContext, colorArray[i].CGColor);

CGContextSetLineWidth(pieViewContext, lineWidth);

CGContextStrokePath(pieViewContext);

startAngel = endAngel;

}

Demo地址


最后,发挥自己的想象,抽离出其中变量,满足自己的具体需求!

相关文章

  • IOS 饼状图简单画法

    效果 Demo地址 重写 - (void)drawRect:(CGRect)rect { //... } 线宽,用...

  • iOS CGContextRef

    一、绘制饼状图 饼状图的简单实现代码:

  • iOS 饼状图

    1.效果图如下: 2.画饼图实现步骤如下: 1.新建PieView分类 import

  • 4.5Python数据处理篇之Matplotlib系列(五)--

    目录 [TOC] 前言 饼状图需要导入的是:plt.pie(x, labels= ) (一)简单的饼状图 (1)说...

  • iOS绘制饼状图

    效果图 1 创建SKPPieChartView继承于UIView 2 SKPPieChartView.h 3 SK...

  • Echarts

    http://echarts.baidu.com/api.html#echarts 柱状图: 饼状图: 饼状图2:...

  • Matplotlib实践使用笔记——基本画图

    基本画图操作 内容包括画线、条形图、直方图、饼图。 画线 画条形图 简单条形图 直方图 统计出现的次数 饼状图 会...

  • Flutter 113: 图解自定义 ACEPieWidget

    小菜上一节尝试绘制了一个简单的饼状图,今天尝试添加一点手势操作,可以随手指旋转饼状图; ACEPieWidget ...

  • 饼状图

    最近在重构项目,里面涉及到饼状图,就自己写了个,在这里分享一下:github地址 展示一下效果图: 大致思路如下:...

  • 饼状图

网友评论

  • 6f5fdca1b0ae:怎么设置饼图的间隔
  • 国王or乞丐:大哥,求指教啊,很急
    国王or乞丐:@喜欢一定宛如大海 来,先加个QQ吧,1030554941
    半白乀:@国王or乞丐 怎么指教?
  • 半白乀:第一次写!「引用」的使用完全为了美观! :sweat:
    半白乀:@妈妈说不要跟昵称太长的人一起玩 这基本就是完整的代码了!
    JustLee__:@喜欢一定宛如大海 有个demo给出来吗 :relaxed:

本文标题:IOS 饼状图简单画法

本文链接:https://www.haomeiwen.com/subject/abrhrttx.html