【SwiftUI】Chartsの円グラフを使ってみた

はじめに

ChartsにiOS17から追加されたSectorMarkを使ってみました。
めっちゃ便利でした

円グラフデータ

円グラフのデータを借りました

最低機能実装

import SwiftUI
import Charts

struct FavoriteFruit {
    let name: String
    let count: Int
}

struct ContentView: View {
    @State private var favoriteFruits: [FavoriteFruit] = [
        .init(name: "りんご", count: 15),
        .init(name: "いちご", count: 12),
        .init(name: "さくらんぼ", count: 6),
        .init(name: "ぶどう", count: 5),
        .init(name: "バナナ", count: 4),
        .init(name: "オレンジ", count: 2)
    ]

    var body: some View {
        Chart(favoriteFruits, id: \.name) { favoriteFruit in
            SectorMark(
                angle: .value("count", favoriteFruit.count)
            )
            .foregroundStyle(by: .value("name", favoriteFruit.name))
        }
        .frame(width: 300, height: 300)
    }
}

細かい調整をしてみる

中心に穴を空ける

Chart(favoriteFruits, id: \.name) { favoriteFruit in
    SectorMark(
        angle: .value("count", favoriteFruit.count),
+       innerRadius: .inset(30)
    )
    .foregroundStyle(by: .value("name", favoriteFruit.name))
}
.frame(width: 300, height: 300)

円を小さくする

Chart(favoriteFruits, id: \.name) { favoriteFruit in
    SectorMark(
        angle: .value("count", favoriteFruit.count),
        outerRadius: .inset(50)
    )
    .foregroundStyle(by: .value("name", favoriteFruit.name))
}
.frame(width: 300, height: 300)

要素と要素の間に隙間を空ける

Chart(favoriteFruits, id: \.name) { favoriteFruit in
    SectorMark(
        angle: .value("count", favoriteFruit.count),
+       angularInset: 3
    )
    .foregroundStyle(by: .value("name", favoriteFruit.name))
}
.frame(width: 300, height: 300)

おわり

次回は要素を選択する実装とかしてみたいですね