円グラフの描画

はじめに

Swiftで円グラフの描画をします。
わかりやすいように半円を描画してみます。
重要なのは、開始と終了の角度を指定することです。
開始の角度を0.0、終了の角度をPI(3.14)とします。

example1.swift

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
                
        let pi = CGFloat(M_PI)
        let start:CGFloat = 0.0 // 開始の角度
        let end :CGFloat = pi // 終了の角度
        
        let path: UIBezierPath = UIBezierPath();
        path.moveToPoint(CGPointMake(self.view.frame.width/2, self.view.frame.height/2))
        path.addArcWithCenter(CGPointMake(self.view.frame.width/2, self.view.frame.height/2), radius: 100, startAngle: start, endAngle: end, clockwise: true) // 円弧
        
        let layer = CAShapeLayer()
        layer.fillColor = UIColor.orangeColor().CGColor
        layer.path = path.CGPath
        
        self.view.layer.addSublayer(layer)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

実行結果は以下のようになります。

let end :CGFloat = pi * 2.0 にすると円になります。

let end :CGFloat = pi * 2.0 を let end :CGFloat = 1.0 * pi * 2.0 と考えると、1.0 を変更すれば角度が変更できることがわかります。
let end :CGFloat = 0.25 * pi * 2.0 とすると1/4の円を描画できます。

円の描画開始位置を調整する

円の描画開始位置を調整するために、開始と終了の角度からそれぞれpi / 2.0を引きます。

example2.swift

let start:CGFloat = -1 * pi / 2.0
let end:CGFloat = 0.25 * pi * 2.0 - (pi / 2.0)

実行結果は以下のようになります。

応用

複数の円を組み合わせると、ヘルスケア・フィットネスアプリで見かけるグラフも描画することができます。