swift app中展示折线图, 饼状图, 柱状图等数据图表

github 下载Charts-master SDK,该SDK有多种可自定义的图表样式

lineChart

正弦余弦线图

LineChart (cubic lines)

LineChart (gradient fill)

Combined-Chart (bar- and linechart in this case)

BarChart (with legend, simple design)

BarChart (grouped DataSets)

Horizontal-BarChart

PieChart (with selection, ...)

ScatterChart (with squares, triangles, circles, ... and more)

CandleStickChart (for financial data)

BubbleChart (area covered by bubbles indicates the value)

RadarChart (spider web chart)

由于本人app中只使用了折线图和柱状图, 就针对这两个作为例子, 下面开始步骤:

 首先在下载的文件Charts-master中找到"Charts"文件夹

拖入自己的项目

然后将Charts文件中的Charts.xcodeproj文件拖入项目

选择项目TARGETS的General下的Embedded Binaries区块点击+加入Charts框架, 点击Add

object-C移步 https://github.com/danielgindi/Charts#usage

打开 ViewController.swift 导入 Charts

import UIKit

import Charts

在storyBoard中拖入一个view并关联到ViewController.swift中, 可指定view的类型

@IBOutlet weak var lineChartView: LineChartView!     //折线图

@IBOutlet weak var barChartView: BarChartView!       //柱状图

@IBOutlet weak var barChartView: CandleStickChartView!   //蜡烛状图

@IBOutlet weak var barChartView: RadarChartView!     //雷达图

还有很多样式, 根据文章上方图片名称自己查找需要的类型.

运行后会得到一个"No chart data available"信息的界面

也可以在viewDidLoad()方法中更改这个提示信息

barChartView.noDataText = "没有可展示的数据"

加入属性用来存储数据

var days = [String]()

在viewDidLoad()中初始化一些数据, values只能为Double类型的确是比较遗憾

setChart(days, value: sleepTime)是设定图表的函数,放一些图表的自定义设置

运行结果

柱状图没有仔细研究, 具体的属性自定义设置应该和折线图一样. 线面是折线图的一些属性自定义

X轴数据和Y轴数据

let lineChartData    = LineChartData(xVals: dataPoints, dataSet: lineChartDataSet) 

let lineChartDataSet = LineChartDataSet(yVals: dataEntries, label: "运动量")

设置折线图的数据为lineChartData

lineChartView.data = lineChartData

折线图上圆点的内环和外环设置

lineChartDataSet.drawCirclesEnabled = true //画外环

lineChartDataSet.drawCircleHoleEnabled = true //不画内环

lineChartDataSet.circleRadius = 2      //外环直径像素

lineChartDataSet.circleHoleRadius = 1   //内环直径

lineChartDataSet.setCircleColor(UIColor.redColor())  //环的颜色设置

lineChartDataSet.valueTextColor = .redColor()     //环上字体颜色

lineChartDataSet.drawValuesEnabled = true       //展示环上的值

X轴Y轴的一些设置

lineChartView.xAxis.labelTextColor = .greenColor()      //X轴字体颜色

lineChartView.leftAxis.labelTextColor = .greenColor()  //Y轴字体颜色

lineChartView.leftAxis.drawGridLinesEnabled = false    //多个横轴

lineChartView.rightAxis.drawGridLinesEnabled = false    //多个横轴(left, right同时false才能不展示横轴)

lineChartView.rightAxis.drawAxisLineEnabled = false //不展示右侧Y轴

lineChartView.xAxis.drawGridLinesEnabled = false  //多个纵轴

lineChartView.xAxis.axisLineColor = .blackColor()  //横轴颜色

lineChartView.leftAxis.axisLineColor = .blackColor()    //纵轴颜色

lineChartView.xAxis.labelPosition = .Bottom      //只显示底部的X轴

lineChartView.rightAxis.enabled = false     //不展示右侧Y轴数据

lineChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0)   //动画效果, 慢慢增长

barChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0, easingOption: .EaseInBounce)   //弹弹弹, 弹走鱼尾纹(好像有什么东西乱入了- -!)弹弹弹的增长

lineChartView的其他设置

lineChartView.legend.enabled = false    //下方的"运动量"单位是否显示

运行:

以上设置已经满足我个人的自定义需求, 如果以后再有什么改动会再来添加新的属性.

文／codeFarmer（简书作者）
原文链接：http://www.jianshu.com/p/0a508ff697d1
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。