(Swift) Chart 圓餅圖 進階操作
Published in
8 min readMar 10, 2023
目的：學習 PieChartView 細部的操作
- 禁用圓盤旋轉
- 修改點選的扇形區的延伸區
- 設置圓餅圖中間的顯示文字
- 設置扇區的間隔
- 修改字體樣式和顯示的格式
- 將數值轉換成百分比顯示
- 顯示實心圓餅圖
- 標籤與數值顯示位置
- 底部標籤問題
環境：OSX 13.2 + Xcode 11.3 + Charts 4.1.0
基本的 Charts 操作可以參考這一篇
禁用圓盤旋轉
...
func setChart(dataPoints: [String], values: [Double]) {
...
// 禁用圓表旋轉
myView.rotationEnabled = false修改點選的扇形區的延伸區
...
func setChart(dataPoints: [String], values: [Double]) {
...
// 改變扇區延伸長度
piechartdataset.selectionShift = 0
設置圓餅圖中間的顯示文字
...
func setChart(dataPoints: [String], values: [Double]) {
...
// 設置圓餅圖中間的顯示文字
myView.centerText = "temperature"設置扇區的間隔
...
func setChart(dataPoints: [String], values: [Double]) {
...
// 設置扇區的間隔
piechartdataset.sliceSpace = 3修改字體樣式和顯示的格式
...
func setChart(dataPoints: [String], values: [Double]) {
...
// 字體修改
piechartdata.setValueFont(.systemFont(ofSize: 13, weight: .medium))
// 字體顏色修改
piechartdata.setValueTextColor(.black)
// 自定義格式
let formatter = NumberFormatter()
// 數字前的單位符號
formatter.positivePrefix = "$"
piechartdata.setValueFormatter(DefaultValueFormatter(formatter: formatter))將數值轉換成百分比顯示
...
func setChart(dataPoints: [String], values: [Double]) {
...
// 將數值轉為百分比
myView.usePercentValuesEnabled = true
//数值百分比格式化显示
let pFormatter = NumberFormatter()
// 設置 numberStyle 屬性為 .percent，以將數字轉換為百分比格式
pFormatter.numberStyle = .percent
// 設置 maximumFractionDigits 屬性為 1，以限制小數點後的位數為 1
pFormatter.maximumFractionDigits = 1
// multiplier 屬性被設置為 1，以將數字轉換為百分比
pFormatter.multiplier = 1
// 設置 percentSymbol 屬性為 "%"，以在百分比值後添加百分比符號
pFormatter.percentSymbol = "%"
// 使用 setValueFormatter 方法來將格式化器應用於餅圖的數據中
// 使用 DefaultValueFormatter 類創建一個新的格式化器，並將其初始化為 pFormatter
piechartdata.setValueFormatter(DefaultValueFormatter(formatter: pFormatter))顯示實心圓餅圖
...
func setChart(dataPoints: [String], values: [Double]) {
...
// 將餅圖中心的孔半徑設置為 0，以使中心部分留空
myView.holeRadiusPercent = 0
// 設置餅圖中心透明圓的半徑為餅圖半徑的 0.25 倍，以提供視覺效果
myView.transparentCircleRadiusPercent = 0.25
// 禁用圓餅圖中心留空
myView.drawHoleEnabled = false標籤與數值顯示位置
...
func setChart(dataPoints: [String], values: [Double]) {
...
// 百分比在內，標籤在外
piechartdataset.xValuePosition = .outsideSlice
piechartdataset.yValuePosition = .insideSlice底部標籤位置
...
func setChart(dataPoints: [String], values: [Double]) {
...
//legend
let legend = myView.legend
// 設置圖例的水平對齊方式為中心
legend.horizontalAlignment = .center
// 設置圖例的垂直對齊方式為底部
legend.verticalAlignment = .bottom
// 設置圖例的方向為水平方向
legend.orientation = .horizontal
