iOS-charts 绘制漂亮 图标 大饼

呈现大量数据时，比起表格中一行行枯燥的数据，使用图表来形象地表示数据能够帮助用户更好地理解。在图表中，不须要通读全部数据资料，便能很容易地了解数据模式，从而获取关键信息。图表的使用在商业 App 和健身 App 中很是常见。

本篇文章中，咱们主要介绍由 Daniel Cohen Gindi 开发的 ios-charts library。ios-charts 是由 Philipp Jahoda 创建的，是很是流行的 Android 库 MPAndroidChart 的 iOS 端口。有了这个库，你能够方便快捷地在应用中添加不一样类型的图表。仅需寥寥几行代码，就能够制做出功能齐备、交互性强的图表，而且高度可定制。

函数库的主要特征：

• 8种不一样的图表类型；

• 两个轴的缩放（用触控手势、分轴缩放或捏拉缩放）；

• 拖拽/平移（用触控手势）；

• 图表结合（线形图、柱形图、离散图、K 线图、气泡图）；

• 双（分开的）Y 轴；

• 手指画图（用触控手势将数值画入图表）；

• 数值突出显示（自定义弹出视图）；

• 多个/分离的轴；

• 储存图表到相册/以 PNG/JPEG 格式输出；

• 预约义颜色模板；

• 图例（可自动生成，可自定义）；

• 自定义轴（包括 X 和Y 轴）；

• 动画（在 X 轴和 Y 轴上创建动画）；

• 界限（提供额外信息，好比最大值等）；

• 全方位自定义（上色、字体、图例、颜色、背景、手势、虚线等）。

开始吧！

首先、下载本篇文章将会用到的初始示例——名为 iOSChartsDemo 的简易应用。应用运行时，你会看到有两个项目的表格：条形图和其余图表。当点击项目时，会获得空白的视图。在本例中，笔者已建立了要用的两个视图控制器：BarChartViewController 和 ChartsViewController。

接着，咱们添加函数库到项目中。你能够用 CocoaPods 安装该库，这里咱们直接手动安装。

下载 ios-charts 项目，这个 zip 文件包含了函数库（名为 Charts 的文件夹）和一个示例项目（名为 ChartsDemo）。若是你想了解更多关于函数库的知识，示例项目是很棒的资源。

解压缩已下载的文件，并将 Charts 文件复制粘贴到你项目（iOSChartsDemo）的根目录下。在 Finder 中打开Charts文件，并将 Charts.xcodeproj 拖拽到 Xcode 项目中。结构以下图所示。

接着从项目导航中选择你的项目，并确保该 iOSChartsDemo 目标被选中。在右边的常规选项卡中找到 Embedded Binaries 部分，点击该部分的+号添加图表框架。从列表中选择 Charts.framework 并点击 Add。

若是你想在 Objective-C 中使用函数库，请参考使用说明。

用 Command-B 或选择 Product > Build 来生成项目。若是不这样作，当你导入 Charts 框架到你的项目时，Xcode 会报错——没法加载 Charts 底层模块。

如今开始建立第一个图表。

建立一个柱形图

打开 BarChartViewController.swift 文件，添加如下声明。

import Charts

打开故事板文件。咱们须要添加用来显示图表的视图。从文档纲要中选择 Bar Chart View Controller，并在属性检查器中取消 Extend Edges 的 Under Top Barsin 选项。咱们不但愿图表自动延伸至导航栏下方。

接着拖拽一个视图到 Bar Chart View Controller 中，并按下图定位边界。该视图为控制器中主视图的子视图。

视图被选中后，在识别检查器中将它的类设为 BarChartView。再使用助理编辑器，加入视图的 outlet 到 BarChartViewController 类，并命名为 outletbarChartView。在 BarChartViewController 类中添加下列代码。

@IBOutlet weak var barChartView: BarChartView!

运行项目，并从表格中选择柱形图，你可能会获得视图提示信息：无可用的图表数据。

若是在没有数据来产生图表时，你想在空白状态显示其余的信息，这时候能够自定义这个提示信息。在 viewDidLoad()函数底部，加入下列代码。

