AAInfographics---iOS 图表库的集大成者
2017-09-18 17:53
120 查看
AAInfographics
您所喜爱的AAInfographics
开源图表库同时更有Objective-C
版本可供使用,详情请点击以下链接
传送门
https://github.com/AAChartModel/AAChartKit
前言
AAInfographics,是
AAChartKit的
swift语言版本,是在流行的开源前端图表库Highcharts的基础上,封装的面向对象的,一组简单易用,极其精美的图表绘制控件.
适配
iOS 8, 支持
ARC,支持
swift 3.0语言,配置简单.
功能强大,支持
柱状图、
条形图、
折线图、
曲线图、
折线填充图、
曲线填充图、
雷达图、
极地图、
扇形图、
气泡图、
散点图、
金字塔图、
漏斗图、
区域范围图、
柱形范围图等多种图形
动画效果细腻精致,流畅优美.
类 Masonry
链式编程语法
AAChartView +AAChartModel = Chart,在 AAInfographics 封装库当中,遵循这样一个极简主义公式:
图表视图控件+图表模型=你想要的图表.
亲爱的,如果您使用时,觉得满意,请赏一颗星星✨,您的鼓励将是我继续努力的一大动力.
使用方法
准备工作
将项目demo中的文件夹AAChartKitFiles拖入到所需项目中.
正式开始
在你的视图控制器文件中添加import AAChartView.swift
创建视图AAChartView
aaChartView = AAChartView() aaChartView?.frame = CGRect(x:0,y:0,width:self.view.frame.size.width,height:self.view.frame.size.height) aaChartView?.contentHeight = self.view.frame.size.height self.view.addSubview(aaChartView!)
配置视图模型AAChartModel
常规方式配置 AAChartModel 模型对象属性
var chartModel = AAChartModel.init() chartModel.chartType = AAChartType.Column chartModel.title = "城市天气变化" chartModel.subtitle="2020年09月18日" chartModel.inverted = true chartModel.yAxisTitle = "摄氏度" chartModel.legendEnabled = true chartModel.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, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] ], [ "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] ]]
链式编程的方式配置 AAChartModel 模型对象属性
let chartModel = AAChartModel.init() .chartTypeSet(AAChartType.Column) .titleSet("城市天气变化") .subtitleSet("2020年09月18日") .invertedSet(true) .yAxisTitleSet("摄氏度") .legendEnabledSet(true) .seriesSet([ [ "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, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] ], [ "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] ]])
绘制图形
chartView?.aa_drawChartWithChartModel(chartModel)//图表视图对象调用图表模型对象,绘制最终图形
刷新图形
chartView?.aa_refreshChartWithChartModel(chartModel)//更新 AAChartModel 数据之后,刷新图表
特别说明
AAInfographics 中扇形图、气泡图都归属为特殊类型,所以想要绘制扇形图、气泡图,图表模型 AAChartModel 设置稍有不同,示例如下
绘制扇形图,你需要这样配置模型对象 AAChartModel
var chartModel = AAChartModel.init() chartModel.chartType = AAChartType.Pie chartModel.title = "主要浏览器市场占比" chartModel.subtitle = "虚拟数据" chartModel.dataLabelEnabled = true //是否直接显示扇形图数据 chartModel.series = [ [ type: "pie", name: "浏览器访问量占比", data: [ ["Firefox", 45.0], ["IE", 26.8], [ name: "Chrome", y: 12.8, sliced: true, selected: true ], ["Safari", 8.5], ["Opera", 6.2], ["Others", 0.7], ] ] ]
绘制气泡图,你需要这样配置模型对象 AAChartModel
var chartModel = AAChartModel.init() chartModel.chartType = AAChartType.Bubble chartModel.title = "AAChartKit气泡图演示" chartModel.subtitle = "随机数" chartModel.yAxisTitle = "摄氏度" chartModel.series = [ [ "name":"数据列 ONE", "data": [ [9, 81, 63], [98, 5, 89], [51, 50, 73], [41, 22, 14], [58, 24, 20], [78, 37, 34], [55, 56, 53], [18, 45, 70], [42, 44, 28], [3, 52, 59], [31, 18, 97], [79, 91, 63], [93, 23, 23], [44, 83, 22]] ], [ "name":"数据列 TWO", "data": [ [42, 38, 20], [6, 18, 1], [1, 93, 55], [57, 2, 90], [80, 76, 22], [11, 74, 96], [88, 56, 10], [30, 47, 49], [57, 62, 98], [4, 16, 16], [46, 10, 11], [22, 87, 89], [57, 91, 82], [45, 15, 98]] ], [ "name":"数据列 THREE", "data": [ [47, 47, 21], [20, 12, 4], [6, 76, 91], [38, 30, 60], [57, 98, 64], [61, 17, 80], [83, 60, 13], [67, 78, 75], [64, 12, 10], [30, 77, 82], [90, 63, 44], [91, 33, 17], [15, 67, 48], [54, 25, 81]] ] ]
绘制柱形范围图,你需要这样配置模型对象 AAChartModel
var chartModel = AAChartModel.init() chartModel.chartType = AAChartType.Columnrange chartModel.title = "城市气温变化起伏" chartModel.subtitle = "哥谭市" chartModel.yAxisTitle = "华氏度" chartModel.series = [ [ 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]] ] ]
当前已支持的图表类型有十种以上,说明如下
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" //柱形范围图 }
当前已支持的图表渲染动画类型有十种以上,说明如下
enum AAChartAnimationType:String{ case Linear = "linear" case Swing = "swing" 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 EaseInExpo = "easeInExpo" case EaseOutExpo = "easeOutExpo" case EaseInOutExpo = "easeInOutExpo" case EaseInSine = "easeInSine" case EaseOutSine = "easeOutSine" case EaseInOutSine = "easeInOutSine" case EaseInCirc = "easeInCirc" case EaseOutCirc = "easeOutCirc" case EaseInOutCirc = "easeInOutCirc" case EaseInElastic = "easeInElastic" case EaseOutElastic = "easeOutElastic" case EaseInOutElastic = "easeInOutElastic" case EaseInBack = "easeInBack" case EaseOutBack = "easeOutBack" case EaseInOutBack = "easeInOutBack" case EaseInBounce = "easeInBounce" case EaseOutBounce = "easeOutBounce" case EaseInOutBounce = "easeInOutBounce" }
AAChartModel一些重要属性经过配置之后的图形示例如下
line chart - 折线图column chart - 柱形图
bar chart - 条形图
special area chart one - 区域填充图一
special area chart two - 区域填充图二
special area chart three - 区域填充图三
radar chart - 雷达图
polar chart - 极地图
pie chart - 扇形图
the oval style column chart - 头部为椭圆形的柱形图
bubble chart - 气泡图
mixed chart - 混合图形
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? //折线连接点的半径长度
作者
An An_oo0oo_ o8888888o 88" . "88 (| -_- |) 0\ = /0 ___/`---'\___ .' \\| |// '. / \\||| : |||// \ / _||||| -:- |||||- \ | | \\\ - /// | | | \_| ''\---/'' |_/ | \ .-\__ '-' ___/-. / ___'. .' /--.--\ `. .'___ ."" '< `.___\_<|>_/___.' >' "". | | : `- \`.;`\ _ /`;.`/ - ` : | | \ \ `_. \_ __\ /__ _/ .-` / / =====`-.____`.___ \_____/___.-`___.-'===== `=---=' ******************************************************* ¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥ €€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€ $$$$$$$$$$$$$$$$$$$$$$$ BUDDHA_BLESS_YOU AWAY_FROM BUG
许可证
本项目使用 MIT许可证,详情请点击MIT LICENSE
附言
在 AAInfographics封装库的初始设计中,为提升
.js文件的加载速度,故将所依赖的
.js文件放置在本地.然而由于本项目功能较多,故放置于本地的附加
JavaScript文件库体积较大,整个
AAJSFiles文件夹下所有的
.js文件体积合计共有
5.3M左右(当然在工程打包压缩之后实际大小远小于此),若对工程文件体积大小较为敏感的使用者,可使用以下建议的替代方案
删除在本
AAInfographics项目文件中,
AAJSFiles文件夹下的
5项
.js文件.需要被删除的文件名称如下
AAJQueryLibrary.js
AAHighchartsLibrary.js
AAHighchartsMore.js
AAHighcharts-3d.js
AAFunnel.js
将
AAChartView.html文件中的以下内容
<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用户可根据自己的实际项目的开发需要,酌情选择最终是否使用本替代方案.
待办清单
支持图形加载完成后用户添加代理事件支持图形动态刷新全局内容
支持图形动态刷新纯数据
(series)内容
支持图形实时刷新纯数据并动态滚动
支持色彩图层渐变效果
支持3D图形效果,仅对
柱状图、
条形图、
扇形图、
散点图、
气泡图等部分图形有效
支持横屏(全屏)效果
支持自由设置图形渲染动画
支持已渲染图形生成图片文件
支持生成图片文件保存至系统相册
支持用户自由配置
AAOptions模型对象属性
支持图形堆叠
支持图形坐标轴反转
支持渲染散点图
支持渲染柱形范围图
支持渲染面积范围图
支持渲染面积范围均线图
支持渲染极地图
支持渲染折线直方图
支持渲染折线直方填充图
支持渲染矩形树状层级关系图
支持渲染活动刻度仪表图
支持为图形添加点击事件回调
相关文章推荐
- iOS在OC项目中集成Charts绘制图表框架
- iOS 统计图表绘制(UITableView、UIBezierPath)
- iOS - 图表Chart
- ios开发(二十)入门图表
- iOS 统计图表绘制(UITableView、UIBezierPath)
- [iOS]图表(UUChartView)
- iOS 绘制图表
- iOS -- 集成charts图表
- iOS财务管理、壁纸应用、带引线图表、导航栏、选择器、购物车动画等源码
- iOS轮询请求并在图表中动态显示
- iOS绘制图表时几种动画展示特效
- iOS 统计图表绘制(UITableView、UIBezierPath)
- 论坛源码推荐(5月22日):快速创建iOS原生图表 视图间的dynamic转场动画
- iOS程序猿之chart图表(PNChart)
- IOS 绘制图表
- 一个简单漂亮的iOS图表库:PNChart
- iOS 使用 Core Plot 绘制统计图表入门
- iOS 使用百度图表插件Echarts
- iOS轮询请求并在图表中动态显示
- iOS 各种学习资源demo链接汇总 (包含刷新,动画,图表,对话框等效果)