iOS, 最新消息

WWDC23 – Pie Chart

Posted on by 朱克剛

如同去年在 Charts 框架上的預測，WWDC23 公布的 Charts 框架開始支援圓餅圖（SectorMark）了，整個語法架構一樣承襲其他圖表的寫法，意思是非常簡單。先把資料準備好，如下。

struct Data {
    var title: String
    var value: Int
}

let data: [Data] = [
    .init(title: "鉛筆", value: 20),
    .init(title: "橡皮擦", value: 70),
    .init(title: "原子筆", value: 70),
    .init(title: "膠水", value: 5)
]

圓餅圖

import Charts

struct ContentView: View {
    var body: some View {
        Chart(data, id: \.title) { element in
            SectorMark(
                angle: .value("category", element.value),
                angularInset: 2  // 扇形間的分隔間距，如不需分隔此參數可移除
            )
            .annotation(position: .overlay) {
                Text(element.value, format: .number)
            }
            .cornerRadius(5) // 有間距時設定扇形的角為圓角
            .foregroundStyle(by: .value("color", element.title))
        }
        .padding()
    }
}
piechart

甜甜圈圖

甜甜圈圖是將圓餅圖中間挖空，就可以在挖空的位置放一些資料，程式碼如下。

struct ContentView: View {
    var body: some View {
        Chart(data, id: \.title) { element in
            SectorMark(
                angle: .value("category", element.value),
                innerRadius: .ratio(0.6),  // 半徑60%鏤空
                angularInset: 2  // 扇形間的分隔間距
            )
            .annotation(position: .overlay) {
                Text(element.value, format: .number)
            }
            .cornerRadius(5) // 有間距時設定扇形的角為圓角
            .foregroundStyle(by: .value("color", element.title))
        }
        .padding()
    }
}
donutchart
朱克剛
朱克剛

發表迴響