前言

??最近在項目中需要添加圖表，柱狀圖和折線圖，研究了一下，今天就給大家分享一個功能非常全，非常好用的圖表制作的三方框架Charts,它是一個用swift語言編寫的swift三方框架，現(xiàn)在最新的版本應該是3.0.5，大家可以去git 上去下載源碼來研究它的寫法。 Charts。它支持多種圖表制作，這里我就選柱狀圖和折線圖來進行介紹。

• 下面說一下在研究Charts時，遇到的一個小困難，我需要在圖表的X軸上顯示自定義的字符串，上網(wǎng)查閱很少有符合我的需求的介紹，就算有也是比較老的版本，照著寫上寫不好使，最后還是下載了最新版本的源碼，通過源碼解決了這個問題。所以如果大家要研究一個新接觸的三方框架，如果是開源的話，第一選擇還是去下載源碼，這樣會很節(jié)省時間。

柱狀圖

?? Charts的功能十分強大，這里只是介紹它的簡單使用，下面是基礎功能和屬性的使用介紹。

• 添加Charts

    // 柱狀圖
    let barChartView: BarChartView = {
        $0.noDataText = "暫無統(tǒng)計數(shù)據(jù)" //無數(shù)據(jù)的時候顯示
        $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軸數(shù)值

    let xStr = ["體力", "智力", "情緒", "綜合 "] //x軸類別項
    let values = [98.0, 70.3, 40.1, 18.2] //x軸對應的y軸數(shù)據(jù)

• 配置柱狀圖，設置數(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軸需要顯示為自定義的字符串，這里就需要去簽訂一個樣式代理，IAxisValueFormatter，實現(xiàn)指定方法，折線圖也同樣如此。

//注意：這里是簽訂一個類似于x軸樣式的代理，顯示需要的自定義字符串
//在擴展里實現(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 = "暫無統(tǒng)計數(shù)據(jù)" //無數(shù)據(jù)的時候顯示
        $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())

• 配置折線圖，設置數(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)
        //內圈
        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