円グラフの描画

More than 3 years have passed since last update.


はじめに

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.0let end :CGFloat = 1.0 * pi * 2.0 と考えると、1.0 を変更すれば角度が変更できることがわかります。

let end :CGFloat = 0.25 * pi * 2.0 とすると1/4の円を描画できます。

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)

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

位置調整


応用

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

応用