前言
??最近在項(xiàng)目中需要添加圖表趴荸，柱狀圖和折線圖儒溉，研究了一下，今天就給大家分享一個(gè)功能非常全发钝，非常好用的圖表制作的三方框架Charts,它是一個(gè)用swift語(yǔ)言編寫(xiě)的swift三方框架顿涣，現(xiàn)在最新的版本應(yīng)該是3.0.5，大家可以去git 上去下載源碼來(lái)研究它的寫(xiě)法酝豪。 Charts涛碑。它支持多種圖表制作，這里我就選柱狀圖和折線圖來(lái)進(jìn)行介紹孵淘。
- 下面說(shuō)一下在研究Charts時(shí)蒲障，遇到的一個(gè)小困難，我需要在圖表的X軸上顯示自定義的字符串瘫证，上網(wǎng)查閱很少有符合我的需求的介紹揉阎，就算有也是比較老的版本，照著寫(xiě)上寫(xiě)不好使背捌，最后還是下載了最新版本的源碼毙籽，通過(guò)源碼解決了這個(gè)問(wèn)題。所以如果大家要研究一個(gè)新接觸的三方框架毡庆，如果是開(kāi)源的話坑赡，第一選擇還是去下載源碼烙如，這樣會(huì)很節(jié)省時(shí)間。
柱狀圖
?? Charts的功能十分強(qiáng)大毅否，這里只是介紹它的簡(jiǎn)單使用亚铁，下面是基礎(chǔ)功能和屬性的使用介紹。
- 添加Charts
// 柱狀圖
let barChartView: BarChartView = {
$0.noDataText = "暫無(wú)統(tǒng)計(jì)數(shù)據(jù)" //無(wú)數(shù)據(jù)的時(shí)候顯示
$0.chartDescription?.enabled = false //是否顯示描述
$0.scaleXEnabled = false
$0.scaleYEnabled = false
$0.leftAxis.drawGridLinesEnabled = false //左側(cè)y軸設(shè)置螟加，不畫(huà)線
$0.rightAxis.drawGridLinesEnabled = false //右側(cè)y軸設(shè)置刀闷，不畫(huà)線
$0.rightAxis.drawAxisLineEnabled = false
$0.rightAxis.enabled = false
$0.legend.enabled = true
return $0
}(BarChartView())
- x軸，y軸數(shù)值
let xStr = ["體力", "智力", "情緒", "綜合 "] //x軸類別項(xiàng)
let values = [98.0, 70.3, 40.1, 18.2] //x軸對(duì)應(yīng)的y軸數(shù)據(jù)
- 配置柱狀圖仰迁，設(shè)置數(shù)據(jù)
//配置柱狀圖
func setBarChartViewData(_ dataPoints: [String], _ values: [Double]) {
//x軸樣式
let xAxis = barChartView.xAxis
xAxis.labelPosition = .bottom //x軸的位置
xAxis.labelFont = .systemFont(ofSize: 10)
xAxis.drawGridLinesEnabled = false
xAxis.granularity = 1.0
xAxis.valueFormatter = self
let xFormatter = IndexAxisValueFormatter()
xFormatter.values = dataPoints
var dataEntris: [BarChartDataEntry] = []
for (idx, _) in dataPoints.enumerated() {
let dataEntry = BarChartDataEntry(x: Double(idx), y: values[idx])
dataEntris.append(dataEntry)
}
let chartDataSet = BarChartDataSet(values: dataEntris, label: "")
let color = UIColor.red
chartDataSet.colors = [color, color, color, color, color]
let chartData = BarChartData(dataSet: chartDataSet)
self.barChartView.data = chartData
self.barChartView.animate(yAxisDuration: 0.4)
}
- 注意：這里x軸需要顯示為自定義的字符串甸昏，這里就需要去簽訂一個(gè)樣式代理，IAxisValueFormatter徐许，實(shí)現(xiàn)指定方法施蜜，折線圖也同樣如此。
//注意：這里是簽訂一個(gè)類似于x軸樣式的代理雌隅，顯示需要的自定義字符串
//在擴(kuò)展里實(shí)現(xiàn)
extension ViewController: IAxisValueFormatter {
func stringForValue(_ value: Double, axis: AxisBase?) -> String {
return xStr[Int(value) % xStr.count]
}
}
- 在VC上添加chart翻默。
//添加柱狀圖
func addBarChartView() {
barChartView.frame = CGRect(x: 0, y: 50, width: 200, height: 200)
barChartView.center.x = self.view.center.x
self.view.addSubview(barChartView)
setBarChartViewData(xStr, values)
}
折線圖
??折線圖與柱狀圖基本上差不多。
- 添加Charts
//折線圖
let lineChartView: LineChartView = {
$0.noDataText = "暫無(wú)統(tǒng)計(jì)數(shù)據(jù)" //無(wú)數(shù)據(jù)的時(shí)候顯示
$0.chartDescription?.enabled = false //是否顯示描述
$0.scaleXEnabled = false
$0.scaleYEnabled = false
$0.leftAxis.drawGridLinesEnabled = false //左側(cè)y軸設(shè)置恰起，不畫(huà)線
$0.rightAxis.drawGridLinesEnabled = false //右側(cè)y軸設(shè)置修械，不畫(huà)線
$0.rightAxis.drawAxisLineEnabled = false
$0.rightAxis.enabled = false
$0.legend.enabled = true
return $0
}(LineChartView())
- 配置折線圖，設(shè)置數(shù)據(jù)
//配置折線圖
func setLineChartViewData(_ dataPoints: [String], _ values: [Double]) {
let xAxis = lineChartView.xAxis
xAxis.labelPosition = .bottom //x軸的位置
xAxis.labelFont = .systemFont(ofSize: 10)
xAxis.drawGridLinesEnabled = false
xAxis.granularity = 1.0
xAxis.valueFormatter = self
var dataEntris: [ChartDataEntry] = []
for (idx, _) in dataPoints.enumerated() {
let dataEntry = ChartDataEntry(x: Double(idx), y: values[idx])
dataEntris.append(dataEntry)
}
let lineChartDataSet = LineChartDataSet(values: dataEntris, label: "")
//外圈
lineChartDataSet.setCircleColor(UIColor.yellow)
//內(nèi)圈
lineChartDataSet.circleHoleColor = UIColor.red
//線條顯示樣式
lineChartDataSet.colors = [UIColor.gray]
let lineChartData = LineChartData(dataSet: lineChartDataSet)
lineChartView.data = lineChartData
//設(shè)置x軸樣式
let xFormatter = IndexAxisValueFormatter()
xFormatter.values = dataPoints
self.lineChartView.animate(xAxisDuration: 0.4)
}
- VC上添加chart
//添加折線圖
func addLineChartView() {
lineChartView.frame = CGRect(x: 0, y: 300, width: 200, height: 200)
lineChartView.center.x = self.view.center.x
self.view.addSubview(lineChartView)
setLineChartViewData(xStr, values)
}
效果圖
效果圖
最后
附上demo鏈接检盼，https://github.com/Sufviay/ChartsTest
