AAInfographics-LOGO.png

AAInfographics(AAChartKit-Swift)

----- 一款极其精美的开源图表框架AAChartKit现更有Swift版本可用

GitHub传送门

https://github.com/AAChartModel/AAChartKit-Swift

🌺🌺🌺 温馨提示: 请尽量不要在简书的评论区中提问,尤其不要在简书的私信区提问, 我很少能在简书的评论区和私信中及时回答并解决 AAChartKit 的相关问题. 有 AAChartKit 使用上的问题可以直接进入 AAChartKit 的 GitHub 主页的 issues 专区提问, 这样方便我集中管理 AAChartKit 的相关问题,也有益于后来者对于 AAChartKit 的理解和使用, AAChartKit 的 issues 专区传送门 https://github.com/AAChartModel/AAChartKit/issues

前言

AAInfographics,是 AAChartKit 的 swift语言版本,是在流行的开源前端图表框架Highcharts的基础上,封装的面向对象的,一组简单易用,极其精美的图表绘制控件.

功能特性

适配 iOS 6 +, 支持ARC,支持 swift 3.0及以上语言,配置简单.
功能强大,支持柱状图 、条形图 、折线图 、曲线图 、折线填充图 、曲线填充图、雷达图、极地图、扇形图、气泡图、散点图、区域范围图、柱形范围图、面积范围图、面积范围均线图、直方折线图、直方折线填充图、箱线图、瀑布图、热力图、桑基图、金字塔图、漏斗图、等十几种类型的图形,不可谓之不多.
动画效果细腻精致,流畅优美.有三十多种以上图形渲染动画效果可供选择,用户可自由设置渲染图形时的动画时间和动画类型,关于图形渲染动画类型,具体参见 AAInfographics 动画类型.
AAChartView + AAChartModel = Chart,在 AAInfographics 封装库当中,遵循这样一个极简主义公式:图表视图控件 + 图表模型 = 你想要的图表. 同另一个好用的iOS 开源图表库 AAChartKit 完全一致.
类 Masonry 链式编程语法, 一行代码即可配置完成 AAChartModel 模型对象实例.
简洁清晰,轻便易用. 最少仅仅需要 五行代码 即可完成整个图表的绘制工作(使用链式编程语法配置 AAChartModel 实例对象时,无论你写多少行代码,理论上只能算作是一行)(😜😜😜).

真机美图

同样具备完整功能的原`Objective-C`版本亦可供使用,详情请点击以下链接

传送门

https://github.com/AAChartModel/AAChartKit

安装

使用 CocoaPods (推荐)

添加

pod 'AAInfographics', :git => 'https://github.com/AAChartModel/AAChartKit-Swift.git'

到你的 Podfile 文件当中.

在终端中运行命令 pod install or pod update.
导入头文件 AAInfographics.

手动安装

下载 Demo AAInfographicsDemo
将 Demo 中的名为AAInfographics 的文件夹拖入至你的项目之中.

正式开始使用

在你的视图控制器文件中添加

import AAChartView.swift

创建视图AAChartView

        CGFloat chartViewWidth  = self.view.frame.size.width;
        CGFloat chartViewHeight = self.view.frame.size.height;
        aaChartView = AAChartView()
        aaChartView?.frame = CGRect(x:0,y:0,width:chartViewWidth,height:chartViewHeight)
        // 设置 aaChartView 的内容高度(content height)
        // aaChartView?.contentHeight = self.view.frame.size.height
        self.view.addSubview(aaChartView!)

配置视图模型AAChartModel

链式编程的方式配置 AAChartModel 模型对象属性

       let chartModel = AAChartModel()
            .chartType(.area)//图表类型
            .title("城市天气变化")//图表主标题
            .subtitle("2020年09月18日")//图表副标题
            .inverted(false)//是否翻转图形
            .yAxisTitle("摄氏度")// Y 轴标题
            .legendEnabled(true)//是否启用图表的图例(图表底部的可点击的小圆点)
            .tooltipValueSuffix("摄氏度")//浮动提示框单位后缀
            .categories(["Jan", "Feb", "Mar", "Apr", "May", "Jun",
                         "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"])
            .colorsTheme(["#fe117c","#ffc069","#06caf4","#7dffc0"])//主题颜色数组
            .series([
                AASeriesElement()
                    .name("东京")
                    .data([7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]),
                AASeriesElement()
                    .name("纽约")
                    .data([0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]),
                AASeriesElement()
                    .name("柏林")
                    .data([0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]),
                AASeriesElement()
                    .name("伦敦")
                    .data([3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]),
                    ])

