AAChartKit Documentation

An elegant modern declarative data visualization chart framework for iOS, iPadOS and macOS. Extremely powerful, supports line, spline, area, areaspline,...

4,765 stars Objective-C 3 files · ~10,501 tokens #area-chart#bubble-chart#chart#chart-types#charting-library#column-chart#draw#dynamic
RAW Doc

Technical Documentation: AAChartModel/AAChartKit

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (`CHINESE-README.md`)

AAChartKit










[ **English Document 🇬🇧** ](https://github.com/AAChartModel/AAChartKit) | [ **简体中文文档 🇨🇳** ](https://github.com/AAChartModel/AAChartKit/blob/master/CHINESE-README.md)

您所喜爱的 ***AAChartKit*** 开源图表库现在更有`swift`版本可供使用,详情请点击以下链接

传送门

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

前言

AAChartKit 项目,是AAInfographics的 Objective-C 语言版本,是在流行的开源前端图表库Highcharts的基础上,封装的面向对象的,一组简单易用,极其精美的图表绘制控件.可能是这个星球上 UI 最精致的第三方 iOS 开源图表库了(✟我以无神论者的名义向上帝起誓🖐,我真的没有在说鬼话✟)

功能特性

  • 🎂 环境友好,兼容性强. 适配 iOS 8+, 支持iOS、 iPad OS、macOS, 支持 Objective-C语言, 同时更有 Swift 语言版本 AAInfographics 、 Java 语言版本 AAChartCore 、Kotlin 语言版本 AAChartCore-Kotlin 可供使用, 配置导入工程简单易操作. 支持的所有语言版本及连接,参见此列表.

  • 🚀 功能强大,类型多样 -. 支持柱状图 、条形图 、折线图 、曲线图 、折线填充图 、曲线填充图、雷达图、极地图、扇形图、气泡图、散点图、区域范围图、柱形范围图、面积范围图、面积范围均线图、直方折线图、直方折线填充图、箱线图、瀑布图、热力图、桑基图、金字塔图、漏斗图、等二十几种类型的图形,不可谓之不多.

  • 📝 现代化声明式语法. 与过往的命令式编程技巧不同, 在 AAChartKit 中绘制任意一款自定义图表, 你完全无需关心挠人的内在实现细节. 描述你所要得到的, 你便得到你所描述的.

  • 🔬 细致入微的用户自定义功能. 基础的主标题、副标题、X 轴、Y 轴自不必谈, 从纵横的交互准星线、跟手的浮动提示框, 到切割数值的值域分割线、值域分割颜色带, 再到细小的线条类型,标记点样式, 各种细微的图形子组件, 应有尽有. 以至于不论是极简、抽象的小清新风格, 还是纷繁复杂的严肃商业派头, 均可完美驾驭.

  • 🎮 交互式图形动画 . 有着清晰和充满细节的用户交互方式, 与此同时, 图形渲染动画效果细腻精致, 流畅优美. 有三十多种以上渲染动画效果可供选择, 用户可自由设置渲染图形时的动画时间和动画类型, 关于图形渲染动画类型,具体参见 AAChartKit 动画类型.

  • 🦋 极简主义 . AAChartView + AAChartModel = Chart,在 AAChartKit 图表框架当中,遵循这样一个极简主义公式:图表视图控件 + 图表模型 = 你想要的图表. 同另一款强大而又精美的图表库AAInfographics完全一致.

  • ⛓ 链式编程语法 . 支持类 Masonry 链式编程语法, 一行代码即可配置完成 AAChartModel模型对象实例.

  • 🎈 简洁清晰,轻便易用 . 最少仅仅需要 五行代码 即可完成整个图表的绘制工作(使用链式编程语法配置 AAChartModel 实例对象时, 无论你写多少行代码, 理论上只能算作是一行). 🤪🤪🤪

  • 🖱 交互事件回调 支持图表的用户点击事件及单指滑动事件, 可在此基础上实现双表联动乃至多表联动,以及其他更多更复杂的自定义用户交互效果.

  • 👌 支持手势缩放 . 支持各个方向的图表手势缩放和拖动阅览, 手势缩放类型具体参见 AAChartKit 手势缩放类型, 默认禁用手势缩放功能.

真机美图

Column Chart 柱状图 Column Range Chart 条形范围图 Area Chart 区域填充图
Line Chart 折线图 Step Area Chart 直方折线填充图 Step Line Chart 直方折线图
Spline Chart 曲线图 Areaspline Chart 曲线填充图 Stacked Polar Chart 堆积填充图
Bubble Chart 折线图 Arearange Average Value Chart 范围均线图 Column Mixed Line Chart 双Y轴柱形折线混合图
Scatter Chart 散点图 Boxplot Chart 箱线图 Mirror Column Chart 镜像图

使用前安装

CocoaPods 安装 (推荐)

  1. 在 Podfile 中添加以下内容
ruby
pod 'AAChartKit', :git => 'https://github.com/AAChartModel/AAChartKit.git'
  1. 执行 pod install 或 pod update。

手动安装

  1. 将项目Demo中的文件夹AAChartKitLib拖入到所需项目中.
  2. 在你的项目的 .pch 全局宏定义文件中添加
objective-c
#import "AAGlobalMacro.h"

正式开始使用

  1. 在你的ViewController视图控制器文件中添加
objective-c
#import "AAChartKit.h"
  1. 创建视图AAChartView
objective-c
CGFloat chartViewWidth  = self.view.frame.size.width;
CGFloat chartViewHeight = self.view.frame.size.height - 250;
_aaChartView = [[AAChartView alloc]init];
_aaChartView.frame = CGRectMake(0, 60, chartViewWidth, chartViewHeight);
////禁用 AAChartView 滚动效果(默认不禁用)
//self.aaChartView.scrollEnabled = NO;
[self.view addSubview:_aaChartView];
  1. 配置视图模型AAChartModel
objective-c
AAChartModel *aaChartModel = AAChartModel.new
.chartTypeSet(AAChartTypeArea)//设置图表的类型(这里以设置的为折线面积图为例)
.titleSet(@"编程语言热度")//设置图表标题
.subtitleSet(@"虚拟数据")//设置图表副标题
.categoriesSet(@[@"Java",@"Swift",@"Python",@"Ruby", @"PHP",@"Go",@"C",@"C#",@"C++"])//图表横轴的内容
.yAxisTitleSet(@"摄氏度")//设置图表 y 轴的单位
.seriesSet(@[
    AASeriesElement.new
        .nameSet(@"2017")
        .dataSet(@[@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.new
        .nameSet(@"2018")
        .dataSet(@[@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.new
        .nameSet(@"2019")
        .dataSet(@[@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.new
        .nameSet(@"2020")
        .dataSet(@[@3.9, @4.2, @5.7, @8.5, @11.9, @15.2, @17.0, @16.6, @14.2, @10.3, @6.6, @4.8]),
]);
  1. 绘制图形(创建 AAChartView 实例对象后,首次绘制图形调用此方法)
objective-c
/*图表视图对象调用图表模型对象,绘制最终图形*/
[_aaChartView aa_drawChartWithChartModel:aaChartModel];

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

更新图形内容

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

  • 仅仅刷新图形的数据(进行数据的动态更新操作时,建议使用此方法)
objective-c
/*仅仅更新 AAChartModel 对象的 series 属性时,动态刷新图表*/
[_aaChartView aa_onlyRefreshTheChartDataWithChartModelSeries:aaChartModelSeriesArray];
  • 刷新图形除数据属性 series 以外的其他属性(首次绘制图形完成之后,后续刷新图表的属性均建议调用此方法 注意:仅仅刷新图形数据,则建议使用上面的👆aa_onlyRefreshTheChartDataWithChartModelSeries方法)
objective-c
/*更新 AAChartModel 内容之后,刷新图表*/
[_aaChartView aa_refreshChartWithChartModel:aaChartModel];

`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 - 环形图(中间为空的扇形图)

  • bubble chart - 气泡图

  • scatter chart - 散点图

  • arearange chart - 区域范围填充图

  • step area chart - 直方区域填充图

  • mixed chart - 混合图形(折线图&柱形范围图)

更多图形效果

注意:如下的这幅DEMO演示图为大小6M左右的GIF动态图,如未显示动态效果则说明图片资源未全部加载。请耐心等待至图片资源内容完全加载结束后，即可最终观赏更多的项目的动态演示效果.

特别说明

支持监听用户点击事件及单指滑动事件

可通过给 AAChartView 示例对象设置代理方法,来实现监听用户的点击事件和单指滑动事件

objective-c
//设置 AAChartView 事件代理
 self.aaChartView.delegate = self;

 //实现对 AAChartView 事件代理的监听
 #pragma mark -- AAChartView delegate
 - (void)aaChartView:(AAChartView *)aaChartView moveOverEventWithMessage:(AAMoveOverEventMessageModel *)message {
 NSLog(@"🚀selected point series element name: %@",message.name);
 }

在监听用户交互事件时,获取的事件信息AAMoveOverEventMessageModel共包含以下内容

objective-c
@interface AAMoveOverEventMessageModel : NSObject

@property (nonatomic, copy)   NSString *name; 
@property (nonatomic, strong) NSNumber *x; 
@property (nonatomic, strong) NSNumber *y;
@property (nonatomic, copy)   NSString *category;
@property (nonatomic, strong) NSDictionary *offset;
@property (nonatomic, assign) NSUInteger index;

@end

监听用户点击事件可实现多种多样的自定义功能. 例如可通过用户点击事件回调来实现双表联动, 示例效果如下

支持通过`JavaScript` 函数来自定义 `AATooltip`视图显示效果

有时系统默认的 tooltip 浮动提示框的显示效果无法满足使用者的特殊自定义要求,此时可以通过添加 AATooltip 的 headerFormat 和 pointFormat字符串属性来自定义浮动提示框的显示内容,如仍旧不能满足需求,更可以通过 AATooltip 的 formatter 函数来实现视图的特殊定制化
例如

  • 如下配置 AATooltip 实例对象属性
js
/*Custom Tooltip Style --- 自定义图表浮动提示框样式及内容*/
    AATooltip *tooltip = aaOptions.tooltip;
    tooltip
    .useHTMLSet(true)
    .formatterSet(@AAJSFunc(function () {
        return ' 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔 <br/> '
        + ' Support JavaScript Function Just Right Now !!! <br/> '
        + ' The Gold Price For <b>2020 '
        +  this.x
        + ' </b> Is <b> '
        +  this.y
        + ' </b> Dollars ';
    }))
    .valueDecimalsSet(@2)//设置取值精确到小数点后几位
    .backgroundColorSet(@"#000000")
    .borderColorSet(@"#000000")
    .styleSet(AAStyleColorSize(@"#FFD700", 12))
    ;

得到的浮动提示框的视觉效果图如下👇

  • 如下配置 AATooltip 实例对象属性
js
aaOptions.tooltip
    .useHTMLSet(true)
    .formatterSet(@AAJSFunc(function () {
        let wholeContentStr ='<span style=\"' + 'color:lightGray; font-size:13px\"' + '>◉ Time: ' + this.x + ' year</span><br/>';
        let length = this.points.length;
        for (let i = 0; i < length; i++) {
            let thisPoint = this.points[i];
            let yValue = thisPoint.y;
            if (yValue != 0) {
                let spanStyleStartStr = '<span style=\"' + 'color:'+ thisPoint.color + '; font-size:13px\"' + '>◉ ';
                let spanStyleEndStr = '</span> <br/>';
                wholeContentStr += spanStyleStartStr + thisPoint.series.name + ': ' + thisPoint.y + '℃' + spanStyleEndStr;
            }
        }
        return wholeContentStr;
    }))
    .backgroundColorSet(@"#050505")
    .borderColorSet(@"#050505")
    ;

得到的浮动提示框的视觉效果图如下👇

支持添加值域分割功能

  • 添加值域分割颜色带 plotBands 🎀

  • 添加值域分割颜色线 plotLines 🧶

  • 添加值域分割数据列分区 zones 🧱

支持图表数据的动态滚动刷新

支持图表数据的动态排序

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

objective-c
typedef NSString *AAChartType;

AACHARTKIT_EXTERN AAChartType const AAChartTypeColumn;          //柱形图
AACHARTKIT_EXTERN AAChartType const AAChartTypeBar;             //条形图
AACHARTKIT_EXTERN AAChartType const AAChartTypeArea;            //折线区域填充图
AACHARTKIT_EXTERN AAChartType const AAChartTypeAreaspline;      //曲线区域填充图
AACHARTKIT_EXTERN AAChartType const AAChartTypeLine;            //折线图
AACHARTKIT_EXTERN AAChartType const AAChartTypeSpline;          //曲线图
AACHARTKIT_EXTERN AAChartType const AAChartTypeScatter;         //散点图
AACHARTKIT_EXTERN AAChartType const AAChartTypePie;             //扇形图
AACHARTKIT_EXTERN AAChartType const AAChartTypeBubble;          //气泡图
AACHARTKIT_EXTERN AAChartType const AAChartTypePyramid;         //金字塔图
AACHARTKIT_EXTERN AAChartType const AAChartTypeFunnel;          //漏斗图
AACHARTKIT_EXTERN AAChartType const AAChartTypeColumnrange;     //柱形范围图
AACHARTKIT_EXTERN AAChartType const AAChartTypeArearange;       //区域折线范围图
AACHARTKIT_EXTERN AAChartType const AAChartTypeAreasplinerange; //区域曲线范围图
AACHARTKIT_EXTERN AAChartType const AAChartTypeBoxplot;         //箱线图
AACHARTKIT_EXTERN AAChartType const AAChartTypeWaterfall;       //瀑布图
AACHARTKIT_EXTERN AAChartType const AAChartTypePolygon;         //多边形图
AACHARTKIT_EXTERN AAChartType const AAChartTypeGauge;           //仪表图
AACHARTKIT_EXTERN AAChartType const AAChartTypeErrorbar;        //误差图

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

objective-c
typedef NSString *AAChartZoomType;

AACHARTKIT_EXTERN AAChartZoomType const AAChartZoomTypeNone; //禁用手势缩放功能(默认禁用手势缩放)
AACHARTKIT_EXTERN AAChartZoomType const AAChartZoomTypeX;    //支持图表 X轴横向缩放
AACHARTKIT_EXTERN AAChartZoomType const AAChartZoomTypeY;    //支持图表 Y轴纵向缩放
AACHARTKIT_EXTERN AAChartZoomType const AAChartZoomTypeXY;   //支持图表等比例缩放

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

当前已支持的图表线条类型共有十一种,说明如下

objc
typedef NSString *AAChartLineDashStyleType;

AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeSolid;           //———————————————————————————————————
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeShortDash;       //— — — — — — — — — — — — — — — — — —
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeShortDot;        //ⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈ
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeShortDashDot;    //—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeShortDashDotDot; //—‧‧—‧‧—‧‧—‧‧—‧‧—‧‧—‧‧—‧‧—‧‧—‧‧—‧‧—‧‧
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeDot;             //‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeDash;            //—— —— —— —— —— —— —— —— —— —— —— ——
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeLongDash;        //——— ——— ——— ——— ——— ——— ——— ——— ———
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeDashDot;         //——‧——‧——‧——‧——‧——‧——‧——‧——‧——‧——‧——‧
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeLongDashDot;     //———‧———‧———‧———‧———‧———‧———‧———‧———‧
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeLongDashDotDot;  //———‧‧———‧‧———‧‧———‧‧———‧‧———‧‧———‧‧

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

objective-c
typedef NS_ENUM(NSInteger,AAChartAnimation) {
    AAChartAnimationLinear = 0,
    AAChartAnimationEaseInQuad,
    AAChartAnimationEaseOutQuad,
    AAChartAnimationEaseInOutQuad,
    AAChartAnimationEaseInCubic,
    AAChartAnimationEaseOutCubic,
    AAChartAnimationEaseInOutCubic,
    AAChartAnimationEaseInQuart,
    AAChartAnimationEaseOutQuart,
    AAChartAnimationEaseInOutQuart,
    AAChartAnimationEaseInQuint,
    AAChartAnimationEaseOutQuint,
    AAChartAnimationEaseInOutQuint,
    AAChartAnimationEaseInSine,
    AAChartAnimationEaseOutSine,
    AAChartAnimationEaseInOutSine,
    AAChartAnimationEaseInExpo,
    AAChartAnimationEaseOutExpo,
    AAChartAnimationEaseInOutExpo,
    AAChartAnimationEaseInCirc,
    AAChartAnimationEaseOutCirc,
    AAChartAnimationEaseInOutCirc,
    AAChartAnimationEaseOutBounce,
    AAChartAnimationEaseInBack,
    AAChartAnimationEaseOutBack,
    AAChartAnimationEaseInOutBack,
    AAChartAnimationElastic,
    AAChartAnimationSwingFromTo,
    AAChartAnimationSwingFrom,
    AAChartAnimationSwingTo,
    AAChartAnimationBounce,
    AAChartAnimationBouncePast,
    AAChartAnimationEaseFromTo,
    AAChartAnimationEaseFrom,
    AAChartAnimationEaseTo,
};

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

Back Bounce Circ Cubic Elastic
Expo Quad Quart Quint Sine

`AAChartModel` 属性配置列表

text
/* Detailed source-code truncated for AI context efficiency. */

作者

An An

java
"CODE IS FAR AWAY FROM BUG WITH THE ANIMAL PROTECTING"
 *          %%       %%
 *         ##       ##
 *       ┏-##┓　  ┏-##┓
 *    ┏_┛ ┻---━┛_┻━━┓
 *    ┃　　　        ┃　　　　 
 *    ┃　　 ━　      ┃　　　 
 *    ┃ @^　  @^    ┃　　 
 *    ┃　　　　　　  ┃
 *    ┃　　 ┻　　　 ┃
 *    ┃_　　　　　 _┃
 *     ┗━┓　　　┏━┛
 *    　　┃　　　┃神兽保佑
 *    　　┃　　　┃永无BUG！
 *    　　┃　　　┗━━━┓----|
 *    　　┃　　　　　　　  ┣┓}}}
 *    　　┃　　　　　　　  ┏┛
 *    　　┗┓&&&┓-┏&&&┓┏┛-|
 *    　　　┃┫┫　 ┃┫┫
 *    　　　┗┻┛　 ┗┻┛
 *
 *
 "CODE IS FAR AWAY FROM BUG WITH THE ANIMAL PROTECTING"

源代码⛓

语言版本 项目名称 适用平台 源代码链接
Swift AAInfographics iOS https://github.com/AAChartModel/AAChartKit-Swift
Objective C AAChartKit iOS https://github.com/AAChartModel/AAChartKit
Kotlin AAInfographics Android https://github.com/AAChartModel/AAChartCore-Kotlin
Java AAChartCore Android https://github.com/AAChartModel/AAChartCore

许可证

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

联系方式

待办清单

  • 支持图形加载完成后用户添加代理事件
  • 支持图形动态刷新全局内容
  • 支持图形动态刷新纯数据(series)内容
  • 支持图形实时刷新纯数据并动态滚动
  • 支持色彩图层渐变效果
  • 支持3D图形效果,仅对柱状图、条形图、扇形图、散点图、气泡图等部分图形有效
  • 支持使用CocoaPods 导入
  • 支持使用Carthage 导入
  • 支持横屏(全屏)效果
  • 支持自由设置图形渲染动画
  • 支持用户自由配置AAOptions模型对象属性
  • 支持图形堆叠
  • 支持图形坐标轴反转
  • 支持渲染散点图
  • 支持渲染柱形范围图
  • 支持渲染面积范围图
  • 支持渲染面积范围均线图
  • 支持渲染极地图
  • 支持渲染折线直方图
  • 支持渲染折线直方填充图
  • 支持渲染南丁格尔🌹玫瑰图
  • 支持渲染活动刻度仪表图
  • 支持为图形添加点击事件回调
  • 支持为图形添加手指✋🏻或鼠标🖱滑过的事件回调
  • 支持代码覆盖率测试

Overview (`README.md`)

AAChartKit

[ **English Document 🇬🇧** ](https://github.com/AAChartModel/AAChartKit) | [ **简体中文文档 🇨🇳** ](https://github.com/AAChartModel/AAChartKit/blob/master/CHINESE-README.md)

The Swift version of AAChartKit can be found here:

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

Preface

AAChartKit is an elegant and friendly (user-friendly && enviroment-friendly) chart framework for iOS, based on the open source Highcharts JS libraries. AAChartKit is extremely powerful, easy to configure and a pleasure to use. Currently AAChartKit includes support for the following chart types: column chart, bar chart, area chart, area spline chart, line chart, spline chart, radar chart, polar chart, pie chart, bubble chart, pyramid chart, funnel chart, column range and area range chart. More chart types are planned to be supported. AAChartKit gives you easy and fast access to a wide range of chart types, hassle-free and quick to integrate into your own project.

Features

  • 🎂 Environment friendly. Support iOS 、iPadOS and macOS. Totally support Objective-C language, and there are more types version such as Swift language version AAInfographics 、 Java language version AAChartCore 、Kotlin language version AAInfographics . To get more details you can see the source code links list.

  • 🚀 Powerful and easy to use. It supports column chart, bar chart, area chart, areaspline chart, line chart, spline chart, radar chart, polar chart, pie chart, bubble chart, pyramid chart, funnel chart, columnrange chart, arearange chart, mixed chart and other graphics. Support for more chart types is planned.

  • 📝 Modern Declarative Syntax. Unlike previous imperative programming techniques, drawing any custom chart in AAChartKit, you don't need to care about the inner implementation details which is annoying && boring. Describe what you want, you will get what you described.

  • 🎮 Interactive and animated. The charts animation effect is exquisite, delicate, smooth and beautiful.

  • ⛓ Chain programming. Supports chain programming syntax like Masonry .

  • 🦋 Minimalist. AAChartView + AAChartModel = Chart. The AAChartKit follows a minimalist formula: Chart view + Chart model = The chart you want, just like the powerful and beautiful charts lib AAInfographics.

  • 🖱 Interaction event callback. Support for monitoring user click events and single finger move over events, which can be used to achieve double charts linked-working and even multiple charts linkage, as well as other more complex custom user interaction effects.

Beauty Appreciation

Column Chart Column Range Chart Area Chart
Line Chart Step Area Chart Step Line Chart
Spline Chart Areaspline Chart Stacked Polar Chart
Bubble Chart Arearange Average Value Chart Column Mixed Line Chart
Scatter Chart Boxplot Chart Mirror Column Chart

Installation

  1. Add following content
ruby
pod 'AAChartKit', :git => 'https://github.com/AAChartModel/AAChartKit.git'

to your Podfile.

  1. Run pod install or pod update.

Manually (old school way)

  1. Drag the AAChartKitLib folder into your project.

  2. Add the following to your .pch file.

objective-c
#import "AAGlobalMacro.h"

Usage

  1. Add the following to your view controller file:
objective-c
#import "AAChartKit.h"
  1. Create an instance object of chart view:AAChartView
objective-c
CGFloat chartViewWidth  = self.view.frame.size.width;
CGFloat chartViewHeight = self.view.frame.size.height - 250;
_aaChartView = [[AAChartView alloc]init];
_aaChartView.frame = CGRectMake(0, 60, chartViewWidth, chartViewHeight);
//_aaChartView.scrollEnabled = NO;
[self.view addSubview:_aaChartView];
  1. Configure the chart model properties: AAChartModel
objective-c
AAChartModel *aaChartModel = AAChartModel.new
.chartTypeSet(AAChartTypeArea)
.titleSet(@"THE HEAT OF PROGRAMMING LANGUAGE")
.subtitleSet(@"Virtual Data")
.categoriesSet(@[@"Java",@"Swift",@"Python",@"Ruby", @"PHP",@"Go",@"C",@"C#",@"C++"])
.yAxisTitleSet(@"Degrees Celsius")
.seriesSet(@[
    AASeriesElement.new
        .nameSet(@"2017")
        .dataSet(@[@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.new
        .nameSet(@"2018")
        .dataSet(@[@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.new
        .nameSet(@"2019")
        .dataSet(@[@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.new
        .nameSet(@"2020")
        .dataSet(@[@3.9, @4.2, @5.7, @8.5, @11.9, @15.2, @17.0, @16.6, @14.2, @10.3, @6.6, @4.8]),
]);
  1. Draw the chart (this method is only called the first time you create an AAChartView instance object)
objective-c
//The chart view object calls the instance object of AAChartModel and draws the final graphic
[_aaChartView aa_drawChartWithChartModel:aaChartModel];

🎉🎉🎉 Congratulations! Everything was done!!! You will get what you want!!! 🌈🌈🌈

Update chart content

If you want to refresh chart content, you should do something as follow. According to your actual needs, select the function that fits you.

  • Refresh the chart data (this method is recommended for updating the series data dynamically)
objective-c
//Refresh the chart dynamically only when the series attribute of the AAChartModel object is updated
[_aaChartView aa_onlyRefreshTheChartDataWithChartModelSeries:aaChartModelSeriesArray];
  • Refresh the chart, minus the chart data (this method is recommended for subsequent refreshes after the first drawing of graphics has completed. If you want to update the chart data only, you should use the function aa_onlyRefreshTheChartDataWithChartModelSeries)
objective-c
//Refresh the chart after the AAChartModel content is updated
[_aaChartView aa_refreshChartWithChartModel:aaChartModel];

Samples

  • line chart

  • column chart

  • bar chart

  • special area chart one

  • special area chart two

  • special area chart three

  • radar chart

  • polar chart

  • pie chart

  • bubble chart

  • scatter chart

  • arearange chart

  • step area chart

  • mixed chart

More graphics

  • Note: The following DEMO picture is a GIF dynamic picture which has a size of around 6M. If you don't see any dynamic preview, then this is because the picture resources were not fully loaded. In such a case please be patient and wait for the contents to finish loading. Maybe you need to reload this page.

Special instructions

Support user click events and move over events

you can monitor the user touch events message through implementing delegate function for AAChartView instance object

objc
//Set AAChartView events delegate
 self.aaChartView.delegate = self;

 //implement AAChartView user touch events delegate function
 #pragma mark -- AAChartView delegate
 - (void)aaChartView:(AAChartView *)aaChartView moveOverEventWithMessage:(AAMoveOverEventMessageModel *)message {
 NSLog(@"🚀selected point series element name: %@",message.name);
 }

The received touch events message contain following content

objc
@interface AAMoveOverEventMessageModel : NSObject

@property (nonatomic, copy)   NSString *name; 
@property (nonatomic, strong) NSNumber *x; 
@property (nonatomic, strong) NSNumber *y;
@property (nonatomic, copy)   NSString *category;
@property (nonatomic, strong) NSDictionary *offset;
@property (nonatomic, assign) NSUInteger index;

@end

Monitoring user click events can achieve a variety of custom functions. For example, you can implement Double Charts Linkage through user click event callbacks. The example effects are as follows

Support for custom the style of chart `AATooltip` through `JavaScript` function

As we all know, AAChartKit support using HTML String. Most of time, the headerFormat 、pointFormat、footerFormat HTML string is enough for customizing chart tooltip string content, However, sometimes the needs of APP is so weird to satified, in this time, you can even customize the chart tooltip style via formatter JavaScript function.

For example

  • configuring AATooltip instance object properties as follow:
js
/*Custom Tooltip Style ---*/
    AATooltip *tooltip = aaOptions.tooltip;
    tooltip
    .useHTMLSet(true)
    .formatterSet(@AAJSFunc(function () {
        return ' 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔 <br/> '
        + ' Support JavaScript Function Just Right Now !!! <br/> '
        + ' The Gold Price For <b>2020 '
        +  this.x
        + ' </b> Is <b> '
        +  this.y
        + ' </b> Dollars ';
    }))
    .valueDecimalsSet(@2)
    .backgroundColorSet(@"#000000")
    .borderColorSet(@"#000000")
    .styleSet(AAStyleColorSize(@"#FFD700", 12))
    ;

you can get the customized tooltip style chart like this👇

  • configuring AATooltip instance object properties as follow:
js
aaOptions.tooltip
    .useHTMLSet(true)
    .formatterSet(@AAJSFunc(function () {
        let wholeContentStr ='<span style=\"' + 'color:lightGray; font-size:13px\"' + '>◉ Time: ' + this.x + ' year</span><br/>';
        let length = this.points.length;
        for (let i = 0; i < length; i++) {
            let thisPoint = this.points[i];
            let yValue = thisPoint.y;
            if (yValue != 0) {
                let spanStyleStartStr = '<span style=\"' + 'color:'+ thisPoint.color + '; font-size:13px\"' + '>◉ ';
                let spanStyleEndStr = '</span> <br/>';
                wholeContentStr += spanStyleStartStr + thisPoint.series.name + ': ' + thisPoint.y + '℃' + spanStyleEndStr;
            }
        }
        return wholeContentStr;
    }))
    .backgroundColorSet(@"#050505")
    .borderColorSet(@"#050505")
    ;

you can get the customized tooltip style chart like this👇

Support value range segmentation

  • chart with value range segmentation bands 🎀

  • chart with value range segmentation lines 🧶

  • chart with value range segmentation zones 🧱

Support scrolling update chart data

Support data sorting with animation effect

Supported chart types for now

text
/* Detailed source-code truncated for AI context efficiency. */

Supported zoom guesture types for now

objective-c
typedef NSString *AAChartZoomType;

AACHARTKIT_EXTERN AAChartZoomType const AAChartZoomTypeNone;
AACHARTKIT_EXTERN AAChartZoomType const AAChartZoomTypeX;
AACHARTKIT_EXTERN AAChartZoomType const AAChartZoomTypeY;
AACHARTKIT_EXTERN AAChartZoomType const AAChartZoomTypeXY;

Suppported line dash style types for now

objective-c
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeSolid;           //———————————————————————————————————
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeShortDash;       //— — — — — — — — — — — — — — — — — —
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeShortDot;        //ⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈⵈ
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeShortDashDot;    //—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧—‧
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeShortDashDotDot; //—‧‧—‧‧—‧‧—‧‧—‧‧—‧‧—‧‧—‧‧—‧‧—‧‧—‧‧—‧‧
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeDot;             //‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeDash;            //—— —— —— —— —— —— —— —— —— —— —— ——
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeLongDash;        //——— ——— ——— ——— ——— ——— ——— ——— ———
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeDashDot;         //——‧——‧——‧——‧——‧——‧——‧——‧——‧——‧——‧——‧
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeLongDashDot;     //———‧———‧———‧———‧———‧———‧———‧———‧———‧
AACHARTKIT_EXTERN AAChartLineDashStyleType const AAChartLineDashStyleTypeLongDashDotDot;  //———‧‧———‧‧———‧‧———‧‧———‧‧———‧‧———‧‧

Supported animation types for now

objective-c
typedef NS_ENUM(NSInteger,AAChartAnimation) {
    AAChartAnimationLinear = 0,
    AAChartAnimationEaseInQuad,
    AAChartAnimationEaseOutQuad,
    AAChartAnimationEaseInOutQuad,
    AAChartAnimationEaseInCubic,
    AAChartAnimationEaseOutCubic,
    AAChartAnimationEaseInOutCubic,
    AAChartAnimationEaseInQuart,
    AAChartAnimationEaseOutQuart,
    AAChartAnimationEaseInOutQuart,
    AAChartAnimationEaseInQuint,
    AAChartAnimationEaseOutQuint,
    AAChartAnimationEaseInOutQuint,
    AAChartAnimationEaseInSine,
    AAChartAnimationEaseOutSine,
    AAChartAnimationEaseInOutSine,
    AAChartAnimationEaseInExpo,
    AAChartAnimationEaseOutExpo,
    AAChartAnimationEaseInOutExpo,
    AAChartAnimationEaseInCirc,
    AAChartAnimationEaseOutCirc,
    AAChartAnimationEaseInOutCirc,
    AAChartAnimationEaseOutBounce,
    AAChartAnimationEaseInBack,
    AAChartAnimationEaseOutBack,
    AAChartAnimationEaseInOutBack,
    AAChartAnimationElastic,
    AAChartAnimationSwingFromTo,
    AAChartAnimationSwingFrom,
    AAChartAnimationSwingTo,
    AAChartAnimationBounce,
    AAChartAnimationBouncePast,
    AAChartAnimationEaseFromTo,
    AAChartAnimationEaseFrom,
    AAChartAnimationEaseTo,
};

Here are the ten concrete animation types of AAChartKit

Back Bounce Circ Cubic Elastic
Expo Quad Quart Quint Sine

AAChartModel:chart attribute list

text
/* Detailed source-code truncated for AI context efficiency. */

Created By:

An An

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

Source Code⛓

Normal Versions

Language Version Project Name Target Platform Source Code Link
Swift AAInfographics iOS https://github.com/AAChartModel/AAChartKit-Swift
Objective C AAChartKit iOS https://github.com/AAChartModel/AAChartKit
Kotlin AAInfographics Android https://github.com/AAChartModel/AAChartCore-Kotlin
Java AAChartCore Android https://github.com/AAChartModel/AAChartCore

Pro Versions

Pro Versions are more powerful data visualization frameworks that support more types beautiful chart like bellcurve, bullet, columnpyramid, cylinder, dependencywheel, heatmap, histogram, networkgraph, organization, packedbubble, pareto, sankey, series, solidgauge, streamgraph, sunburst, tilemap, timeline, treemap, variablepie, variwide, vector, venn, windbarb, wordcloud, xrange charts and so on.

Language Project Name Target Platform Source Code Link
Swift AAInfographics-Pro iOS https://github.com/AAChartModel/AAChartKit-Swift-Pro
Objective C AAChartKit-Pro iOS https://github.com/AAChartModel/AAChartKit-Pro
Kotlin AAInfographics-Pro Android Coming Soon...
Java AAChartCore-Pro Android Coming Soon...

LICENSE

AAChartKit is available under the MIT license. See the LICENSE file for more information.

Contact

To-Do list

  • Support user to add delegate events after the graphics content loading was completed
  • Support graphics to refresh global content dynamically
  • Support graphics to refresh pure data (series) content dynamically
  • Support graphics to refresh pure data in real time and scroll dynamically
  • Support color layer gradient effects
  • Support 3D graphics effects, valid only for partial graphics such as column chart、bar chart、pie charts、scatterplot chart、bubble chart, etc.
  • Support CocoaPods
  • Support Carthage
  • Support setting graphics rendering animation freely
  • Support user to configure AAOptions model object properties freely
  • Support stacking the graphics
  • Support reversing the graphics axis
  • Support rendering scatter chart
  • Support rendering column range map
  • Support rendering area range graph
  • Support rendering the polar chart
  • Support rendering the step line chart
  • Support rendering the step area chart
  • Support rendering the Nightingale rose 🌹chart
  • Support rendering the circular progress bar chart
  • Support adding clicked event callbacks for graphics
  • Support adding finger✋🏻 or mouse🖱 move over event callbacks for graphics
  • Support code coverage test

Overview (`fastlane/README.md`)

发布pod新版本

text
fastlane release_pod version:'6.5.0'  project:'AAChartKit'  desc:'✨ 发布版本6.5.0'

--- METRICS ---

Explore Related Technologies & Topics

View All 9,111+ Repositories →

Discover similar high-velocity repositories, agent skills, and OpenAPI specifications across the ecosystem.

#area-chart Browse area-chart catalog → #bubble-chart Browse bubble-chart catalog → #chart Browse chart catalog → #chart-types Browse chart-types catalog → #charting-library Browse charting-library catalog → #column-chart Browse column-chart catalog → ⚡ MCP Servers Model Context Protocol → 🧠 Agent Skills Prompt & rule files → 🔌 OpenAPI Specs REST & Swagger schemas →