Swift - 第三方图表库AAInfographics使用详解9（区域范围图）
作者：hangge | 2019-02-25 08:10
一、折线区域范围图
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(.arearange) //图表类型
.title("折线区域范围图")//图表主标题
.dataLabelEnabled(false)
.categories(["1号", "2号", "3号", "4号", "5号", "6号",
"7号", "8号", "9号", "10号", "11号", "12号"])
.series(
[
AASeriesElement()
.name("温度范围")
.data([
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
])
.toDic()!,
]
)
// 图表视图对象调用图表模型对象,绘制最终图形
aaChartView.aa_drawChartWithChartModel(chartModel)
}
}
二、曲线区域范围图
1，效果图
- 曲线区域范围图与折线区域范围图类似，只不过数据点之间的连线由直线变成曲线。
- 同时下面我们使用自定义渐变色来绘制区域范围。
2，样例代码
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//自定义渐变色
let gradientColorDic = [
"linearGradient": [
"x1": 0,
"y1": 0,
"x2": 0,
"y2": 1
],
"stops": [[0,"#8A2BE2"],
[1,"#1E90FF"]]//颜色字符串设置支持十六进制类型和 rgba 类型
] as [String : AnyObject]
// 初始化图表视图控件
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(.areasplinerange) //图表类型
.title("曲线区域范围图")//图表主标题
.dataLabelEnabled(true)
.categories(["1号", "2号", "3号", "4号", "5号", "6号",
"7号", "8号", "9号", "10号", "11号", "12号"])
.series(
[
AASeriesElement()
.name("温度范围")
.color(gradientColorDic)
.data([
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
])
.toDic()!,
]
)
// 图表视图对象调用图表模型对象,绘制最终图形
aaChartView.aa_drawChartWithChartModel(chartModel)
}
}
三、柱形范围图
（1）下面是一个简单的柱形范围图样例：
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(.columnrange) //图表类型
.title("柱形范围图")//图表主标题
.dataLabelEnabled(true)
.categories(["1号", "2号", "3号", "4号", "5号", "6号",
"7号", "8号", "9号", "10号", "11号", "12号"])
.series(
[
AASeriesElement()
.name("温度范围")
.data([
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
])
.toDic()!,
]
)
// 图表视图对象调用图表模型对象,绘制最终图形
aaChartView.aa_drawChartWithChartModel(chartModel)
}
}
（2）将柱状范围图翻转后则变成条形范围图：
let chartModel = AAChartModel()
.chartType(.columnrange) //图表类型
.title("条形范围图")//图表主标题
.inverted(true)//翻转图形
//...
全部评论（0）