留言首页
  • 当前位置：
    首页
    >
    编程社区
    >
    Swift
    > Swift - 第三方图表库Charts使用详解23（雷达图）

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

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

    1，基本用法

    （1）下面是一个只包含一组数据的六维图。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    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）下面是包含两组数据的六维图。为了让显示更清晰，这里不显示具体的数字值。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    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，设置线条和填充样式

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

    3，设置网格线样式

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

    4，设置数值文字的样式

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

    5，选中后十字线样式

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

    （2）我们还可以干脆不显示网格线，而只显示一个圆圈。下面是一个深色背景的雷达图样例。
              
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    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]
        }
    }
    上一篇Swift - 第三方图表库Charts使用详解22（饼状图2：指示折线、半饼图） 下一篇Swift - 判断UILabel文字是否被截断（是否有多余文字被省略）
    打赏支持
    评论（0）