[Swift通天遁地]三、手势与图表，13制作美观简介的滚动图表：折线图表、面积图表、柱形图表、散点图表
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号：山青咏芝（shanqingyongzhi）
➤博客园地址：山青咏芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：
➤如果链接不是山青咏芝的博客园地址，则可能是爬取作者的文章。
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
本文将演示使用另一个图表类库，制作美观简介的滚动图表。
首先确保在项目中已经安装了所需的第三方库。
点击【Podfile】,查看安装配置文件。
1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'ScrollableGraphView' 7 end
根据配置文件中的相关配置，安装第三方库。
然后点击打开【DemoApp.xcworkspace】项目文件。
为了更好的显示柱形图标需要调整模拟器的朝向。
【DemoApp】->【General】
->【Device Orientation】取消勾选【Portrait】肖像选项，使模拟器保持横向显示。
在项目导航区，打开视图控制器的代码文件【ViewController.swift】
1.简单的折线图表
1 import UIKit
2 //首先在当前的类文件中，引入已经安装的第三方类库
3 import ScrollableGraphView
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 //简单的折线图表
12 buildSimpleChart()
13 }
14
15 //添加一个方法，用来完成图表的创建
16 func buildSimpleChart()
17 {
18 //初始化一个矩形区域对象
19 let frame = CGRect(x: 0, y: 40, width: 320, height: 180)
20 //创建一个指定显示区域的可滚动视图
21 let graphView = ScrollableGraphView(frame: frame)
22
23 //创建一个数组，作为图表的数据源
24 let data: [Double] = [4, 48, 15, 16, 73, 42]
25 //创建另一个数组，作为图表的水平轴方向的标签
26 let labels = ["one", "two", "three", "four", "five", "six"]
27
28 //设置可滚动图形视图的数据源和标题
29 graphView.set(data: data,//数据源
30 withLabels: labels)//标题
31
32 //将可滚动图形视图添加到根视图
33 self.view.addSubview(graphView)
34 }
35
36 override func didReceiveMemoryWarning() {
37 super.didReceiveMemoryWarning()
38 // Dispose of any resources that can be recreated.
39 }
40 }2.平滑曲线的面积图表
1 import UIKit
2 //首先在当前的类文件中，引入已经安装的第三方类库
3 import ScrollableGraphView
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 //平滑曲线的面积图表
12 buildSmoothDarkChart()
13 }
14
15 //创建一个方法，用来创建一个暗调、平滑、可滚动的面积图
16 func buildSmoothDarkChart()
17 {
18 //初始化一个矩形区域对象
19 let frame = CGRect(x: 0, y: 40, width: 320, height: 280)
20 //创建一个指定显示区域的可滚动图形视图
21 let graphView = ScrollableGraphView(frame: frame)
22
23 //设置图形视图的背景填充颜色
24 graphView.backgroundFillColor = UIColor(red: 51.0/255, green: 51.0/255, blue: 51.0/255, alpha: 1.0)
25
26 //设置图形视图的最大值为100，超过此值的数据将显示再图形之外
27 graphView.rangeMax = 100
28
29 //设置线条的宽度为1
30 graphView.lineWidth = 1
31 //设置线条的颜色
32 graphView.lineColor = UIColor(red: 119.0/255, green: 119.0/255, blue: 119.0/255, alpha: 1.0)
33 //设置线段的外观为平滑样式，这样绘制的曲线为贝塞尔曲线
34 graphView.lineStyle = ScrollableGraphViewLineStyle.smooth
35
36 //设置图形支持填充模式，以绘制面积图
37 graphView.shouldFill = true
38 //设置面积图的填充模式为渐变填充
39 graphView.fillType = ScrollableGraphViewFillType.gradient
40 //设置面积图的填充的颜色
41 graphView.fillColor = UIColor(red: 85.0/255, green: 85.0/255, blue: 85.0/255, alpha: 1.0)
42 //设置渐变填充的类型为线形渐变，除此之外还有径向渐变样式
43 graphView.fillGradientType = ScrollableGraphViewGradientType.linear
44 //设置渐变填充的起始颜色
45 graphView.fillGradientStartColor = UIColor(red: 85.0/255, green: 85.0/255, blue: 85.0/255, alpha: 1.0)
46 //设置渐变填充的结束颜色
47 graphView.fillGradientEndColor = UIColor(red: 68.0/255, green: 68.0/255, blue: 68.0/255, alpha: 1.0)
48
49 //设置数据点之间的间距为80
50 graphView.dataPointSpacing = 80
51 //设置数据点的大小为2
52 graphView.dataPointSize = 2
53 //设置图形视图的数据点的颜色为白色
54 graphView.dataPointFillColor = UIColor.white
55
56 //设置参考线上的标签字体，为加粗的8号字体
57 graphView.referenceLineLabelFont = UIFont.boldSystemFont(ofSize: 8)
58 //设置参考线的颜色为白色，颜色的透明度为0.2
59 graphView.referenceLineColor = UIColor.white.withAlphaComponent(0.2)
60 //设置参考线上的标签字体的颜色为白色
61 graphView.referenceLineLabelColor = UIColor.white
62 //设置数据点的标签字体的颜色为白色，颜色的透明度为0.5
63 graphView.dataPointLabelColor = UIColor.white.withAlphaComponent(0.5)
64
65 //初始化一个数组，作为图表的数据
66 let data: [Double] = [4, 48, 15, 16, 73, 42]
67 //初始化一个数组，作为水平轴上的标题
68 let labels = ["one", "two", "three", "four", "five", "six"]
69
70 //设置图形视图的数据源和数据标签
71 graphView.set(data: data, withLabels: labels)
72 //设置根视图的背景颜色
73 self.view.backgroundColor = UIColor(red: 51.0/255, green: 51.0/255, blue: 51.0/255, alpha: 1.0)
74 //将图形视图添加到根视图
75 self.view.addSubview(graphView)
76 }
77
78 override func didReceiveMemoryWarning() {
79 super.didReceiveMemoryWarning()
80 // Dispose of any resources that can be recreated.
81 }
82 }3.暗调主题的柱形图表
1 import UIKit
2 //首先在当前的类文件中，引入已经安装的第三方类库
3 import ScrollableGraphView
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 //暗调主题的柱形图表
12 barDarkChart()
13 }
14
15 //添加一个方法，创建一个暗调的柱形图表
16 func barDarkChart()
17 {
18 //初始化一个矩形区域对象
19 let frame = CGRect(x: 0, y: 40, width: 320, height: 280)
20 //创建一个指定显示区域的可滚动视图
21 let graphView = ScrollableGraphView(frame:frame)
22
23 //设置图形视图允许绘制数据点
24 graphView.shouldDrawDataPoint = false
25 //设置图形视图的线条颜色为无色
26 graphView.lineColor = UIColor.clear
27 //设置图形视图绘制柱形图层
28 graphView.shouldDrawBarLayer = true
29
30 //设置柱形的宽度为25
31 graphView.barWidth = 25
32 //设置柱形线条的宽度为1
33 graphView.barLineWidth = 1
34 //设置图形线条的颜色
35 graphView.barLineColor = UIColor(red: 119.0/255, green: 119.0/255, blue: 119.0/255, alpha: 1.0)
36 //设置图形自身的填充颜色
37 graphView.barColor = UIColor(red: 85.0/255, green: 85.0/255, blue: 85.0/255, alpha: 1.0)
38 //设置图形视图的背景填充颜色
39 graphView.backgroundFillColor = UIColor(red: 51.0/255, green: 51.0/255, blue: 51.0/255, alpha: 1.0)
40
41 //设置图形视图的参考线的标签字体
42 graphView.referenceLineLabelFont = UIFont.boldSystemFont(ofSize: 8)
43 //设置图形视图的参考线的线条颜色
44 graphView.referenceLineColor = UIColor.white.withAlphaComponent(0.2)
45 //设置图形视图的参考线的字体颜色
46 graphView.referenceLineLabelColor = UIColor.white
47 //设置数据点标签颜色为白色，透明度为0.5
48 graphView.dataPointLabelColor = UIColor.white.withAlphaComponent(0.5)
49 //设置中间参考线的数量为5，默认值为3
50 graphView.numberOfIntermediateReferenceLines = 5
51
52 //设置图形视图以动画的方式显示
53 graphView.shouldAnimateOnStartup = true
54 //设置垂直轴向的数据范围为自适应，以能够全部显示所有的数据
55 graphView.shouldAdaptRange = true
56 //设置图形视图的动画类型为弹性样式
57 graphView.adaptAnimationType = ScrollableGraphViewAnimationType.elastic
58 //设置动画的时长为1.5s
59 graphView.animationDuration = 1.5
60 //设置垂直轴向显示范围的最大值为100，
61 //超出范围之外的数据将显示在图形之外
62 graphView.rangeMax = 100
63 //设置图形视图的显示范围，七最小值始终保持为0
64 graphView.shouldRangeAlwaysStartAtZero = true
65
66 //设置可滚动图形视图的数据源
67 let data: [Double] = [4, 48, 15, 16, 73, 42]
68 //设置可滚动图形视图的标题
69 let labels = ["one", "two", "three", "four", "five", "six"]
70
71 //设置图形视图的数据源和标题
72 graphView.set(data: data, withLabels: labels)
73 //设置图形视图的背景颜色
74 self.view.backgroundColor = UIColor(red: 51.0/255, green: 51.0/255, blue: 51.0/255, alpha: 1.0)
75 //最后将图形视图添加到根视图
76 self.view.addSubview(graphView)
77 }
78
79 override func didReceiveMemoryWarning() {
80 super.didReceiveMemoryWarning()
81 // Dispose of any resources that can be recreated.
82 }
83 }4.蓝色的散点图表
1 import UIKit
2 //首先在当前的类文件中，引入已经安装的第三方类库
3 import ScrollableGraphView
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 //蓝色的散点图表
12 dotChart()
13 }
14
15 //添加一个新方法，创建一个散点图表
16 func dotChart()
17 {
18 //初始化一个矩形区域对象
19 let frame = CGRect(x: 0, y: 40, width: 320, height: 280)
20 //创建一个指定显示区域的可滚动视图
21 let graphView = ScrollableGraphView(frame:frame)
22 //设置图形视图的背景填充颜色
23 graphView.backgroundFillColor = UIColor(red: 0.0, green: 191.0/255, blue: 1.0, alpha: 1.0)
24 //设置图形视图的线条颜色
25 graphView.lineColor = UIColor.clear
26
27 //设置图形视图的数据点的尺寸
28 graphView.dataPointSize = 5
29 //设置图形视图的数据点之间的距离
30 graphView.dataPointSpacing = 80
31 //设置数据点的标签字体
32 graphView.dataPointLabelFont = UIFont.boldSystemFont(ofSize: 10)
33 //设置数据点的标签颜色
34 graphView.dataPointLabelColor = UIColor.white
35 //设置数据点的填充颜色
36 graphView.dataPointFillColor = UIColor.white
37
38 //设置图形视图参考线的标签字体
39 graphView.referenceLineLabelFont = UIFont.boldSystemFont(ofSize: 10)
40 //设置图形视图参考线的线条颜色
41 graphView.referenceLineColor = UIColor.white.withAlphaComponent(0.5)
42 //设置图形视图参考线的标签文字的颜色
43 graphView.referenceLineLabelColor = UIColor.white
44 //设置在图形视图中，参考线位于左右两次
45 //参考线的位置共有【左、右、两侧】这三种格式
46 graphView.referenceLinePosition = ScrollableGraphViewReferenceLinePosition.both
47
48 //设置中间参考线的数量为9，默认的值为3
49 graphView.numberOfIntermediateReferenceLines = 9
50 //设置垂直轴向显示范围的最大值为100，
51 //超出范围之外的数据将显示在图形之外
52 graphView.rangeMax = 100
53
54 //初始化一个数组，作为图表的数据
55 let data: [Double] = [4, 48, 15, 16, 73, 42]
56 //初始化一个数组，作为水平轴向的标题
57 let labels = ["one", "two", "three", "four", "five", "six"]
58
59 //设置图形视图的数据源和标题信息
60 graphView.set(data: data, withLabels: labels)
61 //设置根视图的背景颜色
62 self.view.backgroundColor = UIColor(red: 0.0, green: 191.0/255, blue: 1.0, alpha: 1.0)
63 //并将图形视图添加到根视图
64 self.view.addSubview(graphView)
65 }
66
67 override func didReceiveMemoryWarning() {
68 super.didReceiveMemoryWarning()
69 // Dispose of any resources that can be recreated.
70 }
71 }