返回 导航

Swift

hangge.com

Swift - 第三方图表库AAInfographics使用详解1（安装配置、基本用法）

作者：hangge | 2019-02-03 11:09
   AAInfographics 是 AAChartKit 的 swift 语言版本，是在流行的开源前端图表框架 Highcharts 的基础上，封装的面向对象的，一组简单易用，极其精美的图表绘制控件。其作者号称 AAInfographics 可能是这个星球上 UI 最精致的第三方 iOS 开源图表框架了。

一、基本介绍

1，功能特性

  • 环境友好，兼容性强：适配 iOS 8 +, 支持 ARC，支持 swift 语言，配置简单
  • 功能强大，类型多样：支持柱状图 、条形图 、折线图 、曲线图 、折线填充图 、曲线填充图、雷达图、极地图、扇形图、气泡图、散点图、区域范围图、柱形范围图、面积范围图、面积范围均线图、直方折线图、直方折线填充图、箱线图、瀑布图、热力图、桑基图、金字塔图、漏斗图、等二十几种类型的图形
  • 交互式图形动画：有着清晰和充满细节的用户交互方式，有三十多种以上渲染动画效果可供选择，用户可自由设置渲染图形时的动画时间和动画类型。
  • 支持手势缩放：支持图表的手势缩放和拖动阅览
  • 极简主义.：在 AAInfographics 数据可视化图形框架当中，遵循这样一个极简主义公式：图表视图控件 + 图表模型 = 你想要的图表。
  • 链式编程语法：支持类 Masonry 链式编程语法,一行代码即可配置完成 AAChartModel 模型对象实例.
  • 简洁清晰,轻便易用：最少仅仅需要 五行代码 即可完成整个图表的绘制工作(使用链式编程语法配置 )

2，效果图


3，安装配置

（1）从 GitHub 上下载最新的代码：https://github.com/AAChartModel/AAChartKit-Swift
（2）将下载下来的源码包中 AAInfographics 文件夹拖拽至你的工程中即可。

二、基本用法

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 - 100
        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)
    }
}
源码下载：hangge_2287.zip

2，更新图表数据

如果仅仅需要刷新图形的 series 数据内容，可以使用下面方法进行更新：
//首次绘制图形完成之后,后续刷新图表数据均建议调用此方法
aaChartView.aa_onlyRefreshTheChartDataWithChartModelSeries(chartModelSeriesArray)

3，更新整个图表模型

如果刷新图形除数据属性 series 以外的其他属性（比如：改了图表的类型,将 column chart 改为 area chart），可以使用下面方法进行更新整个图表：
//更新 AAChartModel 整体内容(首次绘制图形完成之后,后续刷新图表的属性均建议调用此方法)
aaChartView.aa_refreshChartWholeContentWithChartModel(aaChartModel)

4，显示、隐藏图表数据

（1）隐藏或显示所有图表数据。
             
// 隐藏所有图表数据
aaChartView.isSeriesHidden = true

// 显示所有图表数据
aaChartView.isSeriesHidden = false

（2）隐藏或显示指定系列（Series）的数据。
             
// 隐藏第二个系列数据
aaChartView.aa_hideTheSeriesElementContentWithSeriesElementIndex(1)

// 显示第二个系列数据
aaChartView.aa_showTheSeriesElementContentWithSeriesElementIndex(1)
评论

全部评论（0）

回到顶部