运行该项目，能够看到自定义的提示信息。

你能够为下面信息进一步添加描述。这能够用来向用户解释，为何图表是空的，他们须要获取数据来生成图表。例如：健身 App 应该让用户知道在整理图表分析以前，他们须要先记录跑步数据。

barChartView.noDataTextDescription = "GIVE REASON"

添加下面的属性到该类。咱们用它来存储一些图表的模拟数据。

var months: [String]!

将下面的函数添加到该类，用以创建图表。

func setChart(dataPoints: [String], values: [Double]) {
    barChartView.noDataText = "You need to provide data for the chart."
        }

请注意，我曾经在 viewDidLoad()函数中添加了声明。如今从 viewDidLoad()中移除该声明。咱们将用 setChart()来自定义图表。

在 viewDidLoad()中，添加如下内容到函数底部。

months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]let unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0, 16.0, 4.0, 18.0, 2.0, 4.0, 5.0, 4.0]        
setChart(months, values: unitsSold)

咱们设置一些模拟数据，给出一些产品一年中每月售出的单位数。而后，咱们将数据传给 setChart()。

让一个图表显示数据，咱们还需建立一个 BarChartData 对象，并将其设置为 barChartView 的数据属性。添加下面的代码到 setChart()函数底部。

var dataEntries: [BarChartDataEntry] = []        
for i in 0..<dataPoints.count {    let dataEntry = BarChartDataEntry(value: values[i], xIndex: i)
    dataEntries.append(dataEntry)
}        
let chartDataSet = BarChartDataSet(yVals: dataEntries, label: "Units Sold")let chartData = BarChartData(xVals: months, dataSet: chartDataSet)
barChartView.data = chartData

以上代码中，咱们建立了一个 BarChartDataEntry 对象的数组。BarChartDataEntry 初始化须要每一个数据项的值、其对应的项目索引以及一个任意的标签。

随后，咱们使用这个对象建立 BarChartDataSet，主要用来传递 BarChartDataEntry 对象的数组，以及描述数据的标签。

最后，咱们用它来建立一个 BarChartData 对象，用来设定咱们图表视图的数据。

运行该应用，能够看到以下图所示有数据的柱形图。

你能够为出如今视图右下方的图表设置说明。默认状况下，文本可用来设置「说明」，该说明会出如今图片上。参考 ofMPAndroidChart 文档，你能够更改描述的位置，但看一下 iOS 的 API，这并无包括在内。函数库仍在维护，因此可能会在以后添加。若是你想改变描述的位置，你能够修改 ChartViewBase 类（是 BarChartView 类的子类）中的 drawDescription（上下文）函数。

针对本应用，咱们移除描述文本。在 setChart()函数的底部添加下列内容，将描述文本设为空字符串。

barChartView.descriptionText = ""

自定义图表

你能够修改一些属性来自定义图表视图的外观。下面咱们来具体介绍，你也能够浏览文档看看哪些能够自定义。

首先，咱们修改柱形图的默认颜色。添加下列设置到 setChart()函数的底部。

chartDataSet.colors = [UIColor(red: 230/255, green: 126/255, blue: 34/255, alpha: 1)]

以上代码设置了与数据相关的颜色。将该设定给 UIColor 对象数组。所以只要数组中有一种颜色，全部的实体都可用。

若是你想给每个数据对象设置不一样的颜色，那么你须要提供更多的颜色，本例中须要12种。若是你的颜色数量少于实体总数，那么从坐到右将不一样的颜色分配给柱形图，直到颜色用完后从新开始分配。

API 中也自带一些预约义颜色模板，你能够用它来为数据项设定不一样颜色，它们包括：

• ChartColorTemplates.liberty()

• ChartColorTemplates.joyful()

• ChartColorTemplates.pastel()

• ChartColorTemplates.colorful()

• ChartColorTemplates.vordiplom()

以下所示，使用 ChartColorTemplates.colorful()模板。

chartDataSet.colors = ChartColorTemplates.colorful()

