(Swift) 學習使用 Charts 產生直方圖、折線圖、圓餅圖

YEN HUNG CHENG

Published in

彼得潘的 Swift iOS / Flutter App 開發教室

18 min readFeb 17, 2023

目的：學習使用 Charts 套件繪製精美的表格

環境：OSX 13.2 + Xcode 11.3 + Charts 4.1.0

Charts Github

GitHub - danielgindi/Charts: Beautiful charts for iOS/tvOS/OSX! The Apple side of the crossplatform…

Version 4.0.0, synced to MPAndroidChart #f6a398b Xcode 14 / Swift 5.7 (master branch) iOS >= 12.0 (Use as an Embedded…

github.com

Charts 可透過兩種方式進行安裝

SPM (Swift Package Manager)

點選 Package Dependencies，再點選下方的＋

將上方的 Charts 的 Github 連結輸入到右上方，並在紅色框位置輸入 4.1.0 （若沒出現紅色框，可以在貼上 github 連結處再次按下 Enter ），最後按下 Add Package，再勾選 Charts 後，按下 Add Package 即可安裝

CocoaPods 安裝教學

(Xcode) 如何在 Mac M1/M2 上安裝 Cocoapods

若在 M 系列晶片使用以下指令安裝會出錯

medium.com

使用 CocoaPods 管理第三方套件

隨著 Xcode 11 的推出，未來開發 iOS App 時最方便的套件管理工具變成 Xcode 內建的 SPM。不過目前還有很多套件尚未支援 SPM，只能透過 Cocoapods…

medium.com

透過 CocoaPods 進行安裝 Charts

打開終端機，並進入到你專案的位置

cd yourprojectpath

使用以下指令初始化 CocoaPods，下載後專案內會出現一個新的檔案 Podfile

pod init

打開 Podfile ，並在＃Pods for Chart 下方，輸入以下代碼

pod 'Charts', '4.1.0'

保存後，在終端機執行以下指令，執行後專案會出現 Chart.xcworkspace

pod install

執行 Chart.xcworkspace

BarChartView

在 ViewController 中新增一個 View，並將 View 的 Class 設為 BarChartView，最後再拉 @IBOutlet weak var myView: BarChartView!

再來 import Charts

...
import Charts

class ViewController: UIViewController {

    @IBOutlet weak var myView: BarChartView!
    ...

BarChartView 四個步驟

產生 BarChartDataEntry
產生 BarChartDataSet
產生 BarChartData
利用 ChartsView 顯示 BarChartData

產生 BarChartDateEntry 還有數據

新增 Array : monthArray, temperatureArray, dataEntries
並將每筆資料變成 BarChartDataEntry 放入 dataEntries 中

import UIKit
import Charts

class ViewController: UIViewController {
    
    ...
    var monthArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    var temperatureArray:[Double] = [20, 21, 22, 23, 24, 25, 26, 27, 28, 29 ,30, 31]
    var dataEntries: [BarChartDataEntry] = []

    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        for i in 0..<monthArray.count {
            dataEntries.append(BarChartDataEntry(x: Double(i), y: temperatureArray[i]))
        }

    }

產生 BarChartDataSet

class ViewController: UIViewController {
    
    ...
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        for i in 0..<monthArray.count {
            dataEntries.append(BarChartDataEntry(x: Double(i), y: temperatureArray[i]))
        }

        // 產生 BarChartDataSet
        let DataSet = BarChartDataSet(entries: dataEntries, label: "temperature")

    }

產生 BarChartData

class ViewController: UIViewController {
    
    ...
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        for i in 0..<monthArray.count {
            dataEntries.append(BarChartDataEntry(x: Double(i), y: temperatureArray[i]))
        }

        // 產生 BarChartDateSet
        let DataSet = BarChartDataSet(entries: dataEntries, label: "temperature")

        // 產生 Data 
        let Data = BarChartData(dataSet: DataSet)
    }

利用 ChartsView 顯示 BarChartData

class ViewController: UIViewController {
    
    ...
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        for i in 0..<monthArray.count {
            dataEntries.append(BarChartDataEntry(x: Double(i), y: temperatureArray[i]))
        }

        // 產生 BarChartDateSet
        let DataSet = BarChartDataSet(entries: dataEntries, label: "temperature")

        // 產生 Data 
        let Data = BarChartData(dataSet: DataSet)

        // 利用 ChartsView 顯示 BarChartData
        myView.data = Data

    }

完成以上步驟即可顯示基本的直方圖

不過這時會發現，我們的月份沒有顯示，所以必須新增以下程式碼，將x方向的格式修改成我們設定的字串

class ViewController: UIViewController {
   ....


