如何在 Swift 語言下使用 iOS Charts API 製做漂亮圖表？

【編者按】本文做者 Joyce Echessa 是渥合數位服務創辦人，畢業於臺灣大學，近年來專一於協助客戶進行 App 軟體以及網站開發。文中做者經過示例介紹用 ios-charts 庫建立簡易美觀的圖表，有助於開發者在應用中生動形象地向用戶展現數據。本文系 OneAPM 工程師編譯整理：

呈現大量數據時，比起表格中一行行枯燥的數據，使用圖表來形象地表示數據能夠幫助用戶更好地理解。在圖表中，不須要通讀全部數據資料，便能很容易地瞭解數據模式，從而獲取關鍵信息。圖表的使用在商業 App 和健身 App 中很是常見。

本篇文章中，咱們主要介紹由 Daniel Cohen Gindi 開發的 ios-charts library。ios-charts 是由 Philipp Jahoda 創建的，是很是流行的 Android 庫 MPAndroidChart 的 iOS 端口。有了這個庫，你能夠方便快捷地在應用中添加不一樣類型的圖表。僅需寥寥幾行代碼，就能夠製做出功能齊備、交互性強的圖表，而且高度可定製。

函數庫的主要特徵：

• 8種不一樣的圖表類型；
• 兩個軸的縮放（用觸控手勢、分軸縮放或捏拉縮放）；
• 拖拽/平移（用觸控手勢）；
• 圖表結合（線形圖、柱形圖、離散圖、K 線圖、氣泡圖）；
• 雙（分開的）Y 軸；
• 手指畫圖（用觸控手勢將數值畫入圖表）；
• 數值突出顯示（自定義彈出視圖）；
• 多個/分離的軸；
• 儲存圖表到相冊/以 PNG/JPEG 格式輸出；
• 預約義顏色模板；
• 圖例（可自動生成，可自定義）；
• 自定義軸（包括 X 和Y 軸）；
• 動畫（在 X 軸和 Y 軸上創建動畫）；
• 界限（提供額外信息，好比最大值等）；

• 全方位自定義（上色、字體、圖例、顏色、背景、手勢、虛線等）。

  開始吧！

首先、下載本篇文章將會用到的初始示例——名爲 iOSChartsDemo 的簡易應用。應用運行時，你會看到有兩個項目的表格：條形圖和其餘圖表。當點擊項目時，會獲得空白的視圖。在本例中，筆者已建立了要用的兩個視圖控制器：BarChartViewController 和 ChartsViewController。

接着，咱們添加函數庫到項目中。你能夠用 CocoaPods 安裝該庫，這裏咱們直接手動安裝。

下載 ios-charts 項目，這個 zip 文件包含了函數庫（名爲 Charts 的文件夾）和一個示例項目（名爲 ChartsDemo）。若是你想了解更多關於函數庫的知識，示例項目是很棒的資源。

解壓縮已下載的文件，並將 Charts 文件複製粘貼到你項目（iOSChartsDemo）的根目錄下。在 Finder 中打開Charts文件，並將 Charts.xcodeproj 拖拽到 Xcode 項目中。結構以下圖所示。

接着從項目導航中選擇你的項目，並確保該 iOSChartsDemo 目標被選中。在右邊的常規選項卡中找到 Embedded Binaries 部分，點擊該部分的+號添加圖表框架。從列表中選擇 Charts.framework 並點擊 Add。

若是你想在 Objective-C 中使用函數庫，請參考使用說明。

用 Command-B 或選擇 Product > Build 來生成項目。若是不這樣作，當你導入 Charts 框架到你的項目時，Xcode 會報錯——沒法加載 Charts 底層模塊。

如今開始建立第一個圖表。

建立一個柱形圖

打開 BarChartViewController.swift 文件，添加如下聲明。

import Charts

打開故事板文件。咱們須要添加用來顯示圖表的視圖。從文檔綱要中選擇 Bar Chart View Controller，並在屬性檢查器中取消 Extend Edges 的 Under Top Barsin 選項。咱們不但願圖表自動延伸至導航欄下方。

接着拖拽一個視圖到 Bar Chart View Controller 中，並按下圖定位邊界。該視圖爲控制器中主視圖的子視圖。

視圖被選中後，在識別檢查器中將它的類設爲 BarChartView。再使用助理編輯器，加入視圖的 outlet 到 BarChartViewController 類，並命名爲 outletbarChartView。在 BarChartViewController 類中添加下列代碼。

