Swift - 第三方图表库AAInfographics使用详解9(区域范围图)
一、折线区域范围图
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)//翻转图形 //...