AAInfographics(AAChartKit-Swift)
----- 一款极其精美的开源图表库AAChartKit现更有Swift版本可用
您所喜爱的AAInfographics开源图表库同时更有Objective-C版本可供使用,详情请点击以下链接
传送门
https://github.com/AAChartMod...
前言
AAInfographics,是 AAChartKit 的 swift语言版本,是在流行的开源前端图表库Highcharts的基础上,封装的面向对象的,一组简单易用,极其精美的图表绘制控件.
功能特性
- 适配
iOS 6 +,支持ARC,支持swift 3.0及以上语言,配置简单. - 功能强大,支持
柱状图、条形图、折线图、曲线图、折线填充图、曲线填充图、雷达图、极地图、扇形图、气泡图、散点图、区域范围图、柱形范围图、面积范围图、面积范围均线图、直方折线图、直方折线填充图、箱线图、瀑布图、热力图、桑基图、金字塔图、漏斗图、等十几种类型的图形,不可谓之不多. - 动画 效果细腻精致,流畅优美.有三十多种以上图形渲染动画效果可供选择,用户可自由设置渲染图形时的动画时间和动画类型,关于图形渲染动画类型,具体参见 AAInfographics 动画类型.
-
AAChartView +AAChartModel = Chart,在 AAInfographics 封装库当中,遵循这样一个极简主义公式:图表视图控件+图表模型=你想要的图表. 同另一个好用的 iOS 开源图表库 AAChartKit 完全一致. - 类 Masonry
链式编程语法,一行代码即可配置完成AAChartModel模型对象实例. - 简洁清晰,轻便易用. 最少仅仅需要 五行代码 即可完成整个图表的绘制工作(使用链式编程语法配置
AAChartModel实例对象时,无论你写多少行代码,理论上只能算作是一行)(???)
真机美图
| Column Chart 柱状图 | Columnrange Chart 条形范围图 | Area Chart 区域填充图 |
|---|---|---|
| Line Chart 多组数据折线图 | Step Area Chart 直方折线填充图 | Step Line Chart 直方折线图 |
|---|---|---|
使用方法
准备工作
- 将项目
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.init()
.chartType(AAChartType.Column)//图表类型
.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([
[
"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]
],[
"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]
],[
"name": "柏林","data": [-0.9,0.6,3.5,8.4,13.5,18.6,17.9,14.3,9.0,3.9,1.0]
],[
"name": "伦敦","data": [3.9,4.2,8.5,11.9,15.2,16.6,14.2,10.3,6.6,4.8]
]])
/*图表视图对象调用图表模型对象,绘制最终图形*/ chartView?.aa_drawChartWithChartModel(chartModel)
/*仅仅更新了图表的series数组数据,不改动图表的其他内容*/ chartView?.aa_onlyRefreshTheChartDataWithChartModelSeries(chartModelSeriesArray)
- 刷新图形整体内容
/*更新 AAChartModel 整体内容(如修改了图表的类型,将 column chart 改为 area chart)之后,刷新图表*/ chartView?.aa_refreshChartWholeContentWithChartModel(chartModel)
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 - 混合图形
特别说明
特殊类型图表配置
AAInfographics 中扇形图、气泡图都归属为特殊类型,所以想要绘制扇形图、气泡图,图表模型 AAChartModel 的数据属性series设置稍有不同,示例如下
- 绘制扇形图,你需要这样配置模型对象 AAChartModel
aaChartModel = AAChartModel.init()
.chartType(AAChartType.Pie)
.title("LANGUAGE MARKET SHARES JANUARY,2020 TO MAY")
.subtitle("virtual data")
.dataLabelEnabled(false)//是否直接显示扇形图数据
.yAxisTitle("℃")
.series(
[
[
"name": "Language market shares","innerSize":"50%","data": [
["Java",67],["Swift",44],["Python",83],["OC",11],["Ruby",42],["PHP",31],["Go",63],["C",24],["C#",888],["C++",66],]
],]
- 绘制气泡图,你需要这样配置模型对象 AAChartModel
aaChartModel = AAChartModel.init()
.chartType(AAChartType.Bubble)
.title("AACHARTKIT BUBBLES")
.subtitle("JUST FOR FUN")
.yAxisTitle("℃")
.series(
[
[
"data": [[97,36,79],[94,74,60],[68,76,58],[64,87,56],27,73],[74,99,[7,93,87],[51,69,40],[38,23,33],[57,86,31]]
],[
"data": [[25,10,[2,75,59],[11,54,8 ],[86,55,93],[5,3,[90,63,[91,33,17],[97,[15,67,48],[54,25,81]]
],[
"data": [[47,47,21],[20,12,4 ],[6,91],30,98,64],[61,17,80],[83,60,13],[67,78,75],10],[30,77,82]]
]
]
)
- 绘制柱形范围图,你需要这样配置模型对象 AAChartModel
aaChartModel = AAChartModel.init()
.chartType(AAChartType.Columnrange)
.title("TEMPERATURE VARIATION BY MONTH")
.subtitle("observed in Gotham city")
.yAxisTitle("℃")
.categories(["January","February","March","April","June","July","August","September","October","November","December"])
.dataLabelEnabled(true)
//.inverted(true)
.series(
[
[
"name":"temperature","data":[
[-9.7,9.4],[-8.7,6.5],[-3.5,[-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]
]]]
)
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" //区域范围图
}
当前已支持的图表渲染动画类型有三十种以上,说明如下
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"
}
关于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 所有属性列表说明
public var animationType:String? //动画类型 public var title:String? //标题内容 public var subtitle:String? //副标题内容 public var chartType:String? //图表类型 public var stacking:String? //堆积样式 public var symbol:String? //折线曲线连接点的类型："circle","square","diamond","triangle","triangle-down"，默认是"circle" public var zoomType:String? //缩放类型 AAChartZoomTypeX表示可沿着 x 轴进行手势缩放 public var inverted:Bool? //x 轴是否垂直 public var xAxisReversed:Bool? //x 轴翻转 public var yAxisReversed:Bool? //y 轴翻转 public var crosshairs:Bool? //是否显示准星线(默认显示) public var gradientColorEnable:Bool? //是否要为渐变色 public var polar:Bool? //是否极化图形(变为雷达图) public var dataLabelEnabled:Bool? //是否显示数据 public var xAxisLabelsEnabled:Bool? //x轴是否显示数据 public var categories:Array<Any>? //x轴是否显示数据 public var xAxisGridLineWidth:Int? //x轴网格线的宽度 public var yAxisLabelsEnabled:Bool? //y轴是否显示数据 public var yAxisTitle:String? //y轴标题 public var yAxisGridLineWidth:Int? //y轴网格线的宽度 public var colorsTheme:Array<Any>? //图表主题颜色数组 public var series:Array<Any>? //图表的主题数据列数组 public var legendEnabled:Bool? //是否显示图例 public var legendLayout:String? //图例数据项的布局。布局类型： "horizontal" 或 "vertical" 即水平布局和垂直布局 默认是：horizontal. public var legendAlign:String? //设定图例在图表区中的水平对齐方式，合法值有 left，center 和 right。 public var legendVerticalAlign:String? //设定图例在图表区中的垂直对齐方式，合法值有 top，middle 和 bottom。垂直位置可以通过 y 选项做进一步设定 public var backgroundColor:String? //图表背景色 public var options3dEnable:Bool? //是否3D化图形(仅对条形图,柱状图有效) public var options3dAlpha:Int? public var options3dBeta:Int? public var options3dDepth:Int? //3D图形深度 public var borderRadius:Int? //柱状图长条图头部圆角半径(可用于设置头部的形状,仅对条形图,柱状图有效) public var markerRadius:Int? //折线连接点的半径长度
附言
在 AAInfographics 封装库的初始设计中,为提升.js文件的加载速度,故将所依赖的.js文件放置在本地.然而由于本项目功能较多,故放置于本地的附加JavaScript文件库体积较大,整个AAJSFiles文件夹下所有的.js文件体积合计共有5.3M左右(当然在工程打包压缩之后实际大小远小于此),若对工程文件体积大小较为敏感的使用者,可使用以下建议的替代方案
- AAJQueryLibrary.js
- AAHighchartsLibrary.js
- AAHighchartsMore.js
- AAHighcharts-3d.js
- AAFunnel.js
<script src="AAJQueryLibrary.js"> </script> <script src="AAHighchartsLibrary.js"> </script> <script src="AAHighchartsMore.js"> </script> <script src="AAHighcharts-3d.js"> </script> <script src="AAFunnel.js"> </script>
替换为
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.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用户可根据自己的实际项目的开发需要,酌情选择最终是否使用本替代方案.
作者
An An
_oo0oo_
o8888888o
88" . "88
(| -_- |)
0\ = /0
___/`---'\___
.' \\| |// '.
/ \\||| : |||// \
/ _||||| -:- |||||- \
| | \\\ - /// | |
| \_| ''\---/'' |_/ |
\ .-\__ '-' ___/-. /
___'. .' /--.--\ `. .'___
."" '< `.___\_<|>_/___.' >' "".
| | : `- \`.;`\ _ /`;.`/ - ` : | |
\ \ `_. \_ __\ /__ _/ .-` / /
=====`-.____`.___ \_____/___.-`___.-'=====
`=---='
*******************************************************
¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥
€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€
$$$$$$$$$$$$$$$$$$$$$$$
BUDDHA_BLESS_YOU
AWAY_FROM
BUG
许可证
本项目 AAInfographics使用 MIT许可证,详情请点击MIT LICENSE
联系方式
- ??? 温馨提示 ???
- 如果有任何使用上的问题,随时欢迎您在 GitHub 上向我提 issue.
- GitHub Issues : https://github.com/AAChartMod...
- 如果您想参与到此项目的开源活动中来,也同样随时欢迎您联系我
- GitHub : https://github.com/AAChartModel
- StackOverflow : https://stackoverflow.com/use...
- JianShu : http://www.jianshu.com/u/f1e6...
- SegmentFault : https://segmentfault.com/u/hu...
待办清单
- [x] 支持图形加载完成后用户添加代理事件
- [x] 支持图形动态刷新全局内容
- [x] 支持图形动态刷新纯数据
(series)内容 - [ ] 支持图形实时刷新纯数据并动态滚动
- [x] 支持色彩图层渐变效果
- [x] 支持3D图形效果,仅对
柱状图、条形图、扇形图、散点图、气泡图等部分图形有效 - [ ] 支持横屏(全屏)效果
- [ ] 支持自由设置图形渲染动画
- [ ] 支持已渲染图形生成图片文件
- [ ] 支持生成图片文件保存至系统相册
- [x] 支持用户自由配置
AAOptions模型对象属性 - [x] 支持图形堆叠
- [x] 支持图形坐标轴反转
- [x] 支持渲染散点图
- [x] 支持渲染柱形范围图
- [x] 支持渲染面积范围图
- [ ] 支持渲染面积范围均线图
- [x] 支持渲染极地图
- [ ] 支持渲染折线直方图
- [ ] 支持渲染折线直方填充图
- [ ] 支持渲染矩形树状层级关系图
- [ ] 支持渲染活动刻度仪表图
- [ ] 支持为图形添加点击事件回调
