本文將演示如何建立複合圖表：包含線性圖表和柱形圖表。

首先確保在專案中已經安裝了所需的第三方庫。

點選【Podfile】,檢視安裝配置檔案。

1 platform :ios, '12.0'
2 use_frameworks!
3 
4 target 'DemoApp' do
5     source 'https://github.com/CocoaPods/Specs.git'
6     pod 'Charts'
7 end

根據配置檔案中的相關配置，安裝第三方庫。

然後點選開啟【DemoApp.xcworkspace】專案檔案。

為了更好的顯示柱形圖示需要調整模擬器的朝向。

【DemoApp】->【General】

->【Device Orientation】取消勾選【Portrait】肖像選項，使模擬器保持橫向顯示。

在專案導航區，開啟檢視控制器的程式碼檔案【ViewController.swift】

 1 import UIKit
 2 //首先在當前的類檔案中，引入已經安裝的第三方類庫
 3 import Charts
 4 
 5 class ViewController: UIViewController {
 6 
 7     override func viewDidLoad() {
 8         super.viewDidLoad()
 
 9         // Do any additional setup after loading the view, typically from a nib.
10         
11         //依次建立一個包含6個數字的陣列，作為柱形圖表的資料來源
12         let values1: [Double] = [76, 25, 20, 13, 52, 57]
13         
14         //建立一個圖表資料記錄
15         var entries1: [ChartDataEntry] = Array()
16 
17         //
 
通過一個迴圈
18         for (i, value) in values1.enumerated()
19         {
20             //將陣列中的數字，新增到圖表資料記錄中。
21             entries1.append(BarChartDataEntry(x: Double(i), y: value))
22         }
23         
24         //建立柱形圖表資料集，並設定資料集的值域和標籤文字
25         let dataSet = BarChartDataSet(values: entries1, label: "Revenue")
26         //設定資料集的填充顏色屬性
27         dataSet.setColor(NSUIColor(red: 229/255, green: 140/255, blue: 154/255, alpha: 1))
28         
29 
30         //依次建立一個包含6個數字的陣列，作為折線圖表的資料來源
31         let valuesLine: [Double] = [8, 104, 81, 93, 52, 44 ]
32         
33          //建立一個圖表資料記錄
34         var entriesLine: [ChartDataEntry] = Array()
35 
36         //通過一個迴圈
37         for (i, value) in valuesLine.enumerated()
38         {
39              //將陣列中的數字，新增到圖表資料記錄中。
40             entriesLine.append(ChartDataEntry(x: Double(i), y: value))
41         }
42         
43         //建立折線圖表資料集，並設定資料集的值域和標籤文字
44         let dataSetLine = LineChartDataSet(values: entriesLine, label: "Cost")
45         //設定該資料集的填充顏色屬性
46         dataSetLine.setColor(NSUIColor(red: 243/255, green: 209/255, blue: 142/255, alpha: 1))
47         //設定在折線圖表中，不在端點繪製折線圖示
48         dataSetLine.drawCirclesEnabled = false
49         //設定折線的寬度為3.0
50         dataSetLine.lineWidth = 3.0
51         
52         //建立一個複合圖表資料
53         let data = CombinedChartData()
54         //設定複合圖表資料的折線圖資料的內容
55         data.lineData = LineChartData(dataSet: dataSetLine)
56         //設定複合圖表資料的柱形圖資料的內容
57         data.barData = BarChartData(dataSet: dataSet)
58         
59         //建立一個指定顯示區域的複合圖表檢視
60         let cv = CombinedChartView(frame: CGRect(x: 0, y: 40, width: 560, height: 240))
61         //設定複合圖表所顯示的資料內容
62         cv.data = data
63         //設定複合圖表繪製的順序，先繪製柱形圖表，再繪製折線圖表
64         cv.drawOrder = [DrawOrder.bar.rawValue, DrawOrder.line.rawValue]
65         //設定複合圖表不繪製柱形的陰影
66         cv.drawBarShadowEnabled = false
67         //設定複合圖表不在柱形的上方繪製數值標籤
68         cv.drawValueAboveBarEnabled = false
69         
70         //將配置好的複合圖表，新增到根檢視中
71         self.view.addSubview(cv)
72     }
73 
74     override func didReceiveMemoryWarning() {
75         super.didReceiveMemoryWarning()
76         // Dispose of any resources that can be recreated.
77     }
78 }