@IBOutlet weak var barChartView: BarChartView!

運行項目，並從表格中選擇柱形圖，你可能會獲得視圖提示信息：無可用的圖表數據。

若是在沒有數據來產生圖表時，你想在空白狀態顯示其餘的信息，這時候能夠自定義這個提示信息。在 viewDidLoad()函數底部，加入下列代碼。

運行該項目，能夠看到自定義的提示信息。

你能夠爲下面信息進一步添加描述。這能夠用來向用戶解釋，爲何圖表是空的，他們須要獲取數據來生成圖表。例如：健身 App 應該讓用戶知道在整理圖表分析以前，他們須要先記錄跑步數據。

barChartView.noDataTextDescription = "GIVE REASON"

添加下面的屬性到該類。咱們用它來存儲一些圖表的模擬數據。

var months: [String]!

將下面的函數添加到該類，用以創建圖表。

func setChart(dataPoints: [String], values: [Double]) {
    barChartView.noDataText = "You need to provide data for the chart."
        
}

請注意，我曾經在 viewDidLoad()函數中添加了聲明。如今從 viewDidLoad()中移除該聲明。咱們將用 setChart()來自定義圖表。

在 viewDidLoad()中，添加如下內容到函數底部。

months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
let unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0, 16.0, 4.0, 18.0, 2.0, 4.0, 5.0, 4.0]
        
setChart(months, values: unitsSold)

咱們設置一些模擬數據，給出一些產品一年中每月售出的單位數。而後，咱們將數據傳給 setChart()。

讓一個圖表顯示數據，咱們還需建立一個 BarChartData 對象，並將其設置爲 barChartView 的數據屬性。添加下面的代碼到 setChart()函數底部。

var dataEntries: [BarChartDataEntry] = []
        
for i in 0..<dataPoints.count {
    let dataEntry = BarChartDataEntry(value: values[i], xIndex: i)
    dataEntries.append(dataEntry)
}
        
let chartDataSet = BarChartDataSet(yVals: dataEntries, label: "Units Sold")
let chartData = BarChartData(xVals: months, dataSet: chartDataSet)
barChartView.data = chartData

以上代碼中，咱們建立了一個 BarChartDataEntry 對象的數組。BarChartDataEntry 初始化須要每一個數據項的值、其對應的項目索引以及一個任意的標籤。

隨後，咱們使用這個對象建立 BarChartDataSet，主要用來傳遞 BarChartDataEntry 對象的數組，以及描述數據的標籤。

最後，咱們用它來建立一個 BarChartData 對象，用來設定咱們圖表視圖的數據。

運行該應用，能夠看到以下圖所示有數據的柱形圖。

你能夠爲出如今視圖右下方的圖表設置說明。默認狀況下，文本可用來設置「說明」，該說明會出如今圖片上。參考 ofMPAndroidChart 文檔，你能夠更改描述的位置，但看一下 iOS 的 API，這並無包括在內。函數庫仍在維護，因此可能會在以後添加。若是你想改變描述的位置，你能夠修改 ChartViewBase 類（是 BarChartView 類的子類）中的 drawDescription（上下文）函數。

針對本應用，咱們移除描述文本。在 setChart()函數的底部添加下列內容，將描述文本設爲空字符串。

barChartView.descriptionText = ""

自定義圖表

你能夠修改一些屬性來自定義圖表視圖的外觀。下面咱們來具體介紹，你也能夠瀏覽文檔看看哪些能夠自定義。

首先，咱們修改柱形圖的默認顏色。添加下列設置到 setChart()函數的底部。

chartDataSet.colors = [UIColor(red: 230/255, green: 126/255, blue: 34/255, alpha: 1)]

以上代碼設置了與數據相關的顏色。將該設定給 UIColor 對象數組。所以只要數組中有一種顏色，全部的實體都可用。

若是你想給每個數據對象設置不一樣的顏色，那麼你須要提供更多的顏色，本例中須要12種。若是你的顏色數量少於實體總數，那麼從坐到右將不一樣的顏色分配給柱形圖，直到顏色用完後從新開始分配。

API 中也自帶一些預約義顏色模板，你能夠用它來爲數據項設定不一樣顏色，它們包括：

• ChartColorTemplates.liberty()
• ChartColorTemplates.joyful()
• ChartColorTemplates.pastel()
• ChartColorTemplates.colorful()
• ChartColorTemplates.vordiplom()

