Tạo biểu đồ hình tròn bằng cách sử dụng Đồ họa cốt lõi

Question

Cho đến bây giờ tôi đã có một vòng kết nối đầy đủ và đó là về nó. Tôi đang cố tạo biểu đồ hình tròn thể hiện số lượng khách hàng hài lòng và không hài lòng và trình bày nó. Tôi rất mới với CG và đã tự hỏi ai đó có thể quăng ra đủ mã để cho tôi một ý tưởng hoặc hướng dẫn tôi.

Tôi có nên có vòng tròn dưới cùng thể hiện số lượng khách hàng hài lòng và sau đó thêm một vòng kết nối khác trên đầu trang để hiển thị các khách hàng không hài lòng? Tôi có đang tiếp cận nó đúng cách không?

Đây là mã của tôi cho đến thời điểm này.

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) 

} 

EDIT

Ngoài ra, bây giờ tôi đang bắt đầu để thấy rằng tôi có thể cần phải che vòng tròn của tôi với một hồ quang dựa trên trong tổng số khách hàng không hài lòng. Làm thế nào tôi có thể tăng hoặc giảm kích thước của vòng cung che phủ dựa trên số lượng người?

Bất kỳ trợ giúp nào sẽ được đánh giá rất cao!

Answer 1

Bạn sẽ muốn sử dụng chức năng CGContextAddArc() (CGContext.addArc() trong Swift 3). Điều này sẽ cho phép bạn tạo nhiều phân đoạn cho biểu đồ hình tròn bằng cách vẽ hình cung cho mỗi phân đoạn của biểu đồ hình tròn.

Something như thế này nên làm như lừa:

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

Bạn có thể nhập dữ liệu của biểu đồ pie như một mảng của Segment cấu trúc, trong đó mỗi Segment đại diện cho màu sắc và giá trị của phân khúc đó.

Giá trị có thể là bất kỳ điểm nổi nào và sẽ tự động được giảm xuống tỷ lệ sẽ được sử dụng trong biểu đồ hình tròn. Vì vậy, ví dụ, nếu bạn muốn biểu đồ pie của bạn để đại diện cho số không hài lòng vs số lượng khách hàng hài lòng, bạn có thể chỉ cần vượt qua các giá trị trực tiếp trong

Ví dụ về sử dụng:.

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) 

Output:

---

dự án đầy đủ (với một số chức năng phụ): https://github.com/originaluser2/Pie-Chart-View