布景

随着进入大数据时代，数据越来越多，可视化能将数据以愈加直观的方法展现出来，使数据愈加客观、更具说服力，从而助用户了解和剖析数据。所以今天咱们来看看怎么运用10行 Swift 代码来画一个折线图的可视化图表。

技术选型

其实 iOS 端的可视化图表库不多，比较有名的是Charts，但今天我选型了F2Native，首要是因为其图表类型丰厚，支持了7大类型的图表，跨iOS，Android渠道，最终是其完成了图形语法理论，能组合出千变万化的图表，能快速应付事务改变。

开发完成

代码都托管在 GitHub上，如果不想看教程，可直接下载。 咱们运用 CocoaPods 来引进这个库，如果你机器上还没装置，那你首要需求装置它。

sudo gem install cocoapods

1.创立工程

咱们运用 Xcode 创立一个 LineChart-Swift 的工程，File -> new -> Project, 挑选 iOS Tab 下面的 App，点击 Next

接下来在 Interface 中挑选 StoryBoard ， Language 中挑选 Swift，并点击 Next 完成工程创立

2.CocoaPod 设置

接下来要运用 CocoaPod 来引进 F2Native 库，首要运用命令行进入到方才项目的目录中

cd /Users/weiqing.twq/Documents/LineChart-Swift

创立 Podfile

pod init

用一个编辑器翻开目中的 Podfile 并引进 F2(这儿要注意下是叫F2)

装置

pod install

装置完成后，在目录下会有一个 LineChart-Swift.xcworkspace 文件，双击翻开（记住关闭创立时分主动翻开的xCode窗口）。

3.预备数据

由于引擎数据的入参格式是一个NSArray的数组，我预备了如下的数据, 并保存为data.json文件。

[{  "genre": "Sports",  "sold": 275}, {  "genre": "Strategy",  "sold": 115}, {  "genre": "Action",  "sold": 120}, {  "genre": "Shooter",  "sold": 350}, {  "genre": "Other",  "sold": 150}]

把data.json并拖入到工程中， 以备后续运用

4.编写代码

在 ViewController.swift 中引进 F2

import F2

在viewDidLoad中制作图表，详细的制作过程现已注释在代码中

override func viewDidLoad() {
    super.viewDidLoad()  
    //step1 初始化一个view来承载图表的显现
    self.canvasView = F2CanvasView.canvas(CGRect(x:0, y: 100, width: self.view.frame.width, height: 200))
    self.view.addSubview(self.canvasView!)
    //step2 创立一个chart目标预备制作图表
    self.chart = F2Chart.init(self.canvasView!.bounds.size, name: "LineChart-Swift")
    //step3 把chart和canvasView相关起来，因为chart烘托好后需求显现在view上面
    self.chart!.canvas()(self.canvasView!)
        //设置chart的内边距 可选
    self.chart!.padding()(20, 20, 20, 20)
    //step 4从咱们方才预备的数据中读取数据
    let jsonPath = Bundle.main.path(forResource: "data", ofType: "json")
    guard let jsonString = try? String.init(contentsOfFile: jsonPath!) else {
      return
    }
    let jsonData = F2Utils.toJsonArray(jsonString)
        //并把设置到chart中
    self.chart!.source()(jsonData)
 
    //step5 在chart上画一条线，x轴数据的映射是genre字段，y轴数据的映射是sold字段
    self.chart!.line()().position()("genre*sold")
    //step6 烘托并显现在view上
    self.chart!.render()();
  }

如果你看到这边，那么恭喜，以上就是制作折线图需求的一切代码，一共13行代码，咱们现已完成折线图的制作，作用如下

方才也提到了，F2Native 完成了图形语法，能经过组合的方法快速应付事务迭代的快速，假设突然需求变了，要画柱图了，那咱们只需改变 step5 中的那行代码中的 line 为 interval 即可

self.chart!.interval()().position()("genre*sold")

柱图就出来了，是不是很便利

写在最终

当然这还是最基本的图表显现，真实事务中应该还会有一些更杂乱的规划，比方y轴上要附加单位，比方元，其次柱的色彩要有区别，最终是手势按上去最好会有一些 Tip 说明。这些我会在后面的文章在详细介绍，感谢我们的阅读，代码已提交到 GitHub 了，欢迎我们下载。

第二篇关于更杂乱规划的文章也现已写好，欢迎查看 10行代码制作线柱图-进阶 | iOS Swift。