ios - tabla - grafica circular ejemplos

Haciendo un gráfico circular usando Core Graphics

Question

Hasta ahora tengo un círculo lleno y eso es todo. Estoy tratando de hacer un gráfico circular que represente la cantidad de clientes satisfechos e insatisfechos y presentarlo. Soy extremadamente nuevo en CG y me preguntaba si alguien puede generar suficiente código para darme una idea o guiarme.

¿Debo hacer que el círculo inferior represente el número de clientes satisfechos y luego agregar otro círculo encima para mostrar a los clientes insatisfechos? ¿Me estoy acercando de la manera correcta?

Aquí está mi código hasta ahora.

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)

}

EDITAR

Además, ahora estoy empezando a ver que podría necesitar cubrir mi círculo con un arco basado en el total de clientes insatisfechos. ¿Cómo puedo aumentar o disminuir el tamaño del arco de cobertura en función del número de personas?

Cualquier ayuda sería tremendamente apreciada!

Answer 1

CGContextAddArc() usar la función CGContextAddArc() ( CGContext.addArc() en Swift 3). Esto le permitirá crear múltiples segmentos para su gráfico circular dibujando un arco para cada segmento de su gráfico circular.

Algo como esto debería hacer el truco:

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
        }
    }
}

Puede ingresar los datos de su gráfico circular como una matriz de estructuras de Segment , donde cada Segment representa el color y el valor de ese segmento.

El valor puede ser cualquier valor flotante, y se reducirá automáticamente a una proporción que se utilizará en el gráfico circular. Por ejemplo, si desea que su gráfico circular represente la cantidad de clientes insatisfechos frente a la cantidad de clientes satisfechos, solo puede pasar los valores directamente.

Ejemplo de uso:

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)

Salida:

Proyecto completo (con alguna funcionalidad adicional): https://github.com/hamishknight/Pie-Chart-View