[Swift通天遁地]三、手势与图表-(13)制作美观简介的滚动图表：折线图表、面积图表、柱形图表、散点图表

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号：山青咏芝（shanqingyongzhi）
➤博客园地址：山青咏芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：https://www.cnblogs.com/strengthen/p/10212320.html 
➤如果链接不是山青咏芝的博客园地址，则可能是爬取作者的文章。
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

目录：[Swift]通天遁地Swift

本文将演示使用另一个图表类库，制作美观简介的滚动图表。

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

点击【Podfile】,查看安装配置文件。

platform :ios, '12.0'
use_frameworks!

target 'DemoApp' do
    source 'https://github.com/CocoaPods/Specs.git'
    pod 'ScrollableGraphView'
end

根据配置文件中的相关配置，安装第三方库。

然后点击打开【DemoApp.xcworkspace】项目文件。

为了更好的显示柱形图标需要调整模拟器的朝向。

【DemoApp】->【General】

->【Device Orientation】取消勾选【Portrait】肖像选项，使模拟器保持横向显示。

在项目导航区，打开视图控制器的代码文件【ViewController.swift】

1.简单的折线图表

import UIKit
//首先在当前的类文件中，引入已经安装的第三方类库
import ScrollableGraphView

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        //简单的折线图表
        buildSimpleChart()
    }
    
    //添加一个方法，用来完成图表的创建
    func buildSimpleChart()
    {
        //初始化一个矩形区域对象
        let frame = CGRect(x: 0, y: 40,  320, height: 180)
        //创建一个指定显示区域的可滚动视图
        let graphView = ScrollableGraphView(frame: frame)
        
        //创建一个数组，作为图表的数据源
        let data: [Double] = [4, 48, 15, 16, 73, 42]
        //创建另一个数组，作为图表的水平轴方向的标签
        let labels = ["one", "two", "three", "four", "five", "six"]
        
        //设置可滚动图形视图的数据源和标题
        graphView.set(data: data,//数据源
                      withLabels: labels)//标题

        //将可滚动图形视图添加到根视图              
        self.view.addSubview(graphView)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

2.平滑曲线的面积图表

import UIKit
//首先在当前的类文件中，引入已经安装的第三方类库
import ScrollableGraphView

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        //平滑曲线的面积图表
        buildSmoothDarkChart()
    }
    
    //创建一个方法，用来创建一个暗调、平滑、可滚动的面积图
    func buildSmoothDarkChart()
    {
        //初始化一个矩形区域对象
        let frame = CGRect(x: 0, y: 40,  320, height: 280)
        //创建一个指定显示区域的可滚动图形视图
        let graphView = ScrollableGraphView(frame: frame)
        
        //设置图形视图的背景填充颜色
        graphView.backgroundFillColor = UIColor(red: 51.0/255, green: 51.0/255, blue: 51.0/255, alpha: 1.0)
        
        //设置图形视图的最大值为100，超过此值的数据将显示再图形之外
        graphView.rangeMax = 100
        
        //设置线条的宽度为1
        graphView.lineWidth = 1
        //设置线条的颜色
        graphView.lineColor = UIColor(red: 119.0/255, green: 119.0/255, blue: 119.0/255, alpha: 1.0)
        //设置线段的外观为平滑样式，这样绘制的曲线为贝塞尔曲线
        graphView.lineStyle = ScrollableGraphViewLineStyle.smooth
        
        //设置图形支持填充模式，以绘制面积图
        graphView.shouldFill = true
        //设置面积图的填充模式为渐变填充
        graphView.fillType = ScrollableGraphViewFillType.gradient
        //设置面积图的填充的颜色
        graphView.fillColor = UIColor(red: 85.0/255, green: 85.0/255, blue: 85.0/255, alpha: 1.0)
        //设置渐变填充的类型为线形渐变，除此之外还有径向渐变样式
        graphView.fillGradientType = ScrollableGraphViewGradientType.linear
        //设置渐变填充的起始颜色
        graphView.fillGradientStartColor = UIColor(red: 85.0/255, green: 85.0/255, blue: 85.0/255, alpha: 1.0)
        //设置渐变填充的结束颜色
        graphView.fillGradientEndColor = UIColor(red: 68.0/255, green: 68.0/255, blue: 68.0/255, alpha: 1.0)
        
        //设置数据点之间的间距为80
        graphView.dataPointSpacing = 80
        //设置数据点的大小为2
        graphView.dataPointSize = 2
        //设置图形视图的数据点的颜色为白色
        graphView.dataPointFillColor = UIColor.white
        
        //设置参考线上的标签字体，为加粗的8号字体
        graphView.referenceLineLabelFont = UIFont.boldSystemFont(ofSize: 8)
        //设置参考线的颜色为白色，颜色的透明度为0.2
        graphView.referenceLineColor = UIColor.white.withAlphaComponent(0.2)
        //设置参考线上的标签字体的颜色为白色
        graphView.referenceLineLabelColor = UIColor.white
        //设置数据点的标签字体的颜色为白色，颜色的透明度为0.5
        graphView.dataPointLabelColor = UIColor.white.withAlphaComponent(0.5)
        
        //初始化一个数组，作为图表的数据
        let data: [Double] = [4, 48, 15, 16, 73, 42]
        //初始化一个数组，作为水平轴上的标题
        let labels = ["one", "two", "three", "four", "five", "six"]
        
        //设置图形视图的数据源和数据标签
        graphView.set(data: data, withLabels: labels)
        //设置根视图的背景颜色
        self.view.backgroundColor = UIColor(red: 51.0/255, green: 51.0/255, blue: 51.0/255, alpha: 1.0)
        //将图形视图添加到根视图
        self.view.addSubview(graphView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

3.暗调主题的柱形图表

import UIKit
//首先在当前的类文件中，引入已经安装的第三方类库
import ScrollableGraphView

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        //暗调主题的柱形图表
        barDarkChart()
    }
    
    //添加一个方法，创建一个暗调的柱形图表
    func barDarkChart()
    {
        //初始化一个矩形区域对象
        let frame = CGRect(x: 0, y: 40,  320, height: 280)
        //创建一个指定显示区域的可滚动视图
        let graphView = ScrollableGraphView(frame:frame)
        
        //设置图形视图允许绘制数据点
        graphView.shouldDrawDataPoint = false
        //设置图形视图的线条颜色为无色
        graphView.lineColor = UIColor.clear
        //设置图形视图绘制柱形图层
        graphView.shouldDrawBarLayer = true
        
        //设置柱形的宽度为25
        graphView.barWidth = 25
        //设置柱形线条的宽度为1
        graphView.barLineWidth = 1
        //设置图形线条的颜色
        graphView.barLineColor = UIColor(red: 119.0/255, green: 119.0/255, blue: 119.0/255, alpha: 1.0)
        //设置图形自身的填充颜色
        graphView.barColor = UIColor(red: 85.0/255, green: 85.0/255, blue: 85.0/255, alpha: 1.0)
        //设置图形视图的背景填充颜色
        graphView.backgroundFillColor = UIColor(red: 51.0/255, green: 51.0/255, blue: 51.0/255, alpha: 1.0)
        
        //设置图形视图的参考线的标签字体
        graphView.referenceLineLabelFont = UIFont.boldSystemFont(ofSize: 8)
        //设置图形视图的参考线的线条颜色
        graphView.referenceLineColor = UIColor.white.withAlphaComponent(0.2)
        //设置图形视图的参考线的字体颜色
        graphView.referenceLineLabelColor = UIColor.white
        //设置数据点标签颜色为白色，透明度为0.5
        graphView.dataPointLabelColor = UIColor.white.withAlphaComponent(0.5)
        //设置中间参考线的数量为5，默认值为3
        graphView.numberOfIntermediateReferenceLines = 5
        
        //设置图形视图以动画的方式显示
        graphView.shouldAnimateOnStartup = true
        //设置垂直轴向的数据范围为自适应，以能够全部显示所有的数据
        graphView.shouldAdaptRange = true
        //设置图形视图的动画类型为弹性样式
        graphView.adaptAnimationType = ScrollableGraphViewAnimationType.elastic
        //设置动画的时长为1.5s
        graphView.animationDuration = 1.5
        //设置垂直轴向显示范围的最大值为100，
        //超出范围之外的数据将显示在图形之外
        graphView.rangeMax = 100
        //设置图形视图的显示范围，七最小值始终保持为0
        graphView.shouldRangeAlwaysStartAtZero = true
        
        //设置可滚动图形视图的数据源
        let data: [Double] = [4, 48, 15, 16, 73, 42]
        //设置可滚动图形视图的标题
        let labels = ["one", "two", "three", "four", "five", "six"]
        
        //设置图形视图的数据源和标题
        graphView.set(data: data, withLabels: labels)
        //设置图形视图的背景颜色
        self.view.backgroundColor = UIColor(red: 51.0/255, green: 51.0/255, blue: 51.0/255, alpha: 1.0)
        //最后将图形视图添加到根视图
        self.view.addSubview(graphView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

4.蓝色的散点图表

import UIKit
//首先在当前的类文件中，引入已经安装的第三方类库
import ScrollableGraphView

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        //蓝色的散点图表
        dotChart()
    }
    
    //添加一个新方法，创建一个散点图表
    func dotChart()
    {
        //初始化一个矩形区域对象
        let frame = CGRect(x: 0, y: 40,  320, height: 280)
        //创建一个指定显示区域的可滚动视图
        let graphView = ScrollableGraphView(frame:frame)
        //设置图形视图的背景填充颜色
        graphView.backgroundFillColor = UIColor(red: 0.0, green: 191.0/255, blue: 1.0, alpha: 1.0)
        //设置图形视图的线条颜色
        graphView.lineColor = UIColor.clear
        
        //设置图形视图的数据点的尺寸
        graphView.dataPointSize = 5
        //设置图形视图的数据点之间的距离
        graphView.dataPointSpacing = 80
        //设置数据点的标签字体
        graphView.dataPointLabelFont = UIFont.boldSystemFont(ofSize: 10)
        //设置数据点的标签颜色
        graphView.dataPointLabelColor = UIColor.white
        //设置数据点的填充颜色
        graphView.dataPointFillColor = UIColor.white
        
        //设置图形视图参考线的标签字体
        graphView.referenceLineLabelFont = UIFont.boldSystemFont(ofSize: 10)
        //设置图形视图参考线的线条颜色
        graphView.referenceLineColor = UIColor.white.withAlphaComponent(0.5)
        //设置图形视图参考线的标签文字的颜色
        graphView.referenceLineLabelColor = UIColor.white
        //设置在图形视图中，参考线位于左右两次
        //参考线的位置共有【左、右、两侧】这三种格式
        graphView.referenceLinePosition = ScrollableGraphViewReferenceLinePosition.both
        
        //设置中间参考线的数量为9，默认的值为3
        graphView.numberOfIntermediateReferenceLines = 9
        //设置垂直轴向显示范围的最大值为100，
        //超出范围之外的数据将显示在图形之外
        graphView.rangeMax = 100
        
        //初始化一个数组，作为图表的数据
        let data: [Double] = [4, 48, 15, 16, 73, 42]
        //初始化一个数组，作为水平轴向的标题
        let labels = ["one", "two", "three", "four", "five", "six"]
        
        //设置图形视图的数据源和标题信息
        graphView.set(data: data, withLabels: labels)
        //设置根视图的背景颜色
        self.view.backgroundColor = UIColor(red: 0.0, green: 191.0/255, blue: 1.0, alpha: 1.0)
        //并将图形视图添加到根视图
        self.view.addSubview(graphView)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}