Help us understand the problem. What is going on with this article?

円グラフの描画

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)

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

位置調整

応用

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

応用

arthur87
iwate-pu
岩手県滝沢市にある公立大学です。Qiitaではソフトウェア情報学部生や出身の人が多いです。
https://www.iwate-pu.ac.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした