第 48 章
建立圓餅圖和甜甜圈圖

圓餅圖（Pie charts）和甜甜圈圖（Donut charts）是在數據可視化中常用的兩種圖表類型。在 iOS 17 之前，如果你想使用 SwiftUI 創建這些類型的圖表，就需要使用 Path 和 Arc 等組件自己構建圖表。在第8章中，我們展示了如何從頭開始實現圓餅圖和甜甜圈圖的技巧。然而，自從 iOS 17 發布以來，這已經不再必要了。SwiftUI 通過引入一種名為 SectorMark 的新標記類型，簡化了創建這些圖表的過程。這使得開發人員可以輕鬆構建各種類型的圓餅圖和甜甜圈圖。

在本章中，我們將指導您使用 SwiftUI 構建圓餅圖和甜甜圈圖的過程。除此之外，你還會了解如何為這些圖表添加交互功能。

重温長條圖（Bar Charts）

讓我們從使用 Charts 框架實現一個簡單的長條圖開始。假設你已經創建了一個新的 SwiftUI 項目，在下面插入程式碼以初始化柱狀圖的示例數據：

private var coffeeSales = [
    (name: "Americano", count: 120),
    (name: "Cappuccino", count: 234),
    (name: "Espresso", count: 62),
    (name: "Latte", count: 625),
    (name: "Mocha", count: 320),
    (name: "Affogato", count: 50)
]

這些只是用於圖表渲染的隨機咖啡銷售數據。為了簡單起見，我使用了一個元組數組來保存數據。Charts 框架使得開發人員可以非常輕鬆地從這些數據創建長條圖。

首先，導入 Charts 框架並將 body 部分替換為以下程式碼：

VStack {
    Chart {
        ForEach(coffeeSales, id: \.name) { coffee in
            BarMark(
                x: .value("Type", coffee.name),
                y: .value("Cup", coffee.count)
            )
            .foregroundStyle(by: .value("Type", coffee.name))
        }
    }
}
.padding()

無論你創建長條圖還是圓餅圖，一切都始於 Chart 視圖。在這個視圖中，我們定義了一組 BarMark，用於在 x 軸上繪製咖啡類型，在 y 軸上繪製數量的垂直長條圖。foregroundStyle 修飾器會自動為每個長條圖分配一個獨特的顏色。

你可以通過修改一些 BarMark 參數輕鬆創建不同類型的長條圖。

例如，如果你想要建立一個一維長條圖，只需要提供 x 軸或 y 軸的值即可：

想更深入學習SwiftUI和下載完整程式碼？你可以從 AppCoda網站購買《精通 SwiftUI》完整電子版。