Swift - 第三方图表库AAInfographics使用详解10（箱形图、瀑布图、金字塔图、漏斗图）
作者：hangge | 2019-02-27 08:10
一、箱形图
1，功能介绍
- 箱形图（Box-plot）又称为盒须图、盒式图或箱线图，是一种用作显示一组数据分散情况资料的统计图。
- 箱形图因形状如箱子而得名。在各种领域也经常被使用，常见于品质管理。
- 箱形图主要用于反映原始数据分布的特征，还可以进行多组数据分布特征的比较。
- 箱线图的绘制方法是：先找出一组数据的最大值、最小值、中位数和两个四分位数；然后连接两个四分位数画出箱子；再将最大值和最小值与箱子相连接，中位数在箱子中间。
2，使用样例
（1）效果图
- 图表展示时会有动画效果，默认效果是箱子从下往上升起。
- 点击某个分类刻度时，会出现浮动提示框显示相关数据。
- 点击某个图例可以隐藏、显示该图例对应系列的数据。
（2）样例代码
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// 初始化图表视图控件
let chartWidth = self.view.frame.size.width
let chartHeight = self.view.frame.size.height - 200
let aaChartView = AAChartView()
aaChartView.frame = CGRect(x:0, y:0, width:chartWidth, height:chartHeight)
self.view.addSubview(aaChartView)
// 初始化图表模型
let chartModel = AAChartModel()
.chartType(.boxplot)//图表类型
.title("箱形图")//图表主标题
.legendEnabled(true)//是否启用图表的图例(图表底部的可点击的小圆点)
.yAxisVisible(true)
.series([
AASeriesElement()
.name("Observed Data")
.color("#ef476f")
.fillColor("#04d69f")
.data([
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
])
.toDic()!,
])
// 图表视图对象调用图表模型对象,绘制最终图形
aaChartView.aa_drawChartWithChartModel(chartModel)
}
}
二、瀑布图
1，功能介绍
- 瀑布图是由麦肯锡顾问公司所独创的图表类型，因为形似瀑布流水而称之为瀑布图( Waterfall Plot)。
- 此种图表采用绝对值与相对值结合的方式，适用于表达数个特定数值之间的数量变化关系。
2，使用样例
（1）效果图
- 图表展示时会有动画效果，默认效果是柱子从下往上升起。
- 点击某个分类刻度时，会出现浮动提示框显示相关数据。
- 点击某个图例可以隐藏、显示该图例对应系列的数据。
（2）样例代码
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// 初始化图表视图控件
let chartWidth = self.view.frame.size.width
let chartHeight = self.view.frame.size.height - 200
let aaChartView = AAChartView()
aaChartView.frame = CGRect(x:0, y:0, width:chartWidth, height:chartHeight)
self.view.addSubview(aaChartView)
// 初始化图表模型
let chartModel = AAChartModel()
.chartType(.waterfall)//图表类型
.title("瀑布图")//图表主标题
.legendEnabled(true)//是否启用图表的图例(图表底部的可点击的小圆点)
.yAxisVisible(true)
.series(
[
["upColor":"#9b43b4",
"color": "#ef476f",
"name": "资产变动情况",
"borderWidth":0,
"data": [
[
"name": "启动资金",
"y": 120000
], [
"name": "产品收入",
"y": 569000
], [
"name": "服务收入",
"y": 231000
], [
"name": "正平衡",
"isIntermediateSum": true,
"color": "#ffd066"
], [
"name": "固定成本",
"y": -342000
], [
"name": "可变成本",
"y": -233000
], [
"name": "余额",
"isSum": true,
"color": "#04d69f"
]],
]]
)
// 图表视图对象调用图表模型对象,绘制最终图形
aaChartView.aa_drawChartWithChartModel(chartModel)
}
}
三、金字塔图
金字塔图表也是使用频率非常高的图表之一，它可以帮助我们在一个金字塔状结构中将层次结构以及数据量可视化。
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// 初始化图表视图控件
let chartWidth = self.view.frame.size.width
let chartHeight = self.view.frame.size.height - 200
let aaChartView = AAChartView()
aaChartView.frame = CGRect(x:0, y:0, width:chartWidth, height:chartHeight)
self.view.addSubview(aaChartView)
// 初始化图表模型
let chartModel = AAChartModel()
.chartType(.pyramid)//图表类型
.title("年龄分布")//图表主标题
.yAxisVisible(true)
.series([
AASeriesElement()
.name("人数")
.data([
["0 ~ 10岁", 20000],
["10 ~ 30岁", 12379],
["30 ~ 50岁", 4286],
["50 ~ 70岁", 3552],
["> 70岁", 1654],
])
.toDic()!,
])
// 图表视图对象调用图表模型对象,绘制最终图形
aaChartView.aa_drawChartWithChartModel(chartModel)
}
}
四、漏斗图
漏斗图适用于业务流程比较规范、周期长、环节多的流程分析，通过漏斗各环节业务数据的比较，能够直观地发现和说明问题所在。
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// 初始化图表视图控件
let chartWidth = self.view.frame.size.width
let chartHeight = self.view.frame.size.height - 200
let aaChartView = AAChartView()
aaChartView.frame = CGRect(x:0, y:0, width:chartWidth, height:chartHeight)
self.view.addSubview(aaChartView)
// 初始化图表模型
let chartModel = AAChartModel()
.chartType(.funnel)//图表类型
.title("转换率")//图表主标题
.yAxisVisible(true)
.series([
AASeriesElement()
.name("人数")
.data([
["访问", 11256],
["注册", 9000],
["准备购物", 6666],
["下单", 4545],
["购买成功", 3333],
])
.toDic()!,
])
// 图表视图对象调用图表模型对象,绘制最终图形
aaChartView.aa_drawChartWithChartModel(chartModel)
}
}
全部评论（0）