[Swift通天遁地]3、手勢與圖表-(5)建立帶有標題、圖例、座標軸的柱形圖表

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公衆號:山青詠芝(shanqingyongzhi)
➤博客園地址:山青詠芝(https://www.cnblogs.com/strengthen/
➤GitHub地址:https://github.com/strengthen/LeetCode
➤原文地址:http://www.javashuo.com/article/p-nfzlxgej-kr.html 
➤若是連接不是山青詠芝的博客園地址,則多是爬取做者的文章。
➤原文已修改更新!強烈建議點擊原文地址閱讀!支持做者!支持原創!
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★html

目錄:[Swift]通天遁地Swiftios

本文將演示如何如何建立一個漂亮的柱形圖表。git

首先確保在項目中已經安裝了所需的第三方庫。github

點擊【Podfile】,查看安裝配置文件。swift

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】項目文件。微信

爲了更好的顯示柱形圖標須要調整模擬器的朝向。app

【DemoApp】->【General】ide

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

在項目導航區,打開視圖控制器的代碼文件【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, 104, 81, 93, 52, 44 ]
13         //建立一個包含6個數字的數組,做爲第二組柱形的數據
14         let values2: [Double] = [76, 25, 20, 13, 52, 57]
15         //建立一個包含6個數字的數組,做爲第三組柱形的數據
16         let values3: [Double] = [101, 75, 28, 23, 45, 91]
17         //柱形圖將用來顯示三組數據的趨勢
18 
19         //依次建立三個圖表數據記錄
20         var entries1: [ChartDataEntry] = Array()
21         var entries2: [ChartDataEntry] = Array()
22         var entries3: [ChartDataEntry] = Array()
23         
24         //經過一個循環
25         for (i, value) in values1.enumerated()
26         {
27             //將第一個數組中的數字,添加到圖表數據記錄中。
28             entries1.append(BarChartDataEntry(x: Double(i), y: value))
29         }
30         
31         //經過一個循環
32         for (i, value) in values2.enumerated()
33         {
34             //將第二個數組中的數字,添加到圖表數據記錄中。
35             entries2.append(BarChartDataEntry(x: Double(i), y: value))
36         }
37         
38         //經過一個循環
39         for (i, value) in values3.enumerated()
40         {
41             //將第二個數組中的數字,添加到圖表數據記錄中。
42             entries3.append(BarChartDataEntry(x: Double(i), y: value))
43         }
44         
45         //建立第一個數據集,並設置數據集的值域和標籤文字
46         let dataSet = BarChartDataSet(values: entries1, label: "Company A")
47         //同時設置該數據集對應柱形的填充顏色
48         dataSet.setColor(NSUIColor(red: 229/255, green: 140/255, blue: 154/255, alpha: 1))
49         
50         //建立第二個數據集,並設置數據集的值域和標籤文字
51         let dataSet2 = BarChartDataSet(values: entries2, label: "Company B")
52         //同時設置該數據集對應柱形的填充顏色
53         dataSet2.setColor(NSUIColor(red: 243/255, green: 209/255, blue: 142/255, alpha: 1))
54         
55         //建立第三個數據集,並設置數據集的值域和標籤文字
56         let dataSet3 = BarChartDataSet(values: entries3, label: "Company C")
57         //同時設置該數據集對應柱形的填充顏色
58         dataSet3.setColor(NSUIColor(red: 172/255, green: 234/255, blue: 254/255, alpha: 1))
59         
60         //初始化一個柱形圖表數據對象,設置對象的數據集屬性。
61         let data = BarChartData(dataSets: [dataSet, dataSet2, dataSet3])
62         //設置柱形的寬度爲0.25
63         data.barWidth = 0.25
64         
65         //建立一個指定顯示區域的柱形圖表視圖
66         let chart = BarChartView(frame: CGRect(x: 0, y: 40, width: 560, height: 240))
67         //設置圖表視圖的背景顏色爲無色
68         chart.backgroundColor = NSUIColor.clear
69         //設置左側的座標軸的最小值是0
70         chart.leftAxis.axisMinimum = 0.0
71         //設置右側的座標軸的最小值是0
72         chart.rightAxis.axisMinimum = 0.0
73         //將圖表數據對象,設置爲柱形圖表視圖的數據屬性
74         chart.data = data
75         //強制將圖表的子元素進行組合,並忽略它們在屏幕上的位置。
76         chart.shouldGroupAccessibilityChildren = true
77         //設置圖表在水平方向上可被拖動的距離
78         chart.setDragOffsetX(100)
79         //設置圖表容許被縮放
80         chart.setScaleEnabled(true)
81         //在水平軸的兩次,各添加柱形一半的寬度,
82         //使全部的柱形均可以被所有顯示。
83         chart.fitBars = true
84         //將數據集組合起來
85         chart.groupBars(fromX: -1,//起點位置
86                         groupSpace: 0.2, //組間距
87                         barSpace: 0.05)//柱形的間距
88         
89         //將配置好的圖表,添加到根視圖中。
90         self.view.addSubview(chart)
91     }
92 
93     override func didReceiveMemoryWarning() {
94         super.didReceiveMemoryWarning()
95         // Dispose of any resources that can be recreated.
96     }
97 }
相關文章
相關標籤/搜索