zoukankan      html  css  js  c++  java
  • [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 }
  • 相关阅读:
    HDU1029 Ignatius and the Princess IV
    UVA11039 Building designing【排序】
    UVA11039 Building designing【排序】
    POJ3278 HDU2717 Catch That Cow
    POJ3278 HDU2717 Catch That Cow
    POJ1338 Ugly Numbers(解法二)
    POJ1338 Ugly Numbers(解法二)
    UVA532 Dungeon Master
    UVA532 Dungeon Master
    POJ1915 Knight Moves
  • 原文地址:https://www.cnblogs.com/strengthen/p/10211229.html
Copyright © 2011-2022 走看看