绘制图形(创建 AAChartView 实例对象后,首次绘制图形调用此方法)

    /*图表视图对象调用图表模型对象,绘制最终图形*/
    chartView?.aa_drawChartWithChartModel(chartModel)

🌹🌹🌹 好了,至此,有关于绘制图形的任务,一切皆已经搞定!!! 你将得到你想要的任意图形!!!

更新图形内容

如果你需要更新图表内容,你应该阅读以下内容,根据你的实际需要,选择调用适合你的函数

仅仅刷新图形的series数据内容(首次绘制图形完成之后,后续刷新图表数据均建议调用此方法)

    /*仅仅更新了图表的series数组数据,不改动图表的其他内容*/
    aaChartView?.aa_onlyRefreshTheChartDataWithChartModelSeries(chartModelSeriesArray)

刷新图形除数据属性 series 以外的其他属性(首次绘制图形完成之后,后续刷新图表的属性均建议调用此方法注意:仅仅刷新图形数据,则建议使用上面的👆aa_onlyRefreshTheChartDataWithChartModelSeries方法)

    /*更新 AAChartModel 整体内容(如修改了图表的类型,将 column chart 改为 area chart)之后,刷新图表*/
    aaChartView?.aa_refreshChartWholeContentWithChartModel(aaChartModel)

AAChartModel一些重要属性经过配置之后的图形示例如下

line chart - 折线图

LineChart.png

column chart - 柱形图

ColumnChart.png

bar chart - 条形图

BarChart.png

special area chart one - 常规折线区域填充图

AreaChart

special area chart two - 带有负数的区域填充图

AreaChartOne.png

special area chart three - 堆积效果的区域填充图

AreaChartTwo.png

polar chart - 极地图

PolarChart.png

radar chart - 雷达图

RadarChart.png

pie chart - 扇形图

PieChart.png

bubble chart - 气泡图

BubbleChart.png

scatter chart - 散点图

ScatterChart.png

arearange chart - 区域范围图

ArearangeChart.png

step area chart - 直方折线填充图

StepAreaChart.png

mixed chart - 混合图形

MixedChart.png

特别说明

特殊类型图表配置

AAInfographics 中扇形图、气泡图都归属为特殊类型,所以想要绘制扇形图、气泡图,图表模型 AAChartModel 的数据属性series设置稍有不同,示例如下

绘制扇形图,你需要这样配置模型对象 AAChartModel

            aaChartModel = AAChartModel()
                .chartType(AAChartType.Pie)
                .backgroundColor("#ffffff")
                .title("LANGUAGE MARKET SHARES JANUARY,2020 TO MAY")
                .subtitle("virtual data")
                .dataLabelEnabled(true)//是否直接显示扇形图数据
                .yAxisTitle("℃")
                .series(
                    [
                        AASeriesElement()
                            .name("Language market shares")
                            .innerSize("20%")//内部圆环半径大小占比(内部圆环半径/扇形图半径),
                            .allowPointSelect(false)
                            .data([
                                ["Java"  ,67],
                                ["Swift",999],
                                ["Python",83],
                                ["OC"    ,11],
                                ["Go"    ,30],
                                ])
                            .toDic()!,
                        ]
                    
            )

绘制气泡图,你需要这样配置模型对象 AAChartModel

            aaChartModel = AAChartModel()
                .chartType(AAChartType.Bubble)
                .title("AACHARTKIT BUBBLES")
                .subtitle("JUST FOR FUN")
                .yAxisTitle("℃")
                .gradientColorEnable(true)
                .colorsTheme(["#0c9674","#7dffc0","#d11b5f","#facd32","#ffffa0","#EA007B"])
                .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],
                                   [57, 86, 31],
                                   [33, 24, 22]
                                ])
                            .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],
                                   [54, 25, 81],
                                   [55, 66, 11]
                                ])
                            .toDic()!,
                        AASeriesElement()
                            .name("BubbleThree")
                            .data([[47, 47, 21],
                                   [20, 12, 66],
                                   [6,  76, 91],
                                   [38, 30, 60],
                                   [57, 98, 64],
                                   [61, 47, 80],
                                   [83, 60, 13],
                                   [67, 78, 75],
                                   [64, 12, 55],
                                   [30, 77, 82],
                                   [88, 66, 13]
                                ])
                            .toDic()!,
                        ]
            )

