[英]Swift Charts (iOS 16) Pie / Donut Chart
是否可以使用 Apple 的新 Swift 圖表框架創建餅圖/甜甜圈圖?
WWDC 視頻中顯示了餅圖的圖像。 任何有關如何創建餅圖的幫助或代碼示例將不勝感激。
謝謝
Swift 圖表不(還?)支持極坐標幾何,這是構建餅圖所需的。
我建議使用Canvas
並自己繪制信息,如下所示:
struct Pie: View {
@State var slices: [(Double, Color)]
var body: some View {
Canvas { context, size in
let total = slices.reduce(0) { $0 + $1.0 }
context.translateBy(x: size.width * 0.5, y: size.height * 0.5)
var pieContext = context
pieContext.rotate(by: .degrees(-90))
let radius = min(size.width, size.height) * 0.48
var startAngle = Angle.zero
for (value, color) in slices {
let angle = Angle(degrees: 360 * (value / total))
let endAngle = startAngle + angle
let path = Path { p in
p.move(to: .zero)
p.addArc(center: .zero, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false)
p.closeSubpath()
}
pieContext.fill(path, with: .color(color))
startAngle = endAngle
}
}
.aspectRatio(1, contentMode: .fit)
}
}
struct Pie_Previews: PreviewProvider {
static var previews: some View {
Pie(slices: [
(2, .red),
(3, .orange),
(4, .yellow),
(1, .green),
(5, .blue),
(4, .indigo),
(2, .purple)
])
}
}
要制作圓環圖,請將 canvas 剪輯為您在渲染閉包中執行的第一件事:
let donut = Path { p in
p.addEllipse(in: CGRect(origin: .zero, size: size))
p.addEllipse(in: CGRect(x: size.width * 0.25, y: size.height * 0.25, width: size.width * 0.5, height: size.height * 0.5))
}
context.clip(to: donut, style: .init(eoFill: true))
是的,可以在 Apple 的新 swift UI 中使用圖表、 swiftUI 和基礎庫
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.