美文网首页
iOS绘制含有数据引导线和扇形分割线的饼图

iOS绘制含有数据引导线和扇形分割线的饼图

作者: fairy_happy | 来源:发表于2018-12-19 17:19 被阅读27次

    最近工作需要,要实现一个含有分割线和数据引导线的饼图。效果图如下:


    IMG_0768.jpg

    单纯绘制饼图很简单,这个需求最大的问题是要在同色块中绘制分割线以便区分不同的数据占比。
    我的思路是:以饼图圆心为起点,各个扇形的的交接处在外圆上的点为终点,画一条直线做扇形之间的分割线。
    具体代码如下:

    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:start endAngle:end clockwise:true];
                
                
                [color set];
                //添加一根线到圆心
                [path addLineToPoint:center];
                [path fill];
                
                UIBezierPath *currentPath = [UIBezierPath bezierPath];
                currentPath.lineCapStyle = kCGLineCapRound;//拐弯处为弧线
                currentPath.lineJoinStyle = kCGLineJoinRound;
                
                //绘制扇形区之间的分割线,从圆心开始,画一条到各个扇形起点的线
                
                // 设置起点
                [currentPath moveToPoint:center];
                //把点加入到路径里面
    
                float radian = (M_PI/180.0f)*(finallPercent * 360);
                
                float x = center.x + cos(radian)*(radius-2);
                
                float y = center.y + sin(radian)*(radius-2);
                CGPoint ll = CGPointMake(x, y);
                [currentPath addLineToPoint:ll];
                
                //画线
                currentPath.lineWidth = 2;
                [HDColorD7AB70 setStroke];
                [currentPath stroke];
            
    

    demo地址:带数据引导线和扇形分割线的饼图

    相关文章

      网友评论

          本文标题:iOS绘制含有数据引导线和扇形分割线的饼图

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