本文將演示如何製作散點圖表。

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

點選【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] = [8, 61, 81, 93, 52, 44 ]
13         let values2: [Double] = [76, 25, 20, 13, 52, 57]
14         let values3: [Double] = [55, 75, 28, 23, 45, 91
 
]
15         
16         //依次建立三個圖表資料記錄
17         var entries1: [ChartDataEntry] = Array()
18         var entries2: [ChartDataEntry] = Array()
19         var entries3: [ChartDataEntry] = Array()
20         
21         //通過一個迴圈
22         for (i, value) in values1.enumerated()
23         {
24             //將第一個陣列中的數字，新增到圖表資料記錄中。
25             //並依次設定兩軸的資料
26             entries1.append(ChartDataEntry(x: Double(i), y: value))
27         }
28         
29         //通過一個迴圈
30         for (i, value) in values2.enumerated()
31         {
32             //將第一個陣列中的數字，新增到圖表資料記錄中。
33             //並依次設定兩軸的資料
34             entries2.append(ChartDataEntry(x: Double(i), y: value))
35         }
36         
37         //通過一個迴圈
38         for (i, value) in values3.enumerated()
39         {
40             //將第一個陣列中的數字，新增到圖表資料記錄中。
41             //並依次設定兩軸的資料
42             let de = ChartDataEntry(x: Double(i), y: value)
43             entries3.append(de)
44         }
45         
46         //建立第一個資料集，並設定資料集的值域和標籤文字
47         let dataSet = ScatterChartDataSet(values: entries1, label: "Company A")
48         //設定第一組的散點圖的圖示為三角形
49         dataSet.setScatterShape(.triangle)
50         //設定散點圖表的尺寸為20
51         dataSet.scatterShapeSize = 20
52         //設定散點圖表的填充顏色
53         dataSet.setColor(NSUIColor(red: 229/255, green: 140/255, blue: 154/255, alpha: 1))
54         
55         //建立第二個資料集，並設定資料集的值域和標籤文字
56         let dataSet2 = ScatterChartDataSet(values: entries2, label: "Company B")
57         //設定第二組的散點圖的圖示為方形
58         dataSet2.setScatterShape(.square)
59         //設定散點圖表的填充顏色
60         dataSet2.setColor(NSUIColor(red: 243/255, green: 209/255, blue: 142/255, alpha: 1))
61         
62         //建立第三個資料集，並設定資料集的值域和標籤文字
63         let dataSet3 = ScatterChartDataSet(values: entries3, label: "Company C")
64         //設定第二組的散點圖的圖示為圓形
65         dataSet3.setScatterShape(.circle)
66         //設定散點圖表的填充顏色
67         dataSet3.setColor(NSUIColor(red: 172/255, green: 234/255, blue: 254/255, alpha: 1))
68         
69         //建立一個指定顯示區域的散點圖表檢視
70         let chart = ScatterChartView(frame: CGRect(x: 0, y: 10, width: 560, height: 280))
71         //設定圖表檢視的背景顏色為無色
72         chart.backgroundColor = NSUIColor.clear
73         //設定散點圖表所顯示的資料內容
74         chart.data = ScatterChartData(dataSets: [dataSet,dataSet2,dataSet3])
75         //設定圖表中的數值的最大可視數量為200
76         chart.maxVisibleCount = 200
77         //設定水平座標軸的標籤位置
78         //共有：頂部、底部、雙側、頂部內側、底部內側五種。
79         chart.xAxis.labelPosition = .bottom
80         //設定圖表的描述資訊
81         chart.chartDescription?.text = "strengthen"
82         
83         //將配置好的圖表新增到根檢視中
84         self.view.addSubview(chart)
85     }
86 
87     override func didReceiveMemoryWarning() {
88         super.didReceiveMemoryWarning()
89         // Dispose of any resources that can be recreated.
90     }
91 }