iOS制作一个雷达图,可用于多种场景(一)
2016-03-13 本文已影响1393人
afishhhhh
正文开始前呢先放一张图,展示一下什么是雷达图(图片来自百度)
![](https://img.haomeiwen.com/i975510/cc41acfc98929e6a.jpg)
接下来呢,是本篇文章demo的地址,其中RadarChartView.swift可以直接用在其他的项目中。
雷达图的应用场景其实还是比较多的,比如说可以作为显示评分的一种方式。
RadarChartView.swift采用了实时渲染的方式,也就是说如果你将一个view的class设为了RadarChartView,在storyboard中雷达图就可以及时的显示出来。当然也可以通过代码的方式实例化一个RadarChartView。还可以在storyboard中直接修改雷达图线条的颜色,宽度,某个评分的最大值等等。
这个我第一次尝试封装了一个自定义控件,还希望大家多多支持,批评指正。
新建项目
新建一个名叫RadarChart的项目,language选择Swift。
添加RadarChartView
拖拽一个view到storyboard,可以按自己的需求添加约束,然后在identity inspector将class改为RadarChartView
![](http://upload-images.jianshu.io/upload_images/975510-2f736ab7ac4e503a.png)
然后添加三个button到storyboard
![](http://upload-images.jianshu.io/upload_images/975510-5dd85c8f949179ca.png)
这三个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就已经可以运行了。