前言
最近在项目中需要添加图表，柱状图和折线图，研究了一下，今天就给大家分享一个功能非常全，非常好用的图表制作的三方框架Charts,它是一个用swift语言编写的swift三方框架，现在最新的版本应该是3.0.5，大家可以去git 上去下载源码来研究它的写法。 Charts。它支持多种图表制作，这里我就选柱状图和折线图来进行介绍。
- 下面说一下在研究Charts时，遇到的一个小困难，我需要在图表的X轴上显示自定义的字符串，上网查阅很少有符合我的需求的介绍，就算有也是比较老的版本，照着写上写不好使，最后还是下载了最新版本的源码，通过源码解决了这个问题。所以如果大家要研究一个新接触的三方框架，如果是开源的话，第一选择还是去下载源码，这样会很节省时间。
柱状图
Charts的功能十分强大，这里只是介绍它的简单使用，下面是基础功能和属性的使用介绍。
- 添加Charts
// 柱状图
let barChartView: BarChartView = {
$0.noDataText = "暂无统计数据" //无数据的时候显示
$0.chartDescription?.enabled = false //是否显示描述
$0.scaleXEnabled = false
$0.scaleYEnabled = false
$0.leftAxis.drawGridLinesEnabled = false //左侧y轴设置，不画线
$0.rightAxis.drawGridLinesEnabled = false //右侧y轴设置，不画线
$0.rightAxis.drawAxisLineEnabled = false
$0.rightAxis.enabled = false
$0.legend.enabled = true
return $0
}(BarChartView())
- x轴，y轴数值
let xStr = ["体力", "智力", "情绪", "综合 "] //x轴类别项
let values = [98.0, 70.3, 40.1, 18.2] //x轴对应的y轴数据
- 配置柱状图，设置数据
//配置柱状图
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轴需要显示为自定义的字符串，这里就需要去签订一个样式代理，IAxisValueFormatter，实现指定方法，折线图也同样如此。
//注意：这里是签订一个类似于x轴样式的代理，显示需要的自定义字符串
//在扩展里实现
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 = "暂无统计数据" //无数据的时候显示
$0.chartDescription?.enabled = false //是否显示描述
$0.scaleXEnabled = false
$0.scaleYEnabled = false
$0.leftAxis.drawGridLinesEnabled = false //左侧y轴设置，不画线
$0.rightAxis.drawGridLinesEnabled = false //右侧y轴设置，不画线
$0.rightAxis.drawAxisLineEnabled = false
$0.rightAxis.enabled = false
$0.legend.enabled = true
return $0
}(LineChartView())
- 配置折线图，设置数据
//配置折线图
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)
//内圈
lineChartDataSet.circleHoleColor = UIColor.red
//线条显示样式
lineChartDataSet.colors = [UIColor.gray]
let lineChartData = LineChartData(dataSet: lineChartDataSet)
lineChartView.data = lineChartData
//设置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)
}
效果图
效果图
