web-dev-qa-db-ja.com

Core Graphicsを使用して円グラフを作成する

これまでのところ、私は塗りつぶされた円を持っています、そしてそれはそれについてです。私は満足している顧客と満足していない顧客の数を表す円グラフを作成し、それを提示しようとしています。私はCGに非常に慣れていないので、誰かが私にアイデアを与えたり、私を導くのに十分なコードをクランクアウトできるのではないかと思っていました。

下部の円に満足した顧客の数を表し、その上に別の円を追加して、満足していない顧客を表示する必要がありますか？私は正しい方法でそれに近づいていますか？

これが私のコードです。

override func drawRect(rect: CGRect) {

    // Get current context
    let context = UIGraphicsGetCurrentContext()

    // Set color
    CGContextSetStrokeColorWithColor(context,UIColor(red: 0.2, green: 0.4, blue: 1, alpha: 1.0).CGColor)

    let rectangle = CGRectMake((frame.size.width / 3) - 50, frame.size.height / 2 + 40,220,220)
    CGContextAddEllipseInRect(context,rectangle)

    CGContextSetFillColorWithColor(context, UIColor(red: 0.2, green: 0.4, blue: 1, alpha: 1.0).CGColor)
    CGContextFillPath(context)
    CGContextStrokePath(context)

}

[〜＃〜]編集[〜＃〜]

また、不満のある顧客の合計に基づいて円を円弧でカバーする必要があるかもしれないことがわかり始めています。人数に基づいてカバーアークのサイズを増減するにはどうすればよいですか？

何か助けていただければ幸いです！

iosswiftcore-graphics
25
Mihado

CGContextAddArc() 関数（CGContext.addArc() in Swift 3）を使用する必要があります。これにより、複数の円グラフの各セグメントに弧を描くことにより、円グラフのセグメント。

このような何かがうまくいくはずです：

import UIKit

struct Segment {

    // the color of a given segment
    var color: UIColor

    // the value of a given segment – will be used to automatically calculate a ratio
    var value: CGFloat
}

class PieChartView: UIView {

    /// An array of structs representing the segments of the pie chart
    var segments = [Segment]() {
        didSet {
            setNeedsDisplay() // re-draw view when the values get set
        }
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        isOpaque = false // when overriding drawRect, you must specify this to maintain transparency.
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func draw(_ rect: CGRect) {

        // get current context
        let ctx = UIGraphicsGetCurrentContext()

        // radius is the half the frame's width or height (whichever is smallest)
        let radius = min(frame.size.width, frame.size.height) * 0.5

        // center of the view
        let viewCenter = CGPoint(x: bounds.size.width * 0.5, y: bounds.size.height * 0.5)

        // enumerate the total value of the segments by using reduce to sum them
        let valueCount = segments.reduce(0, {$0 + $1.value})

        // 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.pi * 0.5

        for segment in segments { // loop through the values array

            // set fill color to the segment color
            ctx?.setFillColor(segment.color.cgColor)

            // update the end angle of the segment
            let endAngle = startAngle + 2 * .pi * (segment.value / valueCount)

            // move to the center of the pie chart
            ctx?.move(to: viewCenter)

            // add arc from the center for each segment (anticlockwise is specified for the arc, but as the view flips the context, it will produce a clockwise arc)
            ctx?.addArc(center: viewCenter, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false)

            // fill segment
            ctx?.fillPath()

            // update starting angle of the next segment to the ending angle of this segment
            startAngle = endAngle
        }
    }
}

円グラフデータをSegment構造体の配列として入力できます。各Segmentは、そのセグメントの色と値を表します。

値は任意のフロートにすることができ、円グラフで使用される比率まで自動的に削減されます。たとえば、円グラフで、満足していない顧客の数と満足していない顧客の数を表す場合は、値を直接渡すだけで済みます。

使用例：

let pieChartView = PieChartView()
pieChartView.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: 400)
pieChartView.segments = [
    Segment(color: .red, value: 57),
    Segment(color: .blue, value: 30),
    Segment(color: .green, value: 25),
    Segment(color: .yellow, value: 40)
]
view.addSubview(pieChartView)

出力：

enter image description here

完全なプロジェクト（いくつかの追加機能を含む）： https://github.com/hamishknight/Pie-Chart-View

59
Hamish