绘制柱形范围图,你需要这样配置模型对象 AAChartModel

            aaChartModel = AAChartModel()
                .chartType(AAChartType.Columnrange)
                .title("TEMPERATURE VARIATION BY MONTH")
                .subtitle("observed in Gotham city")
                .yAxisTitle("℃")
                .categories(["January", "February", "March", "April", "May", "June",
                             "July", "August", "September", "October", "November", "December"])
                .dataLabelEnabled(true)
                .inverted(true)//x 轴是否垂直翻转
                .series(
                    [
                        AASeriesElement()
                            .name("temperature")
                            .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()!,
                        ]
            )

NOTE: 关于更多类型特殊图表的 AAChartModel实例对象属性配置,详情请见 AAInfographics 工程 Demo 中的SpecialChartVC.swift文件内容,查看文件内容详情请点击这里,您也可以选择下载 Demo 后,在 Xcode 中查看 AAInfographics 的SpecialChartVC.swift内容

当前已支持的图表类型有十种以上,说明如下

enum AAChartType:String {
    case Column          = "column"          //柱形图
    case Bar             = "bar"             //条形图
    case Area            = "area"            //折线区域填充图
    case AreaSpline      = "areaspline"      //曲线区域填充图
    case Line            = "line"            //折线图
    case Spline          = "spline"          //曲线图
    case Scatter         = "scatter"         //散点图
    case Pie             = "pie"             //扇形图
    case Bubble          = "bubble"          //气泡图
    case Pyramid         = "pyramid"         //金字塔图
    case Funnel          = "funnel"          //漏斗图
    case ColumnRange     = "columnrange"     //柱形范围图
    case AreaRange       = "arearange"       //折线区域范围图
    case AreaSplineRange = "areasplinerange" //曲线区域范围图
    case Boxplot         = "boxplot"         //箱线图
    case Waterfall       = "waterfall"       //瀑布图
    case Polygon         = "polygon"         //多边形图
}

当前已支持的图表手势缩放类型共有三种,说明如下

enum AAChartZoomType:String {
    case None = "none"   //禁用图表手势缩放功能(默认禁用手势缩放)
    case X    = "x"      //支持图表 X 轴横向缩放
    case Y    = "y"      //支持图表 Y 轴纵向缩放
    case XY   = "xy"     //支持图表等比例缩放
}

NOTE:例如,设置了AAChartModel的缩放属性zoomType为AAChartZoomType.X,并且将图表进行了手势放大之后,这时候如果想要左右滑动图表,可以使用 双指点按 屏幕中的AAChartView视图区域进行 左右拖动 即可.同时屏幕的右上角会自动出现一个标题为 "恢复缩放" 的按钮,点击恢复缩放,图表大小和位置将会回归到原初的样式.

当前已支持的图表渲染动画类型有三十种以上,说明如下

enum AAChartAnimationType:String {
    case EaseInQuad     = "easeInQuad"
    case EaseOutQuad    = "easeOutQuad"
    case EaseInOutQuad  = "easeInOutQuad"
    case EaseInCubic    = "easeInCubic"
    case EaseOutCubic   = "easeOutCubic"
    case EaseInOutCubic = "easeInOutCubic"
    case EaseInQuart    = "easeInQuart"
    case EaseOutQuart   = "easeOutQuart"
    case EaseInOutQuart = "easeInOutQuart"
    case EaseInQuint    = "easeInQuint"
    case EaseOutQuint   = "easeOutQuint"
    case EaseInOutQuint = "easeInOutQuint"
    case EaseInSine     = "easeInSine"
    case EaseOutSine    = "easeOutSine"
    case EaseInOutSine  = "easeInOutSine"
    case EaseInExpo     = "easeInExpo"
    case EaseOutExpo    = "easeOutExpo"
    case EaseInOutExpo  = "easeInOutExpo"
    case EaseInCirc     = "easeInCirc"
    case EaseOutCirc    = "easeOutCirc"
    case EaseInOutCirc  = "easeInOutCirc"
    case EaseOutBounce  = "easeOutBounce"
    case EaseInBack     = "easeInBack"
    case EaseOutBack    = "easeOutBack"
    case EaseInOutBack  = "easeInOutBack"
    case Elastic        = "elastic"
    case SwingFromTo    = "swingFromTo"
    case SwingFrom      = "swingFrom"
    case SwingTo        = "swingTo"
    case Bounce         = "bounce"
    case BouncePast     = "bouncePast"
    case EaseFromTo     = "easeFromTo"
    case EaseFrom       = "easeFrom"
    case EaseTo         = "easeTo"
}

以下是AAInfographics其中十种图表渲染动画类型

Back	Bounce	Circ	Cubic	Elastic

Expo	Quad	Quart	Quint	Sine

关于`AAChartModel` 属性说明

AAChartModel 主要属性说明

