Swift - 第三方图表库Charts使用详解23（雷达图）

2018-09-10 发布：hangge 阅读：4480

1，基本用法

（1）下面是一个只包含一组数据的六维图。

import UIKit
import Charts

class ViewController: UIViewController {
    
    //雷达图
    var chartView: RadarChartView!
    
    //雷达图每个维度的标签文字
    let activities = ["力量", "敏捷", "生命", "智力", "魔法", "幸运"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //创建折线图组件对象
        chartView = RadarChartView()
        chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
                                 height: 260)
        self.view.addSubview(chartView)
        
        //维度标签文字
        chartView.xAxis.valueFormatter = self
        
        //最小、最大刻度值
        let yAxis = chartView.yAxis
        yAxis.axisMinimum = 0
        yAxis.axisMaximum = 100
        yAxis.labelCount = 4
        yAxis.drawLabelsEnabled = false //不显示刻度值
        
        //生成6条随机数据
        let dataEntries = (0..<6).map { (i) -> RadarChartDataEntry in
            return RadarChartDataEntry(value: Double(arc4random_uniform(50) + 50))
        }
        let chartDataSet = RadarChartDataSet(values: dataEntries, label: "李大宝")
        //目前雷达图只包括1组数据
        let chartData = RadarChartData(dataSets: [chartDataSet])
        
        //设置雷达图数据
        chartView.data = chartData
    }
}

extension ViewController: IAxisValueFormatter {
    //维度标签文字（x轴文字）
    func stringForValue(_ value: Double, axis: AxisBase?) -> String {
        return activities[Int(value) % activities.count]
    }
}

（2）下面是包含两组数据的六维图。为了让显示更清晰，这里不显示具体的数字值。

import UIKit
import Charts

class ViewController: UIViewController {
    
    //雷达图
    var chartView: RadarChartView!
    
    //雷达图每个维度的标签文字
    let activities = ["力量", "敏捷", "生命", "智力", "魔法", "幸运"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //创建折线图组件对象
        chartView = RadarChartView()
        chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
                                 height: 260)
        self.view.addSubview(chartView)
        
        //维度标签文字
        chartView.xAxis.valueFormatter = self
        
        //最小、最大刻度值
        let yAxis = chartView.yAxis
        yAxis.axisMinimum = 0
        yAxis.axisMaximum = 100
        yAxis.labelCount = 4
        yAxis.drawLabelsEnabled = false //不显示刻度值
        
        //随机数据生成方法
        let block: (Int) -> RadarChartDataEntry = { _ in
            return RadarChartDataEntry(value: Double(arc4random_uniform(50) + 50))
        }
        //生成两组数据
        let dataEntries1 = (0..<6).map(block)
        let chartDataSet1 = RadarChartDataSet(values: dataEntries1, label: "李大宝")
        chartDataSet1.setColor(ChartColorTemplates.joyful()[4])
        
        let dataEntries2 = (0..<6).map(block)
        let chartDataSet2 = RadarChartDataSet(values: dataEntries2, label: "王小强")
        chartDataSet1.setColor(ChartColorTemplates.joyful()[1])
        
        //目前雷达图包括2组数据
        let chartData = RadarChartData(dataSets: [chartDataSet1, chartDataSet2])
        chartData.setDrawValues(false) //不显示值标签
        
        //设置雷达图数据
        chartView.data = chartData
    }
}

extension ViewController: IAxisValueFormatter {
    //维度标签文字（x轴文字）
    func stringForValue(_ value: Double, axis: AxisBase?) -> String {
        return activities[Int(value) % activities.count]
    }
}

2，设置线条和填充样式

chartDataSet.setColor(.orange) //线条颜色
chartDataSet.lineWidth = 2 //线条粗细
chartDataSet.fillColor = .orange //填充颜色
chartDataSet.fillAlpha = 0.4  //填充透明度
chartDataSet.drawFilledEnabled = true  //启用填充色绘制

3，设置网格线样式

chartView.webLineWidth = 2 //网格主干线粗细
chartView.webColor = .red //网格主干线颜色
chartView.webAlpha = 1  //网格线透明度
chartView.innerWebLineWidth = 1  //网格边线粗细
chartView.innerWebColor = .orange  //网格边线颜色

4，设置数值文字的样式

chartData.setValueFont(.systemFont(ofSize: 8, weight: .light)) //数值文字字体
chartData.setValueTextColor(.blue) //数值文字颜色

5，选中后十字线样式

（1）默认情况下当选中一个点时，该点位置会出现一个十字线。我们可以让十字线的中央再显示个圆圈，显得更加美观。

chartDataSet.drawHighlightCircleEnabled = true

（2）我们还可以干脆不显示网格线，而只显示一个圆圈。下面是一个深色背景的雷达图样例。

import UIKit
import Charts

class ViewController: UIViewController {
    
    //雷达图
    var chartView: RadarChartView!
    
    //雷达图每个维度的标签文字
    let activities = ["力量", "敏捷", "生命", "智力", "魔法", "幸运"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //设置页面背景色
        self.view.backgroundColor = UIColor(red: 0x3C/255, green: 0x41/255,
                                            blue: 0x52/255, alpha: 1)
        
        //创建折线图组件对象
        chartView = RadarChartView()
        chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
                                 height: 260)
        self.view.addSubview(chartView)
        //修改网格样式
        chartView.webLineWidth = 1
        chartView.innerWebLineWidth = 1
        chartView.webColor = .lightGray
        chartView.innerWebColor = .lightGray
        chartView.webAlpha = 1
        
        //维度标签文字
        let xAxis = chartView.xAxis
        xAxis.valueFormatter = self
        xAxis.labelTextColor = .white
        
        //最小、最大刻度值
        let yAxis = chartView.yAxis
        yAxis.axisMinimum = 0
        yAxis.axisMaximum = 100
        yAxis.labelCount = 4
        yAxis.drawLabelsEnabled = false //不显示刻度值
        yAxis.labelTextColor = .white
        
        //图例样式
        let l = chartView.legend
        l.textColor = .white
        
        //生成6条随机数据
        let dataEntries = (0..<6).map { (i) -> RadarChartDataEntry in
            return RadarChartDataEntry(value: Double(arc4random_uniform(50) + 50))
        }
        let chartDataSet = RadarChartDataSet(values: dataEntries, label: "李大宝")
        chartDataSet.setColor(UIColor(red: 121/255, green: 162/255,
                                      blue: 175/255, alpha: 1))
        chartDataSet.fillColor = UIColor(red: 121/255, green: 162/255,
                                         blue: 175/255, alpha: 1)
        chartDataSet.drawFilledEnabled = true
        chartDataSet.fillAlpha = 0.7
        chartDataSet.lineWidth = 2
        chartDataSet.drawHighlightCircleEnabled = true //选中后显示圆圈
        chartDataSet.setDrawHighlightIndicators(false) //选中后不显示十字线
        
        //目前雷达图只包括1组数据
        let chartData = RadarChartData(dataSets: [chartDataSet])
        chartData.setValueFont(.systemFont(ofSize: 8, weight: .light))
        chartData.setValueTextColor(.white)
        
        //设置雷达图数据
        chartView.data = chartData
    }
}

extension ViewController: IAxisValueFormatter {
    //维度标签文字（x轴文字）
    func stringForValue(_ value: Double, axis: AxisBase?) -> String {
        return activities[Int(value) % activities.count]
    }
}