###### tags: `第14屆IT邦鐵人賽文章`

# 【在 iOS 開發路上的大小事2－Day08】當個製圖大師－第三方套件 Charts 之圓餅圖

在 iOS App 中如果想要繪製各式圖表的話，除了自己手刻外
也可以透過第三方套件－Charts 來幫你產生各式圖表

> [Charts 套件作者 Github 連結 (點我前往)](https://github.com/danielgindi/Charts)

那要如何安裝 Charts 套件呢
Charts 本身提供了「**CocoaPods**、**Carthage**、**Swift Package Manager**」這三種安裝方式
這邊我選擇使用 CocoaPods 來安裝～如果不知道如何使用的話，可以先去看去年我寫的這篇～
[【在 iOS 開發路上的大小事－Day11】透過 CocoaPods 來管理第三方套件](https://ithelp.ithome.com.tw/articles/10259420)

安裝完 CocoaPods 後，就要來裝套件了～
打開 Podfile，然後輸入「pod 'Charts', '4.0.2'」，像是下面這樣
這邊會在套件名稱後面，多寫套件版本是因為要做版本控制的關係
不寫的話，pod 會自動去裝最新版的套件

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'ChartsDemo' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!
	pod 'Charts', '4.0.2'
  # Pods for ChartsDemo
end


裝好後，就開始來動工吧！
成品圖的 UI 長得像是下面這樣 ↓


## 那就開始設計 UI 吧～

設計步驟：
1. 拉一個 UIView，並設好 AutoLayout
2. 將這個 UIView 的 class 改為 PieChartView
3. 拉好 @IBOutlet

至於上面那塊 NavigationBar 的顏色，我是寫在 BaseViewController.swift 裡面，不改也沒關係的～
至於下面那塊 Footer，我是自己另外拉的，不拉也沒關係的～


## 重點程式碼～
首先要 **import Charts**，不然 Xcode 可是不認識 PieChartView 是什麼東西呢

import Charts

再來是 @IBOutlet

class PieChartViewVC: UIViewController {
    
    @IBOutlet weak var pieChartView: PieChartView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

    }
}

接著就來給這個圓餅圖一點資料吧
先宣告一個 **圓餅圖的資料陣列** 吧

var pieChartViewDataEntries1: [PieChartDataEntry] = [] // 圓餅圖資料陣列

接著再給這個資料陣列一點資料

// MARK: Pie Chart View Data Input

func pieChartViewDataInput() {
    pieChartViewDataEntries1 = [
        PieChartDataEntry.init(value: 15, label: "Apple Watch", icon: nil),
        PieChartDataEntry.init(value: 20, label: "Apple TV", icon: nil),
        PieChartDataEntry.init(value: 20, label: "iPhone", icon: nil),
        PieChartDataEntry.init(value: 10, label: "iPad", icon: nil),
        PieChartDataEntry.init(value: 35, label: "Mac Pro", icon: nil)
    ]
}

資料給完之後，就要來設定這個圓餅圖的一些配置了

// MARK: Pie Chart View Configuration

func pieChartViewConfiguration() {
    // 第一組圓餅圖資料
    let chartDataSet1 = PieChartDataSet(entries: pieChartViewDataEntries1, label: "")
    chartDataSet1.colors = [.red, .green, .blue, .orange, .systemPink] // 設定圓餅圖的顏色
    chartDataSet1.valueFont = UIFont.systemFont(ofSize: 17.0) // 設定資料數值的字體大小

    let chartData = PieChartData(dataSets: [chartDataSet1])
    pieChartView.data = chartData // 將 chartData 指派給 pieChartView
    pieChartView.legend.form = .circle // 設定圖例樣式
    pieChartView.highlightPerTapEnabled = false // 關閉單點選中
}

## 最終的完整程式碼～

import UIKit
import Charts

class PieChartViewVC: BaseViewController {

    @IBOutlet weak var pieChartView: PieChartView!
    @IBOutlet weak var customFooterView: CustomFooterView!
    
    var pieChartViewDataEntries1: [PieChartDataEntry] = [] // 圓餅圖資料陣列
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupNavigationBarStyle(backgroundColor: .systemPink, tintColor: .white, foregroundColor: .white)
        self.title = "Pie Chart View"
        customFooterView.setBackgroundColor(bgColor: .systemPink)
        setupPieChartView()
    }
    
    // MARK: - Setting Pie Chart View
    
    func setupPieChartView() {
        pieChartViewDataInput()
        pieChartViewConfiguration()
    }
    
    // MARK: Pie Chart View Data Input
    
    func pieChartViewDataInput() {
        pieChartViewDataEntries1 = [
            PieChartDataEntry.init(value: 15, label: "Apple Watch", icon: nil),
            PieChartDataEntry.init(value: 20, label: "Apple TV", icon: nil),
            PieChartDataEntry.init(value: 20, label: "iPhone", icon: nil),
            PieChartDataEntry.init(value: 10, label: "iPad", icon: nil),
            PieChartDataEntry.init(value: 35, label: "Mac Pro", icon: nil)
        ]
    }
    
    // MARK: Pie Chart View Configuration
    
    func pieChartViewConfiguration() {
        // 第一組圓餅圖資料
        let chartDataSet1 = PieChartDataSet(entries: pieChartViewDataEntries1, label: "")
        chartDataSet1.colors = [.red, .green, .blue, .orange, .systemPink] // 設定圓餅圖的顏色
        chartDataSet1.valueFont = UIFont.systemFont(ofSize: 17.0) // 設定資料數值的字體大小
    
        let chartData = PieChartData(dataSets: [chartDataSet1])
        pieChartView.data = chartData // 將 chartData 指派給 pieChartView
        pieChartView.legend.form = .circle // 設定圖例樣式
        pieChartView.highlightPerTapEnabled = false // 關閉單點選中
    }
}

本篇的參考範例程式碼：[Github](https://github.com/leoho0722/ChartsDemo/tree/main/ChartsDemo/ChartsDemo/Controller/ChartsVC/Pie%20Chart%20View)

## 參考資料
> https://www.hangge.com/blog/cache/detail_2162.html