Swift - 第三方图表库AAInfographics使用详解6（柱形图、条形图）

2019-02-18 发布：hangge 阅读：1805

一、柱形图

1，基本用法

（1）下面我们使用 AAInfographics 来显示一个简单的柱状图，效果如下：

整个柱状图一共展示三组数据（三个系列数据），每组数据使用不同的颜色和图例区分。
图表展示时会有动画效果，默认效果是柱子从下往上升起。
点击某个分类刻度时，会出现浮动提示框显示相关数据。
点击某个图例可以隐藏、显示该图例对应系列的数据。

（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(.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 可以设置柱状图头部圆角半径，该属性同样支持条形图。

let chartModel = AAChartModel()
    .chartType(.column)//图表类型
    .borderRadius(5) //头部圆角半径
    //....

3，极化图形（变为雷达图）

let chartModel = AAChartModel()
    .chartType(.column)//图表类型
    .polar(true) //极化图形(变为雷达图)
    //....

4，堆积样式

（1）默认情况下数据是不会堆叠的，下面样例使用堆叠方式显示图表数据。

columnlet chartModel = AAChartModel()
    .chartType(.column)//图表类型
    .stacking(.normal) //普通堆叠
    //....

（2）下面是改成百分比堆叠的样式：

let chartModel = AAChartModel()
    .chartType(.column)//图表类型
    .stacking(.percent) //普通堆叠
    //....

5，基准线上下分别使用不同颜色

（1）默认情况下基准线（阀值线、门槛线）是 0 刻度的位置。我们可以指定基准线两侧柱子分别使用不同的颜色。

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 属性来修改基准线位置。

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 即为条形图。

let chartModel = AAChartModel()
    .chartType(.bar)//图表类型为条形图
    //....

（2）条形图的其它样式属性和柱状图一样，这里就不再重复介绍了。