iOS制作一个雷达图,可用于多种场景(一)

正文开始前呢先放一张图,展示一下什么是雷达图(图片来自百度)
iOS制作一个雷达图,可用于多种场景(一)_第1张图片

接下来呢,是本篇文章demo的地址,其中RadarChartView.swift可以直接用在其他的项目中。

雷达图的应用场景其实还是比较多的,比如说可以作为显示评分的一种方式。

RadarChartView.swift采用了实时渲染的方式,也就是说如果你将一个view的class设为了RadarChartView,在storyboard中雷达图就可以及时的显示出来。当然也可以通过代码的方式实例化一个RadarChartView。还可以在storyboard中直接修改雷达图线条的颜色,宽度,某个评分的最大值等等。

这个我第一次尝试封装了一个自定义控件,还希望大家多多支持,批评指正。

新建项目

新建一个名叫RadarChart的项目,language选择Swift。

添加RadarChartView

拖拽一个view到storyboard,可以按自己的需求添加约束,然后在identity inspector将class改为RadarChartView

iOS制作一个雷达图,可用于多种场景(一)_第2张图片

然后添加三个button到storyboard

iOS制作一个雷达图,可用于多种场景(一)_第3张图片

这三个button的作用主要是为了展现不同的雷达图,可以展现5条边、6条边或者7条边的雷达图,也就是说可以根据自己的需要展现不同数量的数据。
然后打开ViewController.swift添加以下代码:

@IBOutlet weak var radarChartView: RadarChartView!

@IBAction func firstButtonTapped(sender: UIButton) {
        
    radarChartView.angle = 5
    radarChartView.value = [35.6, 44.7, 78.9, 52.3, 89.7]
}
    
@IBAction func secondButtonTapped(sender: UIButton) {
        
    radarChartView.angle = 6
    radarChartView.value = [35.6, 44.7, 78.9, 52.3, 89.7, 83.6]
}
    
@IBAction func thirdButtonTapped(sender: UIButton) {
        
    radarChartView.angle = 7
    radarChartView.value = [35.6, 44.7, 78.9, 52.3, 89.7, 48.7, 94.1]
}

这个简单的demo就已经可以运行了。

你可能感兴趣的:(iOS制作一个雷达图,可用于多种场景(一))