本文將演示使用另一個圖表類庫，製作美觀簡介的滾動圖表。

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

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

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

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

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

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

【DemoApp】->【General】

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

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

 1 import UIKit
 2 //首先在當前的類檔案中，引入已經安裝的第三方類庫
 3 import ScrollableGraphView
 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         //簡單的折線圖表
12         buildSimpleChart()
13     }
14     
15     //新增一個方法，用來完成圖表的建立
16     func buildSimpleChart()
17     {
18         //初始化一個矩形區域物件
19         let frame = CGRect(x: 0
 
, y: 40, width: 320, height: 180)
20         //建立一個指定顯示區域的可滾動檢視
21         let graphView = ScrollableGraphView(frame: frame)
22         
23         //建立一個數組，作為圖表的資料來源
24         let data: [Double] = [4, 48, 15, 16, 73, 42]
25         //建立另一個數組，作為圖表的水平軸方向的標籤
26         let labels = ["one", "two", "three", "four", "five", "six"]
27         
28         //設定可滾動圖形檢視的資料來源和標題
29         graphView.set(data: data,//資料來源
30                       withLabels: labels)//標題
31 
32         //將可滾動圖形檢視新增到根檢視              
33         self.view.addSubview(graphView)
34     }
35     
36     override func didReceiveMemoryWarning() {
37         super.didReceiveMemoryWarning()
38         // Dispose of any resources that can be recreated.
39     }
40 }

 1 import UIKit
 2 //首先在當前的類檔案中，引入已經安裝的第三方類庫
 3 import ScrollableGraphView
 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         //平滑曲線的面積圖表
12         buildSmoothDarkChart()
13     }
14     
15     //建立一個方法，用來建立一個暗調、平滑、可滾動的面積圖
16     func buildSmoothDarkChart()
17     {
18         //初始化一個矩形區域物件
19         let frame = CGRect(x: 0, y: 40, width: 320, height: 280)
20         //建立一個指定顯示區域的可滾動圖形檢視
21         let graphView = ScrollableGraphView(frame: frame)
22         
23         //設定圖形檢視的背景填充顏色
24         graphView.backgroundFillColor = UIColor(red: 51.0/255, green: 51.0/255, blue: 51.0/255, alpha: 1.0)
25         
26         //設定圖形檢視的最大值為100，超過此值的資料將顯示再圖形之外
27         graphView.rangeMax = 100
28         
29         //設定線條的寬度為1
30         graphView.lineWidth = 1
31         //設定線條的顏色
32         graphView.lineColor = UIColor(red: 119.0/255, green: 119.0/255, blue: 119.0/255, alpha: 1.0)
33         //設定線段的外觀為平滑樣式，這樣繪製的曲線為貝塞爾曲線
34         graphView.lineStyle = ScrollableGraphViewLineStyle.smooth
35         
36         //設定圖形支援填充模式，以繪製面積圖
37         graphView.shouldFill = true
38         //設定面積圖的填充模式為漸變填充
39         graphView.fillType = ScrollableGraphViewFillType.gradient
40         //設定面積圖的填充的顏色
41         graphView.fillColor = UIColor(red: 85.0/255, green: 85.0/255, blue: 85.0/255, alpha: 1.0)
42         //設定漸變填充的型別為線形漸變，除此之外還有徑向漸變樣式
43         graphView.fillGradientType = ScrollableGraphViewGradientType.linear
44         //設定漸變填充的起始顏色
45         graphView.fillGradientStartColor = UIColor(red: 85.0/255, green: 85.0/255, blue: 85.0/255, alpha: 1.0)
46         //設定漸變填充的結束顏色
47         graphView.fillGradientEndColor = UIColor(red: 68.0/255, green: 68.0/255, blue: 68.0/255, alpha: 1.0)
48         
49         //設定資料點之間的間距為80
50         graphView.dataPointSpacing = 80
51         //設定資料點的大小為2
52         graphView.dataPointSize = 2
53         //設定圖形檢視的資料點的顏色為白色
54         graphView.dataPointFillColor = UIColor.white
55         
56         //設定參考線上的標籤字型，為加粗的8號字型
57         graphView.referenceLineLabelFont = UIFont.boldSystemFont(ofSize: 8)
58         //設定參考線的顏色為白色，顏色的透明度為0.2
59         graphView.referenceLineColor = UIColor.white.withAlphaComponent(0.2)
60         //設定參考線上的標籤字型的顏色為白色
61         graphView.referenceLineLabelColor = UIColor.white
62         //設定資料點的標籤字型的顏色為白色，顏色的透明度為0.5
63         graphView.dataPointLabelColor = UIColor.white.withAlphaComponent(0.5)
64         
65         //初始化一個數組，作為圖表的資料
66         let data: [Double] = [4, 48, 15, 16, 73, 42]
67         //初始化一個數組，作為水平軸上的標題
68         let labels = ["one", "two", "three", "four", "five", "six"]
69         
70         //設定圖形檢視的資料來源和資料標籤
71         graphView.set(data: data, withLabels: labels)
72         //設定根檢視的背景顏色
73         self.view.backgroundColor = UIColor(red: 51.0/255, green: 51.0/255, blue: 51.0/255, alpha: 1.0)
74         //將圖形檢視新增到根檢視
75         self.view.addSubview(graphView)
76     }
77 
78     override func didReceiveMemoryWarning() {
79         super.didReceiveMemoryWarning()
80         // Dispose of any resources that can be recreated.
81     }
82 }

 1 import UIKit
 2 //首先在當前的類檔案中，引入已經安裝的第三方類庫
 3 import ScrollableGraphView
 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         //暗調主題的柱形圖表
