5
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Swift3.0対応 CoreGraphicsで円グラフを描く

Posted at

#はじめに
Swift3で、円グラフのサンプルを作成しました。
以前、作成しましたPieの描き方の応用です。
Qiita Swift3.0対応 CoreGraphicsでPieを描く

Simulator Screen Shot 2017.01.16 22.33.15.png

#円グラフの描画

PieChartView.swift
struct Segment {
    
    var color: UIColor
    var angle: CGFloat
    
}

円グラフの1区分を構造体で表します。色と角度を指定します。

PieChartView.swift
var segments = [Segment]() {
        didSet {
            setNeedsDisplay()
        }
    }

上述した構造体"Segment"の配列を用意します。
値を設定すると再描画するようにしてあります。
サンプルではViewControllerで値を設定しています。

PieChartView.swift
private func drawPieChart(rect: CGRect) {
        // コンテキストを取得
        guard let context = UIGraphicsGetCurrentContext() else {
            return
        }
        
        // Pieの中心位置
        let center = CGPoint(x: rect.width * 0.5, y: rect.height * 0.5)
        
        // Pieの半径
        let radius = min(rect.width, rect.height) * 0.5
        
        // 開始角度(ラジアン) 右回りにするため-90度
        var startAngle = CGFloat(-90.0 * .pi/180)
        
        self.segments.forEach { (segment) in
            // Pieの色を設定
            context.setFillColor(segment.color.cgColor)
            
            // 終了角度(ラジアン) 右回りにするため-90度
            let endAngle = (segment.angle - 90.0) * .pi/180
            
            // 描画位置を移動
            context.move(to: center)
            
            // Pieを追加
            context.addArc(center: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false)
            context.fillPath()
            
            startAngle = endAngle
        }
    }

構造体"Segment"の配列から一つずつデータを取り出して、描画の開始角度と終了角度を設定してPieを描画していきます。

#サンプル
Githubにサンプルプロジェクトをあげました。

Github PieChart

5
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?