【iOS】#25 記帳APP Part6: Charts 製作圖表
使用 Charts 套件製作圓餅圖
在記帳軟體之中，總少不了漂亮的圖表，來呈現花費類別的比例，或者追蹤每週花費的差距。
圖表的製作方式可用 UIBezierPath 純手刻，把路徑都繪製出來再進行控制。不過如果懶得手刻的話，其實網路上有現成的套件可以使用。這次我使用 Charts 這個套件來完成圖表。
實作部分
這是 Charts 套件的 Github，裡面有範例程式。另外，目前它沒有 iOS 的 documentation，作者是說 API 95% 跟 Android 版本相似，所以參考 Android 版的 API 即可 XD
安裝 Charts
這裡我一樣使用 CocoaPods 安裝。README 中也有其他安裝方式可參考，例如 SPM, Carthage
首先在 Podfile 加入，
pod 'Charts'之後在 podfile 所在的路徑上 run install 安裝套件
pod install在專案需要使用 Charts 的地方把套件引入，就可以使用囉！
import ChartsCharts Objects
Charts 提供 8 種型態的圖表。不過每種圖表基本上會有以上幾種物件
Entry 是最基本的資料，儲存著數值；DataSet 則是裝所有要呈現的 Entry 資料，設定要呈現的顏色等屬性，最後是 Data 物件，交付給 ChartView 渲染出來
圓餅圖相關設定
- 設定 Entry 資料
var pieChartDataEntries: [PieChartDataEntry] = [ PieChartDataEntry(value: 100, label: "餐飲", icon: nil, data: nil),
PieChartDataEntry(value: 50, label: "娛樂", icon: nil, data: nil),
PieChartDataEntry(value: 20, label: "交通", icon: nil, data: nil),]
PieChartDataEntry 用於設定圓餅其一區塊的資料，value 輸入數值、label 是呈現在上面的字
- 設定 DataSet
let set = PieChartDataSet(entries: pieChartDataEntries, label: "")把所有要呈現的 Entry 給 PieChartDataSet，這邊的 label 是設定圖表的標題
// 設定區塊顏色
set.colors = [UIColor(named: "FoodColor"), [UIColor(named: "EntertainmentColor")], UIColor(named: "TransportationColor")]// 點選後突出位置
set.selectionShift = 5// 圓餅分隔
set.sliceSpace = 3// 不顯示數值
// set.drawValuesEnabled = false
colors 設定圓餅圖要呈現的顏色，呈現的順序會跟 Entries 陣列一樣
selectionShift 設定點選圓餅部分後，要突出多少
sliceSpace 設定圓餅每個部分分隔的間距
drawValuesEnabled 設定是否要呈現數值在圓餅圖上
- 設定 Data
// 百分比顯示let data = PieChartData(dataSet: set)
let pFormatter = NumberFormatter()
pFormatter.numberStyle = .percent
pFormatter.maximumFractionDigits = 1
pFormatter.multiplier = 1
pFormatter.percentSymbol = "%"
data.setValueFormatter(DefaultValueFormatter(formatter: pFormatter))pieChartView.data = data
預設數值在圓餅圖上會直接根據 Entry 的 value 呈現。如果要呈現百分比，需要額外做設定
利用 NumberFormatter 做設定，numberStyle 設定 percent 型態；maximunFractionDigits 設定小數點位數， multiplier 設定 1 讓數值乘以 100%
pieChartView.usePercentValuesEnabled = true最後再把 pieChartView 的 usePercentValuesEnabled 設為 true
- 設定 legend
let legend = pieChartView.legend
legend.horizontalAlignment = .center
legend.verticalAlignment = .bottom
legend.orientation = .horizontal預設圓餅圖下方的圖標顯示與標題會至左，若要把它志中，可以控制 legend，horizontalAlignment 設為 center
Demo
參考資料
Charts
Charts 解說
