Swift 功能实现之图表Charts

前言

  最近在项目中需要添加图表，柱状图和折线图，研究了一下，今天就给大家分享一个功能非常全，非常好用的图表制作的三方框架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)
    }

效果图

效果图

最后

附上demo链接，https://github.com/Sufviay/ChartsTest