以下所示，使用 ChartColorTemplates.colorful()模板。

chartDataSet.colors = ChartColorTemplates.colorful()

以下所示修改 X 軸標籤的位置。

barChartView.xAxis.labelPosition = .Bottom

如今標籤在圖表底部。

按照如下辦法能夠修改圖表的背景色。

barChartView.backgroundColor = UIColor(red: 189/255, green: 195/255, blue: 199/255, alpha: 1)

根據上述設定，你會看到以下所示的界面。

動畫

你能夠爲圖表設定一些動畫，使之更加生動活潑。你可使用三種主要的動畫類型方法，能夠同時讓 XY 軸或者分別某個軸產生動畫。

• animate(xAxisDuration: NSTimeInterval, yAxisDuration: NSTimeInterval)
• animate(xAxisDuration: NSTimeInterval)
• animate(yAxisDuration: NSTimeInterval)

你能夠加入任意的 ChartEasingOption 到以上函數。選項以下：

• Linear
• EaseInQuad
• EaseOutQuad
• EaseInOutQuad
• EaseInCubic
• EaseOutCubic
• EaseInOutCubic
• EaseInQuart
• EaseOutQuart
• EaseInOutQuart
• EaseInQuint
• EaseOutQuint
• EaseInOutQuint
• EaseInSine
• EaseOutSine
• EaseInOutSine
• EaseInExpo
• EaseOutExpo
• EaseInOutExpo
• EaseInCirc
• EaseOutCirc
• EaseInOutCirc
• EaseInElastic
• EaseOutElastic
• EaseInOutElastic
• EaseInBack
• EaseOutBack
• EaseInOutBack
• EaseInBounce
• EaseOutBounce
• EaseInOutBounce

添加下行內容到 setChart()函數。

運行應用，柱形圖以動畫的形式加入視圖。咱們同時爲兩個軸都設置2秒的動畫。

修改上述狀態爲：

barChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0, easingOption: .EaseInBounce)

你會看到這行的特效以下。

界限

界限是針對全部線形圖、柱形圖和離散圖的附加功能。它容許在圖表中顯示額外的線條爲特定軸（X 或 Y 軸）加限制。這額外的線用來設定數據的目標值，幫助用戶更容易瞭解是否達到界限。

要在圖表中加入界限，能夠添加如下代碼到 setData()函數中。

let ll = ChartLimitLine(limit: 10.0, label: "Target")
barChartView.rightAxis.addLimitLine(ll)

運行該應用，你能夠看到一條紅線，標記在單位10左右。上面的代碼中，咱們在界限上添加了一個標籤。可是 ChartLimitLine 有另外一個沒有添加標籤的初始化函數，若是不想加的話能夠省略。

觸控事件

若是運行應用，你會發現經過默認的捏拉縮放和雙擊來進行縮放。此外，若是某個柱形條被單擊，該柱形條會突出顯示。很棒的是無需本身再編代碼就能使用該功能，除非你想添加更多的功能，好比當用戶單擊柱形條時有其餘響應。

爲了檢測圖表內的選擇，咱們將使用 ChartViewDelegate 協議。

修改該類的聲明以下。

class BarChartViewController: UIViewController, ChartViewDelegate {

在調用 super.viewDidLoad()後面添加下列代碼到 viewDidLoad()。

barChartView.delegate = self

添加下面的函數到該類。

func chartValueSelected(chartView: ChartViewBase, entry: ChartDataEntry, dataSetIndex: Int, highlight: ChartHighlight) {
    println("\(entry.value) in \(months[entry.xIndex])")
}

當圖表視圖中的值被選中時，會調用上述函數。這裏咱們打印出被選中的月份和值。

保存圖表

你能夠將圖表的當前狀態保存爲圖像。能夠選擇將它保存到相機膠捲或者從新設置一個保存路徑。

首先，咱們將添加一個保存按鈕到圖表視圖。打開故事板文件，並找到柱形圖表視圖控制器。拖動導航項目到視圖控制器的導航欄，而後拖動柱形按鈕項，並將其放置於導航項目的右上角。刪除屬性檢查器中的導航項目的標題屬性中的「標題」文本。選擇柱形按鈕項，並設置其標識便於保存到屬性檢查器。能夠看到以下界面。

接着爲按鈕建立一個消息響應，命名爲 saveChart，添加如下代碼到 BarChartViewController 類中。

@IBAction func saveChart(sender: UIBarButtonItem) {
        
}

按照下列代碼修改上面的方法。

@IBAction func saveChart(sender: UIBarButtonItem) {
    barChartView.saveToCameraRoll()
}

執行該程序後，當點擊保存按鈕時，圖表圖像講保存到相冊，可用 Photos 應用瀏覽。

下列代碼能夠從新設置保存路徑。

barChartView.saveToPath(path: String, format: ChartViewBase.ImageFormat, compressionQuality: Double)

圖片格式多是 .JPEG或 .PNG，該 compressionQuality 是一種無損格式（JPEG）的壓縮質量。

更多圖表

如今咱們看一下其餘幾個圖表。大部分咱們都看過了，因此再也不過多贅述。

首先，在故事板文件中找到圖表視圖控制器，在識別檢查器中，設定視圖的標籤爲 Pie Chart View 的類爲 PieChartView。

以下所示修改 ChartsViewController 類。

import UIKit
import Charts
 
class ChartsViewController: UIViewController {
    
