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 //下方的"运动量"单位是否显示
运行:
以上设置已经满足我个人的自定义需求, 如果以后再有什么改动会再来添加新的属性.
网友评论