zoukankan      html  css  js  c++  java
  • [Swift通天遁地]三、手势与图表-(6)创建包含三条折线的线性图表

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

    目录:[Swift]通天遁地Swift

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

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

    点击【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,  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 }
  • 相关阅读:
    《当大数据遇见网络:大数据与SDN》
    Internet History, Technology and Security (Week 9)
    Internet History, Technology and Security (Week 8)
    Internet History, Technology and Security (Week 7)
    北京讲座所感---6.14~6.15
    Internet History, Technology and Security (Week 6)
    Internet History, Technology and Security (Week 4)
    Internet History, Technology and Security (Week 3)
    Alpha 事后诸葛亮(团队)
    Alpha答辩总结
  • 原文地址:https://www.cnblogs.com/strengthen/p/10210847.html
Copyright © 2011-2022 走看看