12         barDarkChart()
13     }
14     
15     //新增一個方法，建立一個暗調的柱形圖表
16     func barDarkChart()
17     {
18         //初始化一個矩形區域物件
19         let frame = CGRect(x: 0, y: 40, width: 320, height: 280)
20         //建立一個指定顯示區域的可滾動檢視
21         let graphView = ScrollableGraphView(frame:frame)
22         
23         //設定圖形檢視允許繪製資料點
24         graphView.shouldDrawDataPoint = false
25         //設定圖形檢視的線條顏色為無色
26         graphView.lineColor = UIColor.clear
27         //設定圖形檢視繪製柱形圖層
28         graphView.shouldDrawBarLayer = true
29         
30         //設定柱形的寬度為25
31         graphView.barWidth = 25
32         //設定柱形線條的寬度為1
33         graphView.barLineWidth = 1
34         //設定圖形線條的顏色
35         graphView.barLineColor = UIColor(red: 119.0/255, green: 119.0/255, blue: 119.0/255, alpha: 1.0)
36         //設定圖形自身的填充顏色
37         graphView.barColor = UIColor(red: 85.0/255, green: 85.0/255, blue: 85.0/255, alpha: 1.0)
38         //設定圖形檢視的背景填充顏色
39         graphView.backgroundFillColor = UIColor(red: 51.0/255, green: 51.0/255, blue: 51.0/255, alpha: 1.0)
40         
41         //設定圖形檢視的參考線的標籤字型
42         graphView.referenceLineLabelFont = UIFont.boldSystemFont(ofSize: 8)
43         //設定圖形檢視的參考線的線條顏色
44         graphView.referenceLineColor = UIColor.white.withAlphaComponent(0.2)
45         //設定圖形檢視的參考線的字型顏色
46         graphView.referenceLineLabelColor = UIColor.white
47         //設定資料點標籤顏色為白色，透明度為0.5
48         graphView.dataPointLabelColor = UIColor.white.withAlphaComponent(0.5)
49         //設定中間參考線的數量為5，預設值為3
50         graphView.numberOfIntermediateReferenceLines = 5
51         
52         //設定圖形檢視以動畫的方式顯示
53         graphView.shouldAnimateOnStartup = true
54         //設定垂直軸向的資料範圍為自適應，以能夠全部顯示所有的資料
55         graphView.shouldAdaptRange = true
56         //設定圖形檢視的動畫型別為彈性樣式
57         graphView.adaptAnimationType = ScrollableGraphViewAnimationType.elastic
58         //設定動畫的時長為1.5s
59         graphView.animationDuration = 1.5
60         //設定垂直軸向顯示範圍的最大值為100，
61         //超出範圍之外的資料將顯示在圖形之外
62         graphView.rangeMax = 100
63         //設定圖形檢視的顯示範圍，七最小值始終保持為0
64         graphView.shouldRangeAlwaysStartAtZero = true
65         
66         //設定可滾動圖形檢視的資料來源
67         let data: [Double] = [4, 48, 15, 16, 73, 42]
68         //設定可滾動圖形檢視的標題
69         let labels = ["one", "two", "three", "four", "five", "six"]
70         
71         //設定圖形檢視的資料來源和標題
72         graphView.set(data: data, withLabels: labels)
73         //設定圖形檢視的背景顏色
74         self.view.backgroundColor = UIColor(red: 51.0/255, green: 51.0/255, blue: 51.0/255, alpha: 1.0)
75         //最後將圖形檢視新增到根檢視
76         self.view.addSubview(graphView)
77     }
78 
79     override func didReceiveMemoryWarning() {
80         super.didReceiveMemoryWarning()
81         // Dispose of any resources that can be recreated.
82     }
83 }

 1 import UIKit
 2 //首先在當前的類檔案中，引入已經安裝的第三方類庫
 3 import ScrollableGraphView
 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         //藍色的散點圖表
