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

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]
}
}

原文出自：www.hangge.com 原文链接：https://www.hangge.com/blog/cache/detail_2164.html