Swift - 第三方图表库AAInfographics使用详解6（柱形图、条形图）
一、柱形图
1，基本用法
（1）下面我们使用 AAInfographics 来显示一个简单的柱状图，效果如下：
- 整个柱状图一共展示三组数据（三个系列数据），每组数据使用不同的颜色和图例区分。
- 图表展示时会有动画效果，默认效果是柱子从下往上升起。
- 点击某个分类刻度时，会出现浮动提示框显示相关数据。
- 点击某个图例可以隐藏、显示该图例对应系列的数据。
（2）样例代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | import UIKitclass 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(.column)//图表类型 .title("城市天气变化")//图表主标题 .subtitle("2020年09月18日")//图表副标题 .inverted(false)//是否翻转图形 .yAxisTitle("摄氏度")// Y 轴标题 .legendEnabled(true)//是否启用图表的图例(图表底部的可点击的小圆点) .tooltipValueSuffix("摄氏度")//浮动提示框单位后缀 .categories(["一月", "二月", "三月", "四月", "五月", "六月"]) .colorsTheme(["#fe117c","#ffc069","#06caf4"])//主题颜色数组 .series([ AASeriesElement() .name("东京") .data([7.0, 6.9, 9.5, 14.5, 18.2, 21.5]) .toDic()!, AASeriesElement() .name("纽约") .data([0.2, 0.8, 5.7, 11.3, 17.0, 22.0]) .toDic()!, AASeriesElement() .name("柏林") .data([0.9, 0.6, 3.5, 8.4, 13.5, 17.0]) .toDic()!]) // 图表视图对象调用图表模型对象,绘制最终图形 aaChartView.aa_drawChartWithChartModel(chartModel) }} |
2，修改柱状图头部圆角半径
使用 borderRadius 可以设置柱状图头部圆角半径，该属性同样支持条形图。
1 2 3 4 | let chartModel = AAChartModel() .chartType(.column)//图表类型 .borderRadius(5) //头部圆角半径 //.... |
3，极化图形（变为雷达图）
1 2 3 4 | let chartModel = AAChartModel() .chartType(.column)//图表类型 .polar(true) //极化图形(变为雷达图) //.... |
4，堆积样式
（1）默认情况下数据是不会堆叠的，下面样例使用堆叠方式显示图表数据。
1 2 3 4 | columnlet chartModel = AAChartModel() .chartType(.column)//图表类型 .stacking(.normal) //普通堆叠 //.... |
（2）下面是改成百分比堆叠的样式：
1 2 3 4 | let chartModel = AAChartModel() .chartType(.column)//图表类型 .stacking(.percent) //普通堆叠 //.... |
5，基准线上下分别使用不同颜色
（1）默认情况下基准线（阀值线、门槛线）是 0 刻度的位置。我们可以指定基准线两侧柱子分别使用不同的颜色。
1 2 3 4 5 6 7 8 9 10 11 12 13 | let chartModel = AAChartModel() .chartType(.column)//图表类型 .title("基准线上下使用不同颜色")//图表主标题 .dataLabelEnabled(false)//是否显示数字 .colorsTheme(["#fe117c","#ffc069","#06caf4"])//主题颜色数组 .series([ AASeriesElement() .name("图例1") .data([-6.4, -5.2, -3.0, 0.2, 2.3, 5.5, 8.4, 8.3, 5.1, 0.9, -6.4, -5.2, -3.0, 0.2, 2.3, 5.5, 8.4, 8.3, 5.1, 0.9]) .color("#0088FF") .negativeColor("#FF0000") .toDic()!]) |
（2）我们也可以使用 threshold 属性来修改基准线位置。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | let chartModel = AAChartModel() .chartType(.column)//图表类型 .title("基准线上下使用不同颜色")//图表主标题 .dataLabelEnabled(false)//是否显示数字 .colorsTheme(["#fe117c","#ffc069","#06caf4"])//主题颜色数组 .series([ AASeriesElement() .name("图例1") .data([-6.4, -5.2, -3.0, 0.2, 2.3, 5.5, 8.4, 8.3, 5.1, 0.9, -6.4, -5.2, -3.0, 0.2, 2.3, 5.5, 8.4, 8.3, 5.1, 0.9]) .color("#0088FF") .negativeColor("#FF0000") .threshold(5) //修改基准线 .toDic()!]) |
二、条形图
（1）将图表类型设置为 bar 即为条形图。
1 2 3 | let chartModel = AAChartModel() .chartType(.bar)//图表类型为条形图 //.... |
（2）条形图的其它样式属性和柱状图一样，这里就不再重复介绍了。