属性名称	属性类型	描述	取值范围
title	String	图表主标题	任意有效的字符串
subtitle	String	图表副标题	任意有效的字符串
chartType	AAChartType	图表类型,可以为`AAChartType`枚举字符串当中指定的任意有效类型.其中有支持`柱状图` 、`条形图` 、`折线图` 、`曲线图` 、`折线填充图` 、`曲线填充图`、`雷达图`、`扇形图`、`气泡图`、`散点图`、`金字塔图`、`漏斗图`、`区域范围图`、`柱形范围图`等多种图形	AAChartType.Column, AAChartType.Bar, AAChartType.Area, AAChartType.AreaSpline, AAChartType.Line, AAChartType.Spline, AAChartType.Pie, AAChartType.Bubble, AAChartType.Scatter, AAChartType.Pyramid, AAChartType.Funnel, AAChartType.Arearange, AAChartType.Columnrange
stacking	AAChartStackingType	是否将图表每个数据列的值叠加在一起。默认的值为`AAChartStackingType.False`，即禁用堆叠样式效果.另有常规堆叠样式和百分比堆叠样式可供选择	AAChartStackingType.False, AAChartStackingType.Normal, AAChartStackingType.Percent
symbol	AAChartSymbolType	预定义的图表曲线连接点的样式类型.其可供选择的值有`圆`、`正方形`、`钻石`、`常规三角形`和`倒三角形`,默认为混合样式	AAChartSymbolType.Circle, AAChartSymbolType.Square, AAChartSymbolType.Diamond, AAChartSymbolType.Triangle, AAChartSymbolType.Triangle_down

AAChartModel 所有属性列表说明

private var animationType:String?       //动画类型
private var title:String?               //标题内容
private var subtitle:String?            //副标题内容
private var chartType:String?           //图表类型
private var stacking:String?            //堆积样式
private var symbol:String?              //折线曲线连接点的类型："circle", "square", "diamond", "triangle","triangle-down"，默认是"circle"
private var zoomType:String?            //缩放类型 AAChartZoomTypeX表示可沿着 x 轴进行手势缩放
private var inverted:Bool?              //x 轴是否垂直
private var xAxisReversed:Bool?         //x 轴翻转
private var yAxisReversed:Bool?         //y 轴翻转
private var crosshairs:Bool?            //是否显示准星线(默认显示)
private var gradientColorEnable:Bool?   //是否要为渐变色
private var polar:Bool?                 //是否极化图形(变为雷达图)
private var dataLabelEnabled:Bool?      //是否显示数据
private var xAxisLabelsEnabled:Bool?    //x轴是否显示数据
private var categories:Array<Any>?      //x轴是否显示数据
private var xAxisGridLineWidth:Int?     //x轴网格线的宽度
private var yAxisLabelsEnabled:Bool?    //y轴是否显示数据
private var yAxisTitle:String?          //y轴标题
private var yAxisGridLineWidth:Int?     //y轴网格线的宽度
private var colorsTheme:Array<Any>?     //图表主题颜色数组
private var series:Array<Any>?          //图表的主题数据列数组
private var legendEnabled:Bool?         //是否显示图例
private var legendLayout:String?        //图例数据项的布局。布局类型： "horizontal" 或 "vertical" 即水平布局和垂直布局 默认是：horizontal.
private var legendAlign:String?         //设定图例在图表区中的水平对齐方式，合法值有 left，center 和 right。
private var legendVerticalAlign:String? //设定图例在图表区中的垂直对齐方式，合法值有 top，middle 和 bottom。垂直位置可以通过 y 选项做进一步设定
private var backgroundColor:String?     //图表背景色
private var options3dEnable:Bool?       //是否3D化图形(仅对条形图,柱状图有效)
private var options3dAlpha:Int?
private var  options3dBeta:Int?
private var options3dDepth:Int?         //3D图形深度
private var borderRadius:Int?           //柱状图长条图头部圆角半径(可用于设置头部的形状,仅对条形图,柱状图有效)
private var markerRadius:Int?           //折线连接点的半径长度

附言

在 AAInfographics 数据可视化图形框架的初始设计中,为提升.js文件的加载速度,故将所依赖的.js文件放置在本地.然而由于本项目功能较多,故放置于本地的附加JavaScript文件库体积较大,整个AAJSFiles文件夹下所有的.js文件体积合计共有250KB左右(当然在工程打包压缩之后实际大小远小于此),若对工程文件体积大小较为敏感的使用者,可使用以下建议的替代方案

删除在本AAInfographics项目文件中,AAJSFiles文件夹下的4项.js文件.需要被删除的文件名称如下

AAHighchartsLibrary.js
AAHighchartsMore.js
AAFunnel.js