    @IBOutlet weak var lineChartView: LineChartView!
    @IBOutlet weak var pieChartView: PieChartView!
 
    override func viewDidLoad() {
        super.viewDidLoad()
 
        // Do any additional setup after loading the view.
        
        let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
        let unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0, 16.0]
        
        setChart(months, values: unitsSold)
        
    }
    
    func setChart(dataPoints: [String], values: [Double]) {
        
        var dataEntries: [ChartDataEntry] = []
        
        for i in 0..<dataPoints.count {
            let dataEntry = ChartDataEntry(value: values[i], xIndex: i)
            dataEntries.append(dataEntry)
        }
        
        let pieChartDataSet = PieChartDataSet(yVals: dataEntries, label: "Units Sold")
        let pieChartData = PieChartData(xVals: dataPoints, dataSet: pieChartDataSet)
        pieChartView.data = pieChartData
        
        var colors: [UIColor] = []
        
        for i in 0..<dataPoints.count {
            let red = Double(arc4random_uniform(256))
            let green = Double(arc4random_uniform(256))
            let blue = Double(arc4random_uniform(256))
            
            let color = UIColor(red: CGFloat(red/255), green: CGFloat(green/255), blue: CGFloat(blue/255), alpha: 1)
            colors.append(color)
        }
        
        pieChartDataSet.colors = colors
        
        
        let lineChartDataSet = LineChartDataSet(yVals: dataEntries, label: "Units Sold")
        let lineChartData = LineChartData(xVals: dataPoints, dataSet: lineChartDataSet)
        lineChartView.data = lineChartData
        
    }
 
}

以上代碼中，咱們將 Charts 框架導入類中，像以前建立柱形圖那樣，建立一個餅狀圖和一個線形圖。但須要注意的是，在柱形圖表例中咱們使用的是 BarChartDataEntry，而如今使用父類 ChartDataEntry 建立數據項。

運行應用，選擇表格視圖中的其餘圖表，能夠看見一個線形圖和有顏色的餅狀圖。你的應用可能跟下圖不徹底相同，由於餅狀圖的顏色是隨機的。

結束語

本篇文章大體介紹了使用 ios-charts 庫建立的一些圖表類型，大概涉及了自定義圖表的一些內容。若是你想知道這個庫的其餘功能，你能夠參考這個下載庫自帶的 ChartsDemo 項目的代碼，也能夠看看該項目的維基百科。這個連接到 Wiki 頁面會引導至 MPAndroidChart 項目文檔。做者在寫這篇文章時，尚未庫的 iOS 版本的文檔說明，但其實 API 跟 Android 版本約95％都相同，當你百思不得其解時，Android 文檔仍然能夠派上用場。

你能夠在這裏下載完整項目。

下面列出可建立的圖表類型。

線形圖（圖例、簡單的設計）

線形圖（圖例、簡單的設計）

線圖（立方線）

線圖（單數據組）

複合圖（柱形圖和線圖）

柱形圖（圖例、簡單設計）

柱形圖（分組數據集）

水平柱形圖

餅狀圖（有選取）

散點圖（以方形、三角形、圓形等圖例）

K線圖（針對財經數據）

氣泡圖（由氣泡區域覆蓋來表示值）

雷達圖（蛛網圖）

本文系 OneAPM 工程師編譯整理。想閱讀更多技術文章，請訪問 OneAPM 官方博客。