前文

昨天我們弄好主要頁面之後，今天我們要使用 Chart 的圓餅圖來觀察我們的資料。

首先我們要先創一個頁面在 View 資料夾裡，取名叫做 Home ，然後先引入 SwiftData 跟 Charts之後就可以使用這個新框架了。

struct Home: View {
    
    @Environment(\.modelContext) private var modelContext
        
    @Query private var datas: [DataModel]
    
    private let fruitColors: [Color] = [.red, .orange, .yellow]
    private let vegetableColors: [Color] = [.green, .mint, .teal]
    private let snackColors: [Color] = [.blue, .purple, .indigo]
    
    var style: String
    
    private var chartColors: [Color] {
        switch style {
        case "Fruit":
            return self.fruitColors
        case "Vegetable":
            return self.vegetableColors
        case "Snack":
            return self.snackColors
        default:
            return []
        }
    }
    
    init(style: String) {
        self.style = style
        let predicate = #Predicate<DataModel> { data in
            data.style == style
        }
        
        _datas = Query(filter: predicate)
    }
    
    var body: some View {
        
        if datas.isEmpty {
            Text("No data")
        } else {
            Chart(datas, id: \.name) { data in
                SectorMark(
                    angle: .value("Value", data.quantity),
                    innerRadius: .ratio(0.618),
                    outerRadius: 120
                )
                .cornerRadius(5)
                .foregroundStyle(by: .value("Product category", data.name))
                .opacity(1)
            }
            .frame(minHeight: 0,maxHeight: 300)
            .chartLegend(alignment: .center)
            .fontWidth(.expanded)
            .chartForegroundStyleScale(domain: .automatic, range: chartColors)
        }
    }
}

上述程式碼中我們先定義每個種類的食物，他展示出來的顏色都會不一樣，這樣可以方便我們觀察。

Predicate

再來我們會創一個 #Predicate 這邊是表示我們要過濾什麼資料模型，然後 closure 裡面表示要是符合對應的食物種類，最後透過 _datas = Query(filter: predicate) 來實現目前是選擇哪種食物種類。

Chart

再來看到 body ，如果 datas為空，顯示"No data"文字；否則，創建一個圓形圖表，使用 Chart和SectorMark 來呈現資料。圖表設置了內外半徑、圓角、顏色和透明度等屬性，並且有固定的高度和居中的圖例，最後還應用了自定義的顏色範圍