Mastering SwiftUI led you through a long lesson on creating a pie chart with arcs enveloped by a Zstack. This exercise is MUCH easier because I provide the whole pie, and your only job is to offset a one slice of a pie (an arc of course) and overlay it with a label.
- At the very bottom of this page you will find a Zstack that contains four arc paths of different colors. Your job is to offset and label the green one.
- Create a new SwiftUI view in the same Xcode project that you created for the previous arc slider exercise. Name it Pie.swift!
- Replace Text(“Hello, World!”) with the Zstack and and arc paths below. When you preview, you should see a pie chart!
- Use offsets, overlays, and text formatting to make your pie chart look as much as possible like this one.
The code to copy is right here!
ZStack { Path { path in path.move(to: CGPoint(x: 200, y: 200)) path.addArc(center: .init(x: 200, y: 200), radius: 150, startAngle: Angle(degrees: 0.0), endAngle: Angle(degrees: 290), clockwise: true) } .fill(Color.yellow) Path { path in path.move(to: CGPoint(x: 200, y: 200)) path.addArc(center: .init(x: 200, y: 200), radius: 150, startAngle: Angle(degrees: 290.0), endAngle: Angle(degrees: 260), clockwise: true) } .fill(Color.blue) Path { path in path.move(to: CGPoint(x: 200, y: 200)) path.addArc(center: .init(x: 200, y: 200), radius: 150, startAngle: Angle(degrees: 260.0), endAngle: Angle(degrees: 160), clockwise: true) } .fill(Color.red) Path { path in path.move(to: CGPoint(x: 200, y: 200)) path.addArc(center: .init(x: 200, y: 200), radius: 150, startAngle: Angle(degrees: 160.0), endAngle: Angle(degrees: 00), clockwise: true) } .fill(Color.green) }