背景

随着进入大数据时代，数据越来越多，可视化能将数据以更加直观的方式展现出来，使数据更加客观、更具说服力，从而助用户理解和分析数据。所以今天我们来看看如何使用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

背景