以下所示修改 X 轴标签的位置。

barChartView.xAxis.labelPosition = .Bottom

如今标签在图表底部。

按照如下办法能够修改图表的背景色。

barChartView.backgroundColor = UIColor(red: 189/255, green: 195/255, blue: 199/255, alpha: 1)

根据上述设定，你会看到以下所示的界面。

动画

你能够为图表设定一些动画，使之更加生动活泼。你可使用三种主要的动画类型方法，能够同时让 XY 轴或者分别某个轴产生动画。

• animate(xAxisDuration: NSTimeInterval, yAxisDuration: NSTimeInterval)

• animate(xAxisDuration: NSTimeInterval)

• animate(yAxisDuration: NSTimeInterval)

你能够加入任意的 ChartEasingOption 到以上函数。选项以下：

• Linear

• EaseInQuad

• EaseOutQuad

• EaseInOutQuad

• EaseInCubic

• EaseOutCubic

• EaseInOutCubic

• EaseInQuart

• EaseOutQuart

• EaseInOutQuart

• EaseInQuint

• EaseOutQuint

• EaseInOutQuint

• EaseInSine

• EaseOutSine

• EaseInOutSine

• EaseInExpo

• EaseOutExpo

• EaseInOutExpo

• EaseInCirc

• EaseOutCirc

• EaseInOutCirc

• EaseInElastic

• EaseOutElastic

• EaseInOutElastic

• EaseInBack

• EaseOutBack

• EaseInOutBack

• EaseInBounce

• EaseOutBounce

• EaseInOutBounce

添加下行内容到 setChart()函数。

运行应用，柱形图以动画的形式加入视图。咱们同时为两个轴都设置2秒的动画。

修改上述状态为：

barChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0, easingOption: .EaseInBounce)

你会看到这行的特效以下。

界限

界限是针对全部线形图、柱形图和离散图的附加功能。它容许在图表中显示额外的线条为特定轴（X 或 Y 轴）加限制。这额外的线用来设定数据的目标值，帮助用户更容易了解是否达到界限。

要在图表中加入界限，能够添加如下代码到 setData()函数中。

let ll = ChartLimitLine(limit: 10.0, label: "Target")
barChartView.rightAxis.addLimitLine(ll)

运行该应用，你能够看到一条红线，标记在单位10左右。上面的代码中，咱们在界限上添加了一个标签。可是 ChartLimitLine 有另外一个没有添加标签的初始化函数，若是不想加的话能够省略。

触控事件

若是运行应用，你会发现经过默认的捏拉缩放和双击来进行缩放。此外，若是某个柱形条被单击，该柱形条会突出显示。很棒的是无需本身再编代码就能使用该功能，除非你想添加更多的功能，好比当用户单击柱形条时有其余响应。

为了检测图表内的选择，咱们将使用 ChartViewDelegate 协议。

修改该类的声明以下。

class BarChartViewController: UIViewController, ChartViewDelegate {

在调用 super.viewDidLoad()后面添加下列代码到 viewDidLoad()。

barChartView.delegate = self

添加下面的函数到该类。

func chartValueSelected(chartView: ChartViewBase, entry: ChartDataEntry, dataSetIndex: Int, highlight: ChartHighlight) {
    println("\(entry.value) in \(months[entry.xIndex])")
}

当图表视图中的值被选中时，会调用上述函数。这里咱们打印出被选中的月份和值。

保存图表

你能够将图表的当前状态保存为图像。能够选择将它保存到相机胶卷或者从新设置一个保存路径。

首先，咱们将添加一个保存按钮到图表视图。打开故事板文件，并找到柱形图表视图控制器。拖动导航项目到视图控制器的导航栏，而后拖动柱形按钮项，并将其放置于导航项目的右上角。删除属性检查器中的导航项目的标题属性中的「标题」文本。选择柱形按钮项，并设置其标识便于保存到属性检查器。能够看到以下界面。

接着为按钮建立一个消息响应，命名为 saveChart，添加如下代码到 BarChartViewController 类中。

@IBAction func saveChart(sender: UIBarButtonItem) {
        
}

按照下列代码修改上面的方法。

@IBAction func saveChart(sender: UIBarButtonItem) {    barChartView.saveToCameraRoll()
}

执行该程序后，当点击保存按钮时，图表图像讲保存到相册，可用 Photos 应用浏览。

下列代码能够从新设置保存路径。

barChartView.saveToPath(path: String, format: ChartViewBase.ImageFormat, compressionQuality: Double)

图片格式多是 .JPEG或 .PNG，该 compressionQuality 是一种无损格式（JPEG）的压缩质量。

更多图表

如今咱们看一下其余几个图表。大部分咱们都看过了，因此再也不过多赘述。

首先，在故事板文件中找到图表视图控制器，在识别检查器中，设定视图的标签为 Pie Chart View 的类为 PieChartView。

以下所示修改 ChartsViewController 类。

import UIKit
import Charts 
class ChartsViewController: UIViewController {
    