    override func viewDidLoad() {
        super.viewDidLoad()
        
        ...
        
        // 利用 ChartsView 顯示 BarChartData
        myView.data = Data
        // 將 x 方向的格式修改成我們設定的字串
        myView.xAxis.valueFormatter = IndexAxisValueFormatter(values: monthArray)

LineChartView

在 ViewController 中新增一個 View，並將 View 的 Class 設為 LineChartView，最後再拉 @IBOutlet weak var myView: LineChartView!

LineChartView 四個步驟

產生 ChartDataEntry
產生 LineChartDataSet
產生 LineChartData
利用 ChartsView 顯示 LineChartData

產生 ChartDataEntry 還有數據

新增 Array : monthArray, temperatureArray, dataEntries
並將每筆資料變成 ChartDataEntry 放入 dataEntries 中

import UIKit
import Charts

class ViewController: UIViewController {
    
    ...
    var monthArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    var temperatureArray:[Double] = [20, 21, 22, 23, 24, 25, 26, 27, 28, 29 ,30, 31]
    var dataEntries: [ChartDataEntry] = []

    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        for i in 0..<monthArray.count {
            dataEntries.append(ChartDataEntry(x: Double(i), y: temperatureArray[i]))
        }

    }

產生 LineChartDataSet

class ViewController: UIViewController {
    
    ...
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        for i in 0..<monthArray.count {
            dataEntries.append(ChartDataEntry(x: Double(i), y: temperatureArray[i]))
        }

        // 產生 LineChartDataSet
        let DataSet = LineChartDataSet(entries: dataEntries, label: "temperature")

    }

產生 LineChartData

class ViewController: UIViewController {
    
    ...
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        for i in 0..<monthArray.count {
            dataEntries.append(ChartDataEntry(x: Double(i), y: temperatureArray[i]))
        }

        // 產生 LineChartDataSet
        let DataSet = LineChartDataSet(entries: dataEntries, label: "temperature")

        // 產生 Data 
        let Data = LineChartData(dataSet: DataSet)
    }

利用 ChartsView 顯示 LineChartData

class ViewController: UIViewController {
    
    ...
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        for i in 0..<monthArray.count {
            dataEntries.append(ChartDataEntry(x: Double(i), y: temperatureArray[i]))
        }

        // 產生 LineChartDataSet
        let DataSet = LineChartDataSet(entries: dataEntries, label: "temperature")

        // 產生 Data 
        let Data = LineChartData(dataSet: DataSet)

        // 利用 ChartsView 顯示 BarChartData
        myView.data = Data

        // 將 x 方向的格式修改成我們設定的字串
        myView.xAxis.valueFormatter = IndexAxisValueFormatter(values: monthArray)

    }

PieChartView

在 ViewController 中新增一個 View，並將 View 的 Class 設為 PieChartView，最後再拉 @IBOutlet weak var myView: PieChartView!

PieChartView 四個步驟

產生 PieChartDataEntry
產生 PieChartDataSet
產生 PieChartData
利用 ChartsView 顯示 PieChartData

產生 PieChartDataEntry

新增 Array : monthArray, temperatureArray, dataEntries
並將每筆資料變成 PieChartDataEntry 放入 dataEntries 中

在 PieChartView 會使用以下的 PieChartDataEntry(value: Double, label: String?) 來產生 Enrty

value : 存放 temperatureArray 的數值
label : x 座標字串的資料

import UIKit
import Charts

class ViewController: UIViewController {
    
    ...
    var monthArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    var temperatureArray:[Double] = [20, 21, 22, 23, 24, 25, 26, 27, 28, 29 ,30, 31]
    var dataEntries: [BarChartDataEntry] = []

    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        for i in 0..<monthArray.count {
            dataEntries.append(PieChartDataEntry(value: temperatureArray[i], label: monthArray[i]))        }

    }

產生 PieChartDataSet

class ViewController: UIViewController {
    
    ...
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        for i in 0..<monthArray.count {
            dataEntries.append(PieChartDataEntry(value: temperatureArray[i], label: monthArray[i]))
  
        }
        // 產生 PieChartDataSet
        let DataSet = PieChartDataSet(entries: dataEntries, label: "")

        // 改變 chart 顏色
        DataSet.colors = ChartColorTemplates.colorful()
    }

產生 PieChartData

class ViewController: UIViewController {
    
    ...
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        for i in 0..<monthArray.count {
            dataEntries.append(PieChartDataEntry(value: temperatureArray[i], label: monthArray[i]))
  
        }
        // 產生 PieChartDataSet
        let DataSet = PieChartDataSet(entries: dataEntries, label: "")

        // 改變 chart 顏色
        DataSet.colors = ChartColorTemplates.colorful()

        // 產生 Data
        let Data = PieChartData(dataSet: DataSet)
    }

利用 ChartsView 顯示 PieChartData

class ViewController: UIViewController {
    
    ...
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        for i in 0..<monthArray.count {
            dataEntries.append(PieChartDataEntry(value: temperatureArray[i], label: monthArray[i]))
  
        }
        // 產生 PieChartDataSet
        let DataSet = PieChartDataSet(entries: dataEntries, label: "")

        // 改變 chart 顏色
        DataSet.colors = ChartColorTemplates.liberty()

        // 產生 Data
        let Data = PieChartData(dataSet: DataSet)

        // 利用 ChartsView 顯示 BarChartData
        myView.data = Data

    }

更好的寫法


import UIKit
import Charts

class ThirdViewController: UIViewController {

    @IBOutlet weak var myView: PieChartView!

    var monthArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    var temperatureArray:[Double] = [20, 21, 22, 23, 24, 25, 26, 27, 28, 29 ,30, 31]
    
    
    override func viewDidLoad() {
        super.viewDidLoad()

        setChart(dataPoints: monthArray, values: temperatureArray)

    }

func setChart(dataPoints: [String], values: [Double]) {
        // 產生 PieChartDataEntry
        var dataEntries: [PieChartDataEntry] = []

        // 產生 PieChartDataEntry 每筆資料
        for i in 0..<dataPoints.count {
            dataEntries.append(PieChartDataEntry(value: values[i], label: dataPoints[i]))
        }

        // 產生 PieChartDataSet
        let piechartdataset = PieChartDataSet(entries: dataEntries)

        // 改變 chart 顏色
        piechartdataset.colors = ChartColorTemplates.liberty()

        // 產生 Data
        let piechartdata = PieChartData(dataSet: piechartdataset)

        // 利用 ChartsView 顯示 BarChartData
        myView.data = piechartdata
    }

以上就是簡易透過 Charts 套件產生直方圖、折線圖、圓餅圖的流程

GitHub

GitHub - jasonyen1009/Chart

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…