• [Swift通天遁地]三、手势与图表-(9)制作五彩缤纷的气泡图表


    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
    ➤微信公众号:山青咏芝(shanqingyongzhi)
    ➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/
    ➤GitHub地址:https://github.com/strengthen/LeetCode
    ➤原文地址:https://www.cnblogs.com/strengthen/p/10211229.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, 61, 81, 93, 52, 44 ]
    13         //创建一个包含6个数字的数组,作为气泡图表的数据源
    14         let values2: [Double] = [76, 25, 20, 13, 52, 57]
    15         //创建一个包含6个数字的数组,作为气泡图表的数据源
    16         let values3: [Double] = [55, 75, 28, 23, 45, 91]
    17         //创建一个包含6个数字的数组,作为气泡的尺寸
    18         let sizes: [CGFloat] = [1, 2, 3, 4, 5, 6]
    19         
    20         //依次创建三个图表数据记录
    21         var entries1: [ChartDataEntry] = Array()
    22         var entries2: [ChartDataEntry] = Array()
    23         var entries3: [ChartDataEntry] = Array()
    24         
    25         //通过一个循环
    26         for (i, value) in values1.enumerated()
    27         {
    28             //将第一个数组中的数字,添加到图表数据记录中。
    29             //并依次设置两轴标题和气泡大小
    30             entries1.append(BubbleChartDataEntry(x: Double(i), y: value, size: sizes[i]))
    31         }
    32         
    33         //通过一个循环
    34         for (i, value) in values2.enumerated()
    35         {
    36             //将第二个数组中的数字,添加到图表数据记录中。
    37             //并依次设置两轴标题和气泡大小
    38             entries2.append(BubbleChartDataEntry(x: Double(i), y: value, size: sizes[i]))
    39         }
    40         
    41         //通过一个循环
    42         for (i, value) in values3.enumerated()
    43         {
    44             //将三个数组中的数字,添加到图表数据记录中。
    45             //并依次设置两轴标题和气泡大小
    46             let de = BubbleChartDataEntry(x: Double(i), y: value, size: sizes[5-i])
    47             entries3.append(de)
    48         }
    49         
    50         //创建第一个数据集,并设置数据集的值域和标签文字
    51         let dataSet = BubbleChartDataSet(values: entries1, label: "Company A")
    52         //同时设置该数据集对应的填充颜色
    53         dataSet.setColor(NSUIColor(red: 229/255, green: 140/255, blue: 154/255, alpha: 1))
    54         
    55         //创建第二个数据集,并设置数据集的值域和标签文字
    56         let dataSet2 = BubbleChartDataSet(values: entries2, label: "Company B")
    57         //同时设置该数据集对应的填充颜色
    58         dataSet2.setColor(NSUIColor(red: 243/255, green: 209/255, blue: 142/255, alpha: 1))
    59         
    60         //创建第三个数据集,并设置数据集的值域和标签文字
    61         let dataSet3 = BubbleChartDataSet(values: entries3, label: "Company C")
    62         //同时设置该数据集对应的填充颜色
    63         dataSet3.setColor(NSUIColor(red: 172/255, green: 234/255, blue: 254/255, alpha: 1))
    64         
    65         //创建一个指定显示区域的气泡图表视图
    66         let chart = BubbleChartView(frame: CGRect(x: 0, y: 10,  560, height: 280))
    67         //设置图表视图的背景颜色为无色
    68         chart.backgroundColor = NSUIColor.clear
    69         //设置气泡图表所显示的数据内容
    70         chart.data = BubbleChartData(dataSets: [dataSet,dataSet2,dataSet3])
    71         //设置图表中的数值的最大可视数量为200
    72         chart.maxVisibleCount = 200
    73         //设置水平坐标轴的标签位置
    74         //共有:顶部、底部、双侧、顶部内侧、底部内侧五种。
    75         chart.xAxis.labelPosition = .bottom
    76         //设置图表的描述信息
    77         chart.chartDescription?.text = "strengthen"
    78         //设置图例的文字颜色为红色
    79         chart.legend.textColor = NSUIColor.red
    80         //设置图例的文字的字体大小为16
    81         chart.legend.formSize = 16
    82         //设置图例在图表中的位置处于右上角
    83         chart.legend.position = .aboveChartRight
    84         
    85         //将配置好的图表添加到根视图中。
    86         self.view.addSubview(chart)
    87     }
    88 
    89     override func didReceiveMemoryWarning() {
    90         super.didReceiveMemoryWarning()
    91         // Dispose of any resources that can be recreated.
    92     }
    93 }
  • 相关阅读:
    第十六周 项目一-平方根中的异常
    LeetCode之小孩分糖果
    C#中怎样将List<自己定义>转为Json格式 及相关函数-DataContractJsonSerializer
    (016)给定一个有序数组(递增),敲代码构建一棵具有最小高度的二叉树(keep it up)
    物化视图
    FZU2171:防守阵地 II(线段树)
    鸡尾酒排序
    Android BlueDroid(三):BlueDroid蓝牙开启过程enable
    CF Codeforces Round #256 (Div. 2) D (448D) Multiplication Table
    window.open()具体解释及浏览器兼容性问题
  • 原文地址:https://www.cnblogs.com/strengthen/p/10211229.html
Copyright © 2020-2023  润新知