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區(qū)塊點擊+加入Charts框架, 點擊Add
object-C移步?https://github.com/danielgindi/Charts#usage
打開 ViewController.swift 導(dǎo)入 Charts
import UIKit
import Charts
在storyBoard中拖入一個view并關(guān)聯(lián)到ViewController.swift中, 可指定view的類型
@IBOutlet weak var lineChartView: LineChartView! ? ? //折線圖
@IBOutlet weak var barChartView: BarChartView! ? ? ? //柱狀圖
@IBOutlet weak var barChartView: CandleStickChartView! ? //蠟燭狀圖
@IBOutlet weak var barChartView: RadarChartView! ? ? //雷達圖
還有很多樣式, 根據(jù)文章上方圖片名稱自己查找需要的類型.
運行后會得到一個"No chart data available"信息的界面
也可以在viewDidLoad()方法中更改這個提示信息
barChartView.noDataText = "沒有可展示的數(shù)據(jù)"
加入屬性用來存儲數(shù)據(jù)
var days = [String]()
在viewDidLoad()中初始化一些數(shù)據(jù), values只能為Double類型的確是比較遺憾
setChart(days, value: sleepTime)是設(shè)定圖表的函數(shù),放一些圖表的自定義設(shè)置
運行結(jié)果
柱狀圖沒有仔細研究, 具體的屬性自定義設(shè)置應(yīng)該和折線圖一樣. 線面是折線圖的一些屬性自定義
X軸數(shù)據(jù)和Y軸數(shù)據(jù)
let lineChartData? ? = LineChartData(xVals: dataPoints, dataSet: lineChartDataSet)?
let lineChartDataSet = LineChartDataSet(yVals: dataEntries, label: "運動量")
設(shè)置折線圖的數(shù)據(jù)為lineChartData
lineChartView.data = lineChartData
折線圖上圓點的內(nèi)環(huán)和外環(huán)設(shè)置
lineChartDataSet.drawCirclesEnabled = true //畫外環(huán)
lineChartDataSet.drawCircleHoleEnabled = true //不畫內(nèi)環(huán)
lineChartDataSet.circleRadius = 2 ? ? ?//外環(huán)直徑像素
lineChartDataSet.circleHoleRadius = 1 ? //內(nèi)環(huán)直徑
lineChartDataSet.setCircleColor(UIColor.redColor()) ?//環(huán)的顏色設(shè)置
lineChartDataSet.valueTextColor = .redColor() ? ? //環(huán)上字體顏色
lineChartDataSet.drawValuesEnabled = true ? ? ? //展示環(huán)上的值
X軸Y軸的一些設(shè)置
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 //不展示右側(cè)Y軸
lineChartView.xAxis.drawGridLinesEnabled = false? //多個縱軸
lineChartView.xAxis.axisLineColor = .blackColor()? //橫軸顏色
lineChartView.leftAxis.axisLineColor = .blackColor()? ? //縱軸顏色
lineChartView.xAxis.labelPosition = .Bottom? ? ? //只顯示底部的X軸
lineChartView.rightAxis.enabled = false ? ? //不展示右側(cè)Y軸數(shù)據(jù)
lineChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0) ? //動畫效果, 慢慢增長
barChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0, easingOption: .EaseInBounce) ? //彈彈彈, 彈走魚尾紋(好像有什么東西亂入了- -!)彈彈彈的增長
lineChartView的其他設(shè)置
lineChartView.legend.enabled = false? ? //下方的"運動量"單位是否顯示
運行:
以上設(shè)置已經(jīng)滿足我個人的自定義需求, 如果以后再有什么改動會再來添加新的屬性.