12         dotChart()
13     }
14     
15     //新增一個新方法，建立一個散點圖表
16     func dotChart()
17     {
18         //初始化一個矩形區域物件
19         let frame = CGRect(x: 0, y: 40, width: 320, height: 280)
20         //建立一個指定顯示區域的可滾動檢視
21         let graphView = ScrollableGraphView(frame:frame)
22         //設定圖形檢視的背景填充顏色
23         graphView.backgroundFillColor = UIColor(red: 0.0, green: 191.0/255, blue: 1.0, alpha: 1.0)
24         //設定圖形檢視的線條顏色
25         graphView.lineColor = UIColor.clear
26         
27         //設定圖形檢視的資料點的尺寸
28         graphView.dataPointSize = 5
29         //設定圖形檢視的資料點之間的距離
30         graphView.dataPointSpacing = 80
31         //設定資料點的標籤字型
32         graphView.dataPointLabelFont = UIFont.boldSystemFont(ofSize: 10)
33         //設定資料點的標籤顏色
34         graphView.dataPointLabelColor = UIColor.white
35         //設定資料點的填充顏色
36         graphView.dataPointFillColor = UIColor.white
37         
38         //設定圖形檢視參考線的標籤字型
39         graphView.referenceLineLabelFont = UIFont.boldSystemFont(ofSize: 10)
40         //設定圖形檢視參考線的線條顏色
41         graphView.referenceLineColor = UIColor.white.withAlphaComponent(0.5)
42         //設定圖形檢視參考線的標籤文字的顏色
43         graphView.referenceLineLabelColor = UIColor.white
44         //設定在圖形檢視中，參考線位於左右兩次
45         //參考線的位置共有【左、右、兩側】這三種格式
46         graphView.referenceLinePosition = ScrollableGraphViewReferenceLinePosition.both
47         
48         //設定中間參考線的數量為9，預設的值為3
49         graphView.numberOfIntermediateReferenceLines = 9
50         //設定垂直軸向顯示範圍的最大值為100，
51         //超出範圍之外的資料將顯示在圖形之外
52         graphView.rangeMax = 100
53         
54         //初始化一個數組，作為圖表的資料
55         let data: [Double] = [4, 48, 15, 16, 73, 42]
56         //初始化一個數組，作為水平軸向的標題
57         let labels = ["one", "two", "three", "four", "five", "six"]
58         
59         //設定圖形檢視的資料來源和標題資訊
60         graphView.set(data: data, withLabels: labels)
61         //設定根檢視的背景顏色
62         self.view.backgroundColor = UIColor(red: 0.0, green: 191.0/255, blue: 1.0, alpha: 1.0)
63         //並將圖形檢視新增到根檢視
64         self.view.addSubview(graphView)
65     }
66     
67     override func didReceiveMemoryWarning() {
68         super.didReceiveMemoryWarning()
69         // Dispose of any resources that can be recreated.
70     }
71 }