[Swift通天遁地]三、手势与图表-(6)创建一个包含三条折线的线性图表

本文将演示如何创建一个包含三条折线的线性图表。

首先确保在项目中已经安装了所需的第三方库。

点击【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, 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(ChartDataEntry(x: Double(i), y: value))
29         }
30         
31         //通过一个循环
32         for (i, value) in values2.enumerated()
33         {
34             //将第一个数组中的数字，添加到图表数据记录中。
35             entries2.append(ChartDataEntry(x: Double(i), y: value))
36         }
37         
38         //通过一个循环
39         for (i, value) in values3.enumerated()
40         {
41             //将第一个数组中的数字，添加到图表数据记录中。
42             entries3.append(ChartDataEntry(x: Double(i), y: value))
43         }
44         
45         //创建第一个数据集，并设置数据集的值域和标签文字
46         let dataSet = LineChartDataSet(values: entries1, label: "Company A")
47         //同时设置该数据集对应折线的填充颜色
48         dataSet.setColor(NSUIColor(red: 229/255, green: 140/255, blue: 154/255, alpha: 1))
49         //不在折线的端点绘制圆圈
50         dataSet.drawCirclesEnabled = false
51         //设置折线的宽度为3
52         dataSet.lineWidth = 3.0
53         
54         //创建第二个数据集，并设置数据集的值域和标签文字
55         let dataSet2 = LineChartDataSet(values: entries2, label: "Company B")
56         //设置第二条折线端点位置上的圆圈的半径为4
57         dataSet2.circleRadius = 4.0
58         //设置圆圈的填充颜色
59         dataSet2.circleColors = [NSUIColor(red: 243/255, green: 209/255, blue: 142/255, alpha: 1)]
60         //设置第二条折线的填充颜色
61         dataSet2.setColor(NSUIColor(red: 243/255, green: 209/255, blue: 142/255, alpha: 1))
62         
63         //创建第三个数据集，并设置数据集的值域和标签文字
64         let dataSet3 = LineChartDataSet(values: entries3, label: "Company C")
65         //设置折线的宽度为3
66         dataSet3.lineWidth = 3.0
67         //设置第三条折线的填充颜色
68         dataSet3.setColor(NSUIColor(red: 172/255, green: 234/255, blue: 254/255, alpha: 1))
69         
70         //创建一个指定显示区域的折线图表视图
71         let chart = LineChartView(frame: CGRect(x: 0, y: 40, width: 560, height: 240))
72         //设置图表视图的背景颜色为无色
73         chart.backgroundColor = NSUIColor.clear
74         //设置左侧的坐标轴的最小值是0
75         chart.leftAxis.axisMinimum = 0.0
76         //设置右侧的坐标轴的最小值是0
77         chart.rightAxis.axisMinimum = 0.0
78         //设置折线图表所显示的数据内容
79         chart.data = LineChartData(dataSets: [dataSet, dataSet2, dataSet3])
80         
81         //将配置好的图表，添加到根视图中。
82         self.view.addSubview(chart)
83     }
84 
85     override func didReceiveMemoryWarning() {
86         super.didReceiveMemoryWarning()
87         // Dispose of any resources that can be recreated.
88     }
89 }