[Swift通天遁地]三、手势与图表-(9)制作五彩缤纷的气泡图表

本文将演示如何制作五彩缤纷的气泡图表。

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

点击【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         //创建一个包含6个数字的数组，作为气泡图表的数据源
14         let values2: [Double] = [76, 25, 20, 13, 52, 57]
15         //创建一个包含6个数字的数组，作为气泡图表的数据源
16         let values3: [Double] = [55, 75, 28, 23, 45, 91]
17         //创建一个包含6个数字的数组，作为气泡的尺寸
18         let sizes: [CGFloat] = [1, 2, 3, 4, 5, 6]
19         
20         //依次创建三个图表数据记录
21         var entries1: [ChartDataEntry] = Array()
22         var entries2: [ChartDataEntry] = Array()
23         var entries3: [ChartDataEntry] = Array()
24         
25         //通过一个循环
26         for (i, value) in values1.enumerated()
27         {
28             //将第一个数组中的数字，添加到图表数据记录中。
29             //并依次设置两轴标题和气泡大小
30             entries1.append(BubbleChartDataEntry(x: Double(i), y: value, size: sizes[i]))
31         }
32         
33         //通过一个循环
34         for (i, value) in values2.enumerated()
35         {
36             //将第二个数组中的数字，添加到图表数据记录中。
37             //并依次设置两轴标题和气泡大小
38             entries2.append(BubbleChartDataEntry(x: Double(i), y: value, size: sizes[i]))
39         }
40         
41         //通过一个循环
42         for (i, value) in values3.enumerated()
43         {
44             //将三个数组中的数字，添加到图表数据记录中。
45             //并依次设置两轴标题和气泡大小
46             let de = BubbleChartDataEntry(x: Double(i), y: value, size: sizes[5-i])
47             entries3.append(de)
48         }
49         
50         //创建第一个数据集，并设置数据集的值域和标签文字
51         let dataSet = BubbleChartDataSet(values: entries1, label: "Company A")
52         //同时设置该数据集对应的填充颜色
53         dataSet.setColor(NSUIColor(red: 229/255, green: 140/255, blue: 154/255, alpha: 1))
54         
55         //创建第二个数据集，并设置数据集的值域和标签文字
56         let dataSet2 = BubbleChartDataSet(values: entries2, label: "Company B")
57         //同时设置该数据集对应的填充颜色
58         dataSet2.setColor(NSUIColor(red: 243/255, green: 209/255, blue: 142/255, alpha: 1))
59         
60         //创建第三个数据集，并设置数据集的值域和标签文字
61         let dataSet3 = BubbleChartDataSet(values: entries3, label: "Company C")
62         //同时设置该数据集对应的填充颜色
63         dataSet3.setColor(NSUIColor(red: 172/255, green: 234/255, blue: 254/255, alpha: 1))
64         
65         //创建一个指定显示区域的气泡图表视图
66         let chart = BubbleChartView(frame: CGRect(x: 0, y: 10, width: 560, height: 280))
67         //设置图表视图的背景颜色为无色
68         chart.backgroundColor = NSUIColor.clear
69         //设置气泡图表所显示的数据内容
70         chart.data = BubbleChartData(dataSets: [dataSet,dataSet2,dataSet3])
71         //设置图表中的数值的最大可视数量为200
72         chart.maxVisibleCount = 200
73         //设置水平坐标轴的标签位置
74         //共有：顶部、底部、双侧、顶部内侧、底部内侧五种。
75         chart.xAxis.labelPosition = .bottom
76         //设置图表的描述信息
77         chart.chartDescription?.text = "strengthen"
78         //设置图例的文字颜色为红色
79         chart.legend.textColor = NSUIColor.red
80         //设置图例的文字的字体大小为16
81         chart.legend.formSize = 16
82         //设置图例在图表中的位置处于右上角
83         chart.legend.position = .aboveChartRight
84         
85         //将配置好的图表添加到根视图中。
86         self.view.addSubview(chart)
87     }
88 
89     override func didReceiveMemoryWarning() {
90         super.didReceiveMemoryWarning()
91         // Dispose of any resources that can be recreated.
92     }
93 }