ios - 快速饼图切片

Question

我正在尝试制作饼图。实际上已经完成了，但是我想获得一些值，并且每个值都应该是馅饼的一部分。我唯一能做的就是用 slider 填充馅饼。如何为某些值制作具有不同颜色的不同切片？

这是我绘制图表的代码(我在堆栈中得到的):

   import UIKit

@IBDesignable class ChartView: UIView {

    @IBInspectable var progress : Double =  0.0 {

        didSet {
                self.setNeedsDisplay()
            }
        }


    @IBInspectable var noProgress : Double =  0.0 {

        didSet {
            self.setNeedsDisplay()
        }
    }


        required init(coder aDecoder: NSCoder) {
            super.init(coder:aDecoder)
            self.contentMode = .Redraw
        }

        override init(frame: CGRect) {
            super.init(frame: frame)
            self.backgroundColor = UIColor.clearColor()
            self.contentMode = .Redraw
        }

        override func drawRect(rect: CGRect) {
            let color = UIColor.blueColor().CGColor
            let lineWidth : CGFloat = 2.0

            // Calculate box with insets
            let margin: CGFloat = lineWidth
            let box0 = CGRectInset(self.bounds, margin, margin)
            let side : CGFloat = min(box0.width, box0.height)
            let box = CGRectMake((self.bounds.width-side)/2, (self.bounds.height-side)/2,side,side)


            let ctx = UIGraphicsGetCurrentContext()

            // Draw outline
            CGContextBeginPath(ctx)
            CGContextSetStrokeColorWithColor(ctx, UIColor.blackColor().CGColor)
            CGContextSetLineWidth(ctx, lineWidth)
            CGContextAddEllipseInRect(ctx, box)
            CGContextClosePath(ctx)
            CGContextStrokePath(ctx)

            // Draw arc
            let delta : CGFloat = -CGFloat(M_PI_2)
            let radius : CGFloat = min(box.width, box.height)/2.0

            func prog_to_rad(p: Double) -> CGFloat {
                let rad = CGFloat((p *  M_PI)/180)
                return rad
            }

            func draw_arc(s: CGFloat, e: CGFloat, color: CGColor) {
                CGContextBeginPath(ctx)
                CGContextMoveToPoint(ctx, box.midX, box.midY)
                CGContextSetFillColorWithColor(ctx, color)

                CGContextAddArc(ctx, box.midX, box.midY, radius-lineWidth/2, s, e, 0)

                CGContextClosePath(ctx)
                CGContextFillPath(ctx)
            }


            if progress > 0 {
                let s = prog_to_rad(noProgress * 360/100)
                let e = prog_to_rad(progress * 360/100)
                draw_arc(s, e, color)
            }


    }
}

这是我的 ViewController:

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var pieChartView: ChartView!
    @IBOutlet weak var slider: UISlider!



    override func viewDidLoad() {
        super.viewDidLoad()
   // Do any additional setup after loading the view, typically from a nib.



    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }



    @IBAction func setValue(sender: UISlider) {

    pieChartView.progress = Double(sender.value)



    }


}

Answer 1

此代码来 self 的 blogpost ，它使用 CAShapeLayer 和 UIBezierPath。您可以使用您喜欢的任何颜色创建任意数量的段。

extension CGFloat {
    func radians() -> CGFloat {
        let b = CGFloat(M_PI) * (self/180)
        return b
    }
}

extension UIBezierPath {
    convenience init(circleSegmentCenter center:CGPoint, radius:CGFloat, startAngle:CGFloat, endAngle:CGFloat)
    {
        self.init()
        self.moveToPoint(CGPointMake(center.x, center.y))
        self.addArcWithCenter(center, radius:radius, startAngle:startAngle.radians(), endAngle: endAngle.radians(), clockwise:true)
        self.closePath()
    }
}



func pieChart(pieces:[(UIBezierPath, UIColor)], viewRect:CGRect) -> UIView {
    var layers = [CAShapeLayer]()
    for p in pieces {
        let layer = CAShapeLayer()
        layer.path = p.0.CGPath
        layer.fillColor = p.1.CGColor
        layer.strokeColor = UIColor.whiteColor().CGColor
        layers.append(layer)
    }
    let view = UIView(frame: viewRect)
    for l in layers {

        view.layer.addSublayer(l)


    }
    return view
}

let rectSize = CGRectMake(0,0,400,400)
let centrePointOfChart = CGPointMake(CGRectGetMidX(rectSize),CGRectGetMidY(rectSize))
let radius:CGFloat = 100
let piePieces = [(UIBezierPath(circleSegmentCenter: centrePointOfChart, radius: radius, startAngle: 250, endAngle: 360),UIColor.brownColor()), (UIBezierPath(circleSegmentCenter: centrePointOfChart, radius: radius, startAngle: 0, endAngle: 200),UIColor.orangeColor()), (UIBezierPath(circleSegmentCenter: centrePointOfChart, radius: radius, startAngle: 200, endAngle: 250),UIColor.lightGrayColor())]
pieChart(piePieces, viewRect: CGRectMake(0,0,400,400))