当前位置: > > > Swift - 第三方图表库AAInfographics使用详解9(区域范围图)

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)//翻转图形
    //...
评论0