[Swift通天遁地]三、手势与图表-(13)制作美观简介的滚动图表：折线图表、面积图表、柱形图表、散点图表
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号：山青咏芝（shanqingyongzhi）
➤博客园地址：山青咏芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：https://www.cnblogs.com/strengthen/p/10212320.html
➤如果链接不是山青咏芝的博客园地址，则可能是爬取作者的文章。
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
本文将演示使用另一个图表类库，制作美观简介的滚动图表。
首先确保在项目中已经安装了所需的第三方库。
点击【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 }