    @IBOutlet weak var lineChartView: LineChartView!
    @IBOutlet weak var pieChartView: PieChartView! 
    override func viewDidLoad() {
        super.viewDidLoad() 
        // Do any additional setup after loading the view.
        
        let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]        let unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0, 16.0]
        
        setChart(months, values: unitsSold)
        
    }    
    func setChart(dataPoints: [String], values: [Double]) {        
        var dataEntries: [ChartDataEntry] = []        
        for i in 0..<dataPoints.count {            let dataEntry = ChartDataEntry(value: values[i], xIndex: i)
            dataEntries.append(dataEntry)
        }        
        let pieChartDataSet = PieChartDataSet(yVals: dataEntries, label: "Units Sold")        let pieChartData = PieChartData(xVals: dataPoints, dataSet: pieChartDataSet)
        pieChartView.data = pieChartData        
        var colors: [UIColor] = []        
        for i in 0..<dataPoints.count {            let red = Double(arc4random_uniform(256))            let green = Double(arc4random_uniform(256))            let blue = Double(arc4random_uniform(256))            
            let color = UIColor(red: CGFloat(red/255), green: CGFloat(green/255), blue: CGFloat(blue/255), alpha: 1)
            colors.append(color)
        }
        
        pieChartDataSet.colors = colors        
        
        let lineChartDataSet = LineChartDataSet(yVals: dataEntries, label: "Units Sold")        let lineChartData = LineChartData(xVals: dataPoints, dataSet: lineChartDataSet)
        lineChartView.data = lineChartData
        
    }
 
}

以上代码中，咱们将 Charts 框架导入类中，像以前建立柱形图那样，建立一个饼状图和一个线形图。但须要注意的是，在柱形图表例中咱们使用的是 BarChartDataEntry，而如今使用父类 ChartDataEntry 建立数据项。

运行应用，选择表格视图中的其余图表，能够看见一个线形图和有颜色的饼状图。你的应用可能跟下图不彻底相同，由于饼状图的颜色是随机的。

结束语

本篇文章大体介绍了使用 ios-charts 库建立的一些图表类型，大概涉及了自定义图表的一些内容。若是你想知道这个库的其余功能，你能够参考这个下载库自带的 ChartsDemo 项目的代码，也能够看看该项目的维基百科。这个连接到 Wiki 页面会引导至 MPAndroidChart 项目文档。做者在写这篇文章时，尚未库的 iOS 版本的文档说明，但其实 API 跟 Android 版本约95％都相同，当你百思不得其解时，Android 文档仍然能够派上用场。

你能够在这里下载完整项目。

下面列出可建立的图表类型。

线形图（图例、简单的设计）

线形图（图例、简单的设计）

线图（立方线）

线图（单数据组）

复合图（柱形图和线图）

柱形图（图例、简单设计）

柱形图（分组数据集）

水平柱形图

饼状图（有选取）

散点图（以方形、三角形、圆形等图例）

K线图（针对财经数据）

气泡图（由气泡区域覆盖来表示值）

雷达图（蛛网图）