Swiftで円グラフを描画する - Swift3.0対応済み

はじめに

まずはじめに、こちらはSwift3.0環境下で円グラフを生成することを想定して書かれたものです。Swift2.X環境下では、.move(to:CGPoint(x:xxx,y:yyy))をはじめ、幾つかのメソッドでコンパイルエラーが発生します。2.X環境の方は、その都度検索して修正してください。

実装完了後のイメージ

若干上に寄り過ぎていたりしますが、今回の目的は達成しているのでご愛嬌。

実装方法

円グラフのクラスを作成する

PieChartView.swift

struct Segment {
    
    // MARK: セグメントの背景色
    var color : UIColor
    
    // MARK: セグメントの割合を設定する変数（比率）
    var value : CGFloat
}

class PieChartView: UIView {    
    var segments = [Segment]() {
        didSet {
            setNeedsDisplay()
        }
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        isOpaque = false 
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override func draw(_ rect: CGRect) {

        // MARK: CGContextの初期化
        let ctx = UIGraphicsGetCurrentContext()
        
        // MARK: 円型にするためにradiusを設定
        let radius = min(frame.size.width, frame.size.height)/2
        
        // MARK: Viewの中心点を取得
        let viewCenter = CGPoint(x: bounds.size.width/2, y: bounds.size.height/2)
        
        // MARK: セグメントごとの比率に応じてグラフを変形するための定数
        let valueCount = segments.reduce(0) {$0 + $1.value}
        
        // MARK: 円グラフの起点を設定 [the starting angle is -90 degrees (top of the circle, as the context is flipped). By default, 0 is the right hand side of the circle, with the positive angle being in an anti-clockwise direction (same as a unit circle in maths).]
        var startAngle = -CGFloat(M_PI*0.5)
        
        // MARK: 初期化されたすべてのセグメントを描画するための処理
        for segment in segments { // loop through the values array            
            ctx?.setFillColor(segment.color.cgColor)
            let endAngle = startAngle+CGFloat(M_PI*2)*(segment.value/valueCount)
            ctx?.move(to: CGPoint(x:viewCenter.x, y: viewCenter.y))
            ctx?.addArc(center: CGPoint(x:viewCenter.x, y: viewCenter.y), radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false)
            ctx?.fillPath()
            startAngle = endAngle
        }
    }
}

円グラフをViewControllerで描画する

HogehogeViewController.swift

import UIKit

class ViewController: UIViewController {

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

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(true)
        let pieChartView = PieChartView()
        pieChartView.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: 400)
        pieChartView.segments = [
            Segment(color: UIColor.green, value: 100),
            Segment(color: UIColor.lightGray, value: 10)
        ]
        view.addSubview(pieChartView)
    }
}

参考資料

• Making a pie chart using Core Graphics