[Swift通天遁地]三、手勢與圖表-(10)建立包含圓點、方形、三角形圖示的散點圖表
阿新 • • 發佈:2019-01-02
本文將演示如何製作散點圖表。
首先確保在專案中已經安裝了所需的第三方庫。
點選【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 }