github 下载Charts-master SDK,该SDK有多种可自定义的图表样式
lineChart
![](http://upload-images.jianshu.io/upload_images/1369744-aa09626896d6c9c7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/1369744-612b78a63514d384.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
LineChart (cubic lines)
![](http://upload-images.jianshu.io/upload_images/1369744-dbe70225f7d51ab8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
LineChart (gradient fill)
![](http://upload-images.jianshu.io/upload_images/1369744-75de2abad09c70e7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Combined-Chart (bar- and linechart in this case)
![](http://upload-images.jianshu.io/upload_images/1369744-b7227d14221b9a5e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
BarChart (with legend, simple design)
![](http://upload-images.jianshu.io/upload_images/1369744-6c155dac15d28ea0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
BarChart (grouped DataSets)
![](http://upload-images.jianshu.io/upload_images/1369744-4891499a95394478.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Horizontal-BarChart
![](http://upload-images.jianshu.io/upload_images/1369744-b7ae94e7af88b268.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
PieChart (with selection, ...)
![](http://upload-images.jianshu.io/upload_images/1369744-689ba62386500f71.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
ScatterChart (with squares, triangles, circles, ... and more)
![](http://upload-images.jianshu.io/upload_images/1369744-331ea83698ee4d1b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
CandleStickChart (for financial data)
![](http://upload-images.jianshu.io/upload_images/1369744-3b19572bbd0d4fad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
BubbleChart (area covered by bubbles indicates the value)
![](http://upload-images.jianshu.io/upload_images/1369744-63e9b40f98b6c7d1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
RadarChart (spider web chart)
![](http://upload-images.jianshu.io/upload_images/1369744-eb7fcff20260d4eb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
由于本人app中只使用了折线图和柱状图, 就针对这两个作为例子, 下面开始步骤:
首先在下载的文件Charts-master中找到"Charts"文件夹
![](http://upload-images.jianshu.io/upload_images/1369744-dd05e59402a29d0b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
拖入自己的项目
![](http://upload-images.jianshu.io/upload_images/1369744-04f977cbb394197e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
然后将Charts文件中的Charts.xcodeproj文件拖入项目
![](http://upload-images.jianshu.io/upload_images/1369744-74e94befce487881.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
选择项目TARGETS的General下的Embedded Binaries区块点击+加入Charts框架, 点击Add
![](http://upload-images.jianshu.io/upload_images/1369744-c037d36667daf526.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
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"信息的界面
![](http://upload-images.jianshu.io/upload_images/1369744-1078e594ee818993.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
也可以在viewDidLoad()方法中更改这个提示信息
barChartView.noDataText = "没有可展示的数据"
加入属性用来存储数据
var days = [String]()
在viewDidLoad()中初始化一些数据, values只能为Double类型的确是比较遗憾
![](http://upload-images.jianshu.io/upload_images/1369744-47033eb90a56846c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
setChart(days, value: sleepTime)是设定图表的函数,放一些图表的自定义设置
![](http://upload-images.jianshu.io/upload_images/1369744-0f7ca6a7a6bbd8d4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
运行结果
![](http://upload-images.jianshu.io/upload_images/1369744-fc9211c47f5e0250.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
柱状图没有仔细研究, 具体的属性自定义设置应该和折线图一样. 线面是折线图的一些属性自定义
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 //下方的"运动量"单位是否显示
运行:
![](http://upload-images.jianshu.io/upload_images/1369744-5711ad8f0dedd622.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
以上设置已经满足我个人的自定义需求, 如果以后再有什么改动会再来添加新的属性.
原文链接:http://www.jianshu.com/p/0a508ff697d1
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。