Swift - 第三方图表库Charts使用详解23(雷达图)
作者:hangge | 2018-09-10 08:10
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] } }
全部评论(0)