###### tags: `第14屆IT邦鐵人賽文章`
# 【在 iOS 開發路上的大小事2－Day07】當個製圖大師－第三方套件 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 會自動去裝最新版的套件
```ruby
# 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 改為 BarChartView
3. 拉好 @IBOutlet
至於上面那塊 NavigationBar 的顏色，我是寫在 BaseViewController.swift 裡面，不改也沒關係的～
至於下面那塊 Footer，我是自己另外拉的，不拉也沒關係的～
```
## 重點程式碼～
首先要 **import Charts**，不然 Xcode 可是不認識 BarChartView 是什麼東西呢
```swift
import Charts
```
再來是 @IBOutlet
```swift
class BarChartViewVC: UIViewController {
@IBOutlet weak var barChartView: BarChartView!
override func viewDidLoad() {
super.viewDidLoad()
}
}
```
接著就來給這個長條圖一點資料吧
先宣告一個 **長條圖的資料陣列** 吧
```swift
var barChartViewDataEntries1: [BarChartDataEntry] = [] // 長條圖資料陣列
```
接著再給這個資料陣列一點資料
```swift
// MARK: Bar Chart View Data Input
func barChartViewDataInput() {
barChartViewDataEntries1 = [
BarChartDataEntry.init(x: 0.0, y: 0.15 * 100),
BarChartDataEntry.init(x: 1.0, y: 0.2 * 100),
BarChartDataEntry.init(x: 2.0, y: 0.15 * 100),
BarChartDataEntry.init(x: 3.0, y: 0.18 * 100),
BarChartDataEntry.init(x: 4.0, y: 0.12 * 100),
BarChartDataEntry.init(x: 5.0, y: 0.04 * 100),
BarChartDataEntry.init(x: 6.0, y: 0.06 * 100)
]
}
```
資料給完之後，就要來設定這個長條圖的一些配置了
```swift
// MARK: Bar Chart View Configuration
func barChartViewConfiguration() {
let formatter = NumberFormatter()
formatter.positiveSuffix = "%"
// 第一組長條圖資料
let chartDataSet1 = BarChartDataSet(entries: barChartViewDataEntries1, label: "")
chartDataSet1.colors = [.red, .green, .blue, .orange] // 設定長條圖的顏色
chartDataSet1.valueFormatter = DefaultValueFormatter(formatter: formatter) // 客製化設定資料數值的格式
chartDataSet1.valueFont = UIFont.systemFont(ofSize: 17.0) // 設定資料數值的字體大小
let chartData = BarChartData(dataSets: [chartDataSet1])
barChartView.data = chartData // 將 chartData 指派給 barChartView
barChartView.drawBordersEnabled = false // 繪製 barChartView 邊框
barChartView.legend.form = .none // 取消圖例
barChartView.scaleXEnabled = false // 關閉 x 軸縮放
barChartView.scaleYEnabled = false // 關閉 y 軸縮放
barChartView.doubleTapToZoomEnabled = false // 關閉雙擊縮放
barChartView.highlightPerTapEnabled = false // 關閉單點選中
barChartView.highlightPerDragEnabled = false // 關閉拖曳選中
barChartView.xAxis.drawGridLinesEnabled = false // 取消垂直網格線
barChartView.xAxis.labelPosition = .bottom // 將 x 軸座標數值設在底部
barChartView.xAxis.labelCount = barChartViewDataEntries1.count // 設定全部的 x 軸值的數量
barChartView.xAxis.drawAxisLineEnabled = false // 不顯示 x 軸的線
barChartView.xAxis.centerAxisLabelsEnabled = false // 讓 x 軸的值置中顯示
barChartView.xAxis.enabled = false // 取消 x 軸座標
barChartView.leftAxis.enabled = true // 顯示左側 y 軸座標
barChartView.leftAxis.drawAxisLineEnabled = false // 不顯示左側 y 軸的線
barChartView.leftAxis.drawGridLinesEnabled = true // 顯示水平網格線
barChartView.rightAxis.enabled = false // 取消右側 y 軸座標
barChartView.rightAxis.drawAxisLineEnabled = false // 不顯示右側 y 軸的線
}
```
## 最終的完整程式碼～
```swift
import UIKit
import Charts
class BarChartViewVC: BaseViewController {
@IBOutlet weak var barChartView: BarChartView!
@IBOutlet weak var customFooterView: CustomFooterView!
var barChartViewDataEntries1: [BarChartDataEntry] = [] // 長條圖資料陣列
override func viewDidLoad() {
super.viewDidLoad()
setupNavigationBarStyle(backgroundColor: .systemPink, tintColor: .white, foregroundColor: .white)
self.title = "Bar Chart View"
customFooterView.setBackgroundColor(bgColor: .systemPink)
setupBarChartView()
}
// MARK: - Setting Bar Chart View
func setupBarChartView() {
barChartViewDataInput()
barChartViewConfiguration()
}
// MARK: Bar Chart View Data Input
func barChartViewDataInput() {
barChartViewDataEntries1 = [
BarChartDataEntry.init(x: 0.0, y: 0.15 * 100),
BarChartDataEntry.init(x: 1.0, y: 0.2 * 100),
BarChartDataEntry.init(x: 2.0, y: 0.15 * 100),
BarChartDataEntry.init(x: 3.0, y: 0.18 * 100),
BarChartDataEntry.init(x: 4.0, y: 0.12 * 100),
BarChartDataEntry.init(x: 5.0, y: 0.04 * 100),
BarChartDataEntry.init(x: 6.0, y: 0.06 * 100)
]
}
// MARK: Bar Chart View Configuration
func barChartViewConfiguration() {
let formatter = NumberFormatter()
formatter.positiveSuffix = "%"
// 第一組長條圖資料
let chartDataSet1 = BarChartDataSet(entries: barChartViewDataEntries1, label: "")
chartDataSet1.colors = [.red, .green, .blue, .orange] // 設定長條圖的顏色
chartDataSet1.valueFormatter = DefaultValueFormatter(formatter: formatter) // 客製化設定資料數值的格式
chartDataSet1.valueFont = UIFont.systemFont(ofSize: 17.0) // 設定資料數值的字體大小
let chartData = BarChartData(dataSets: [chartDataSet1])
barChartView.data = chartData // 將 chartData 指派給 barChartView
barChartView.drawBordersEnabled = false // 繪製 barChartView 邊框
barChartView.legend.form = .none // 取消圖例
barChartView.scaleXEnabled = false // 關閉 x 軸縮放
barChartView.scaleYEnabled = false // 關閉 y 軸縮放
barChartView.doubleTapToZoomEnabled = false // 關閉雙擊縮放
barChartView.highlightPerTapEnabled = false // 關閉單點選中
barChartView.highlightPerDragEnabled = false // 關閉拖曳選中
barChartView.xAxis.drawGridLinesEnabled = false // 取消垂直網格線
barChartView.xAxis.labelPosition = .bottom // 將 x 軸座標數值設在底部
barChartView.xAxis.labelCount = barChartViewDataEntries1.count // 設定全部的 x 軸值的數量
barChartView.xAxis.drawAxisLineEnabled = false // 不顯示 x 軸的線
barChartView.xAxis.centerAxisLabelsEnabled = false // 讓 x 軸的值置中顯示
barChartView.xAxis.enabled = false // 取消 x 軸座標
barChartView.leftAxis.enabled = true // 顯示左側 y 軸座標
barChartView.leftAxis.drawAxisLineEnabled = false // 不顯示左側 y 軸的線
barChartView.leftAxis.drawGridLinesEnabled = true // 顯示水平網格線
barChartView.rightAxis.enabled = false // 取消右側 y 軸座標
barChartView.rightAxis.drawAxisLineEnabled = false // 不顯示右側 y 軸的線
}
}
```
本篇的參考範例程式碼：[Github](https://github.com/leoho0722/ChartsDemo/tree/main/ChartsDemo/ChartsDemo/Controller/ChartsVC/Bar%20Chart%20View)
## 參考資料
> https://www.hangge.com/blog/cache/detail_2148.html
Sign in with Wallet
Connect another wallet