将AAChartView.html文件中的以下内容

<script src="AAHighchartsLib.js">
</script>
<script src="AAHighchartsMore.js">
</script>
<script src="AAFunnel.js">
</script>

替换为

<script src="https://img.hcharts.cn/highcharts/highcharts.js">
</script>
<script src="https://img.hcharts.cn/highcharts/highcharts-more.js">
</script>

即可.

此方案是将原本加载放置在本地的.js依赖文件改为了加载放置在网络上的.js文件,减小了本地文件大小,但有可能会有一定的网络延迟(0.5s以内),所以建议AAInfographics用户可根据自己的实际项目的开发需要,酌情选择最终是否使用本替代方案.

作者

image

An An


                       _oo0oo_
                      o8888888o
                      88" . "88
                      (| -_- |)
                      0\  =  /0
                    ___/`---'\___
                  .' \\|     |// '.
                 / \\|||  :  |||// \
                / _||||| -:- |||||- \
               |   | \\\  -  /// |   |
               | \_|  ''\---/''  |_/ |
               \  .-\__  '-'  ___/-. /
             ___'. .'  /--.--\  `. .'___
          ."" '<  `.___\_<|>_/___.' >' "".
         | | :  `- \`.;`\ _ /`;.`/ - ` : | |
         \  \ `_.   \_ __\ /__ _/   .-` /  /
     =====`-.____`.___ \_____/___.-`___.-'=====
                       `=---='
*******************************************************
     ¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥
         €€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€
               $$$$$$$$$$$$$$$$$$$$$$$  
                   BUDDHA_BLESS_YOU       
                      AWAY_FROM
                         BUG

源代码⛓

语言版本	项目名称	源代码链接
Swift	AAInfographics	https://github.com/AAChartModel/AAChartKit-Swift
Objective C	AAChartKit	https://github.com/AAChartModel/AAChartKit

许可证

image

本项目 AAInfographics使用 MIT许可证,详情请点击MIT LICENSE

联系方式

🌕 🌖 🌗 🌘 暖心提示 🌑 🌒 🌓 🌔
如果有任何使用上的问题,随时欢迎您在 GitHub 上向我提 issue.
GitHub Issues : https://github.com/AAChartModel/AAChartKit-Swift/issues

如果您想参与到此项目的开源活动中来,也同样随时欢迎您联系我
GitHub : https://github.com/AAChartModel
StackOverflow : https://stackoverflow.com/users/7842508/codeforu
JianShu : http://www.jianshu.com/u/f1e6753d4254
SegmentFault : https://segmentfault.com/u/huanghunbieguan

待办清单

支持图形加载完成后用户添加代理事件
支持图形动态刷新全局内容
支持图形动态刷新纯数据(series)内容
支持图形实时刷新纯数据并动态滚动
支持色彩图层渐变效果
支持3D图形效果,仅对柱状图、条形图、扇形图、散点图、气泡图等部分图形有效
支持横屏(全屏)效果
支持自由设置图形渲染动画
支持已渲染图形生成图片文件
支持生成图片文件保存至系统相册
支持用户自由配置AAOptions模型对象属性
支持图形堆叠
支持图形坐标轴反转
支持渲染散点图
支持渲染柱形范围图
支持渲染面积范围图
支持渲染面积范围均线图
支持渲染极地图
支持渲染折线直方图
支持渲染折线直方填充图
支持渲染矩形树状层级关系图
支持渲染活动刻度仪表图
支持为图形添加点击事件回调

iOS 图表框架AAChartKit-Swift📈📊🚀 强大、精美、易用的开源iOS图表

AAInfographics(AAChartKit-Swift)

----- 一款极其精美的开源图表框架AAChartKit现更有Swift版本可用

GitHub传送门

https://github.com/AAChartModel/AAChartKit-Swift

前言

功能特性

真机美图

同样具备完整功能的原Objective-C版本亦可供使用,详情请点击以下链接

传送门

https://github.com/AAChartModel/AAChartKit

安装

使用 CocoaPods (推荐)

手动安装

正式开始使用

更新图形内容

AAChartModel一些重要属性经过配置之后的图形示例如下

line chart - 折线图

column chart - 柱形图

bar chart - 条形图

special area chart one - 常规折线区域填充图

special area chart two - 带有负数的区域填充图

special area chart three - 堆积效果的区域填充图

polar chart - 极地图

radar chart - 雷达图

pie chart - 扇形图

bubble chart - 气泡图

scatter chart - 散点图

arearange chart - 区域范围图

step area chart - 直方折线填充图

mixed chart - 混合图形