返回 导航

Swift

hangge.com

Swift - 第三方图表库AAInfographics使用详解11(混合图表)

作者:hangge | 2019-03-01 08:31
    AAInfographics 还可以实现混合图表,即将折线图、柱状图、区域范围图、散点图、气泡图.....中的一种或多种类型图表同时显示在一个坐标系中。

一、折线图、区域范围图组合使用

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()
            .title("气温趋势图")//图表主标题
            .dataLabelEnabled(false)
            .categories(["1号", "2号", "3号", "4号", "5号", "6号",
                         "7号", "8号", "9号", "10号", "11号", "12号"])
            .series(
                [
                    AASeriesElement()
                        .name("温度范围")
                        .type(.arearange)
                        .color("#1E90FF")
                        .lineWidth(0)
                        .fillOpacity(0.3)
                        .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]
                            ])
                        .zIndex(0)
                        .toDic()!,
                    AASeriesElement()
                        .name("平局温度")
                        .type(.line)
                        .color("#1E90FF")
                        .data([
                            1, -2, 3, 8, 11, 17, 20, 16, 11, 5, 2.5, -2
                            ])
                        .zIndex(1)
                        .marker([
                            "fillColor":"#1E90FF" ,
                            "lineWidth": 2,
                            "lineColor":"white"
                            ])
                        .toDic()!,
                    ]
        )
        
        // 图表视图对象调用图表模型对象,绘制最终图形
        aaChartView.aa_drawChartWithChartModel(chartModel)
    }
}

二、折线图、柱状图组合使用

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()
            .title("气温趋势图")//图表主标题
            .dataLabelEnabled(false)
            .categories(["1号", "2号", "3号", "4号", "5号", "6号", "7号"])
            .series(
                [
                    AASeriesElement()
                        .name("净收入")
                        .type(.column)
                        .color("#fe117c")
                        .data([400,728, 999, 456, 567, 666])
                        .zIndex(0)
                        .toDic()!,
                    AASeriesElement()
                        .name("营业额")
                        .type(.line)
                        .data([567,899, 1233, 548, 777, 890])
                        .zIndex(1)
                        .marker([
                            "fillColor":"#1E90FF" ,
                            "lineWidth": 2,
                            "lineColor":"white"
                            ])
                        .toDic()!,
                    ]
        )
        
        // 图表视图对象调用图表模型对象,绘制最终图形
        aaChartView.aa_drawChartWithChartModel(chartModel)
    }
}
评论

全部评论(0)

回到顶部