iOS圖表庫Charts整合與使用
阿新 • • 發佈:2019-01-30
Charts是一個很優秀的圖表庫,它支援Android、iOS、tvOS和macOS,這樣使用起來,可以節省學習成本,可以從GitHub上了解更多資訊。本文記錄在iOS專案上的整合與使用。
Charts目前版本是3.0.1,要求使用xcode8和swift3.0,最低支援iOS8.0,如果需要使用2.3.0版本的,需要在xcode8設定使用swift2.3版本的編譯器,但是,蘋果估計遲早會在後面版本移除2.3版本的支援吧,從swift釋出開始就一路使用過來的同學體會應該很深,每次升級xcode,就要改一次swift程式碼,感覺掉進了無底深坑有木有~~~~~~所以,這裡就使用3.0.1版本的吧!
1. 新建測試專案,為了方便,使用swift語言來寫,當然,也可以使用Objective-C來寫,配置好橋接檔案就可以了,也不難。
2. 下載Charts專案,解壓後項目檔案如下:
3. 新增專案"Charts.xcodeproj"到我們專案中:
新增後如下:
4. 新增framework支援:
5. 編寫測試程式碼:
直接在原有ViewController類編寫,直接程式碼寫簡單的view,Demo是用Objective-C寫的,這裡用Swift改寫同樣功能,程式碼如下:
// // ViewController.swift // TestCharts // // Created by LinJK on 22/12/2016. // Copyright © 2016 LinJK. All rights reserved. // import UIKit import Charts class ViewController: UIViewController, ChartViewDelegate{ var charView:LineChartView? var xAxis:XAxis? override func viewDidLoad() { super.viewDidLoad() // charView = LineChartView(frame: CGRect(x: 0, y: 50, width: 300, height: 200)) charView!.delegate = self charView!.chartDescription?.enabled = false charView!.dragEnabled = false charView!.setScaleEnabled(true) charView!.pinchZoomEnabled = false charView!.drawGridBackgroundEnabled = false charView!.highlightPerDragEnabled = true charView!.backgroundColor = UIColor.white charView!.legend.enabled = true xAxis = charView?.xAxis xAxis!.labelPosition = XAxis.LabelPosition.topInside xAxis!.labelFont = UIFont(name: "HelveticaNeue", size: 10)! xAxis!.labelTextColor = UIColor(red: 255/255.0, green: 192/255.0, blue: 56/255.0, alpha: 1.0) xAxis!.drawAxisLineEnabled = false xAxis!.drawGridLinesEnabled = true xAxis!.centerAxisLabelsEnabled = true xAxis!.granularity = 3600.0 charView!.rightAxis.enabled = false charView!.legend.form = Legend.Form.line self.view.addSubview(charView!) self.updateChartData() } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } func updateChartData() { let count = 100.0 let range = 30.0 let hourSeconds:TimeInterval = 3600.0 let now = NSDate().timeIntervalSince1970 let from:TimeInterval = now-(count/2.0)*hourSeconds let to:TimeInterval = now+(count/2.0)*hourSeconds var values:[ChartDataEntry] = [] var x = from while x < to { values.append(ChartDataEntry(x: x, y: Double(arc4random_uniform(UInt32(range)))+50)) x += hourSeconds } var set1:LineChartDataSet? set1 = LineChartDataSet(values: values, label: "DataSet1") set1!.axisDependency = YAxis.AxisDependency.left set1!.valueTextColor = UIColor(red: 51/255.0, green: 181/255.0, blue: 229/255.0, alpha: 1.0) set1!.lineWidth = 1.5 set1!.drawCirclesEnabled = false set1!.drawValuesEnabled = false set1!.fillAlpha = 0.26 set1!.fillColor = UIColor(red: 51/255.0, green: 181/255.0, blue: 229/255.0, alpha: 1.0) set1!.highlightColor = UIColor(red: 224/255.0, green: 117/255.0, blue: 117/255.0, alpha: 1.0) set1!.drawCircleHoleEnabled = false var dataSets:[ChartDataSet] = [] dataSets.append(set1!) let data:LineChartData! = LineChartData(dataSets: dataSets) data.setValueTextColor(UIColor.white) data.setValueFont(UIFont(name: "HelveticaNeue-Light", size: 9.0)) charView?.data = data if charView!.data!.dataSetCount > 0 { set1 = charView!.data?.dataSets[0] as! LineChartDataSet? set1!.values = values charView!.data?.notifyDataChanged() charView!.notifyDataSetChanged() } } //MARK: ChartViewDelegate func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry, highlight: Highlight) { print("chartValueSelected") } func chartValueNothingSelected(_ chartView: ChartViewBase) { print("chartValueNothingSelected") } }
使用上很簡單,直接import Charts,然後新建一個view繫結到需要顯示的圖形型別庫,並對其進行顯示配置和資料填充即可。執行結果如下:
其他的圖形類似,這裡就不重複了,大家可以測試使用一下。