Swift - 第三方图表库AAInfographics使用详解8（散点图、气泡图）

作者：hangge | 2019-02-22 08:20

一、散点图

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(.scatter) //图表类型
            .title("身高体重分布情况")//图表主标题
            .subtitle("2020年09月")//图表副标题
            .titleColor("#ffffff")//主标题文字颜色
            .subtitleColor("#ffffff")//副标题文字颜色
            .axisColor("#ffffff")//轴线颜色
            .yAxisTitle("kg")//Y轴标题
            .backgroundColor("#22324c") //背景颜色
            .dataLabelEnabled(false)
            .series(
                [
                    AASeriesElement()
                        .name("女性")
                        .color("rgba(223, 83, 83, 1)")
                        .data([
                            [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0],
                            [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8],
                            [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0],
                            [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8],
                            [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8],
                            [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8]
                            ])
                        .toDic()!,
                    AASeriesElement()
                        .name("男性")
                        .color("rgba(119, 152, 191, 1)")
                        .data([
                            [174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6],
                            [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0],
                            [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6],
                            [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4],
                            [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4],
                            [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2]
                            ])
                        .toDic()!
                ])
        
        // 图表视图对象调用图表模型对象,绘制最终图形
        aaChartView.aa_drawChartWithChartModel(chartModel)
    }
}

2，修改散点的样式类型

（1）散点有如下 5 种样式可以选择，如果不指定的话则每组数组依次使用各种样式。

circle：圆形
square：正方形
diamond：菱形
triangle：上三角形
triangle-down：下三角形

（2）下面将所有散点统一使用三角形：

let chartModel = AAChartModel()
    .chartType(.scatter) //图表类型
    .symbol(.triangle)//散点形状
    //.....

3，修改散点的空心样式

（1）使用 symbolStyle 可以设置散点的空心样式，有如下三种可选值：

none：内部和边框均为实心（默认值）
borderBlank：边框空心
innerBlank：内部空心

（2）下面分别是 borderBlank 和 innerBlank 的效果：

let chartModel = AAChartModel()
    .chartType(.scatter) //图表类型
    .symbol(.circle)//散点形状
    .symbolStyle(.borderBlank)//连接点边框空心
    //.....

4，修改散点半径

markerRadius 可以设置散点半径：

let chartModel = AAChartModel()
    .chartType(.scatter) //图表类型
    .symbol(.circle)//散点形状
    .symbolStyle(.innerBlank)//散点内部空心 
    .markerRadius(9)//散点半径
    //.....

二、气泡图

1，效果图

气泡图和散点图很像，不同的是气泡图的每个数据又多了个 size 属性，该属性决定每个气泡相对大小。效果如下：

整个散点图一共展示两组数据（两个系列数据），每组数据使用不同的颜色和图例区分。
图表展示时会有动画效果，默认效果是气泡逐渐从小变大显示出来。
点击某个气泡时，会出现浮动提示框显示相关数据。
点击某个图例可以隐藏、显示该图例对应系列的数据。

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(.bubble) //图表类型
            .title("气泡图")//图表主标题
            .titleColor("#ffffff")//主标题文字颜色
            .subtitleColor("#ffffff")//副标题文字颜色
            .axisColor("#ffffff")//轴线颜色
            .backgroundColor("#22324c") //背景颜色
            .colorsTheme(["#0c9674","#7dffc0"])
            .series(
                [
                    AASeriesElement()
                        .name("BubbleOne")
                        .data([
                            [97, 36, 79],
                            [94, 74, 60],
                            [68, 76, 58],
                            [64, 87, 56],
                            [68, 27, 73],
                            [74, 99, 42],
                            [7,  93, 99],
                            [51, 69, 40],
                            [38, 23, 33]
                            ])
                        .toDic()!,
                    AASeriesElement()
                        .name("BubbleTwo")
                        .data([
                            [25, 60, 87],
                            [2,  75, 59],
                            [11, 54, 8 ],
                            [86, 55, 93],
                            [5,  33, 88],
                            [90, 63, 44],
                            [91, 43, 17],
                            [97, 56, 56],
                            [15, 67, 48]
                            ])
                        .toDic()!,
                    ])
        
        // 图表视图对象调用图表模型对象,绘制最终图形
        aaChartView.aa_drawChartWithChartModel(chartModel)
    }
}