zoukankan      html  css  js  c++  java
  • [Swift通天遁地]三、手势与图表-(12)创建复合图表:包含线性图表和柱形图表

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
    ➤微信公众号:山青咏芝(shanqingyongzhi)
    ➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/
    ➤GitHub地址:https://github.com/strengthen/LeetCode
    ➤原文地址:https://www.cnblogs.com/strengthen/p/10211518.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] = [76, 25, 20, 13, 52, 57]
    13         
    14         //创建一个图表数据记录
    15         var entries1: [ChartDataEntry] = Array()
    16 
    17         //通过一个循环
    18         for (i, value) in values1.enumerated()
    19         {
    20             //将数组中的数字,添加到图表数据记录中。
    21             entries1.append(BarChartDataEntry(x: Double(i), y: value))
    22         }
    23         
    24         //创建柱形图表数据集,并设置数据集的值域和标签文字
    25         let dataSet = BarChartDataSet(values: entries1, label: "Revenue")
    26         //设置数据集的填充颜色属性
    27         dataSet.setColor(NSUIColor(red: 229/255, green: 140/255, blue: 154/255, alpha: 1))
    28         
    29 
    30         //依次创建一个包含6个数字的数组,作为折线图表的数据源
    31         let valuesLine: [Double] = [8, 104, 81, 93, 52, 44 ]
    32         
    33          //创建一个图表数据记录
    34         var entriesLine: [ChartDataEntry] = Array()
    35 
    36         //通过一个循环
    37         for (i, value) in valuesLine.enumerated()
    38         {
    39              //将数组中的数字,添加到图表数据记录中。
    40             entriesLine.append(ChartDataEntry(x: Double(i), y: value))
    41         }
    42         
    43         //创建折线图表数据集,并设置数据集的值域和标签文字
    44         let dataSetLine = LineChartDataSet(values: entriesLine, label: "Cost")
    45         //设置该数据集的填充颜色属性
    46         dataSetLine.setColor(NSUIColor(red: 243/255, green: 209/255, blue: 142/255, alpha: 1))
    47         //设置在折线图表中,不在端点绘制折线图标
    48         dataSetLine.drawCirclesEnabled = false
    49         //设置折线的宽度为3.0
    50         dataSetLine.lineWidth = 3.0
    51         
    52         //创建一个复合图表数据
    53         let data = CombinedChartData()
    54         //设置复合图表数据的折线图数据的内容
    55         data.lineData = LineChartData(dataSet: dataSetLine)
    56         //设置复合图表数据的柱形图数据的内容
    57         data.barData = BarChartData(dataSet: dataSet)
    58         
    59         //创建一个指定显示区域的复合图表视图
    60         let cv = CombinedChartView(frame: CGRect(x: 0, y: 40,  560, height: 240))
    61         //设置复合图表所显示的数据内容
    62         cv.data = data
    63         //设置复合图表绘制的顺序,先绘制柱形图表,再绘制折线图表
    64         cv.drawOrder = [DrawOrder.bar.rawValue, DrawOrder.line.rawValue]
    65         //设置复合图表不绘制柱形的阴影
    66         cv.drawBarShadowEnabled = false
    67         //设置复合图表不在柱形的上方绘制数值标签
    68         cv.drawValueAboveBarEnabled = false
    69         
    70         //将配置好的复合图表,添加到根视图中
    71         self.view.addSubview(cv)
    72     }
    73 
    74     override func didReceiveMemoryWarning() {
    75         super.didReceiveMemoryWarning()
    76         // Dispose of any resources that can be recreated.
    77     }
    78 }
  • 相关阅读:
    一步一步教你elasticsearch在windows下的安装
    Query DSL for elasticsearch Query
    [转] webpack之前端性能优化(史上最全,不断更新中。。。)
    [转] Javascript模块化编程(一):模块的写法
    [转] 2016 JavaScript 发展现状大调查
    [转] 前端性能的几个基础指标
    [转] 视频直播前端方案
    [转] Web前端开发工程师常用技术网站整理
    [转] getBoundingClientRect判断元素是否可见
    [转] js前端解决跨域问题的8种方案(最新最全)
  • 原文地址:https://www.cnblogs.com/strengthen/p/10211518.html
Copyright © 2011-2022 走看看