[Swift通天遁地]3、手勢與圖表-(12)建立複合圖表:包含線性圖表和柱形圖表

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公衆號:山青詠芝(shanqingyongzhi)
➤博客園地址:山青詠芝(https://www.cnblogs.com/strengthen/
➤GitHub地址:https://github.com/strengthen/LeetCode
➤原文地址:http://www.javashuo.com/article/p-rvfbeehr-kt.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] = [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 }
相關文章
相關標籤/搜索