AAChartKit--- 强大、精美、易用的开源iOS图表库

时间  2019-11-06
标签 aachartkit 强大 精美 易用 开源 ios 图表 栏目 iOS 繁體版
原文   原文链接

AAChartKit-LOGO





  • 因项目功能较多,文件较大,请移步至 GitHub 下载. 亲爱的,若是您使用时,以为满意,请赏一颗星星✨,您的鼓励将是我继续努力的一大动力 .

GitHub传送门

https://github.com/AAChartMod...html

前言

AAChartKit项目,是在流行的开源前端图表库Highcharts的基础上,封装的面向对象的,一组简单易用,极其精美的图表绘制控件.
  1. 适配 iOS 6, 支持ARC,支持 OC语言,配置简单.
  2. 功能强大,支持柱状图 条形图 折线图 填充图 雷达图 扇形图 气泡图等多种图形
  3. 动画效果细腻精致,流畅优美.
  4. 支持类 Masonry 链式编程语法
  5. AAChartView +AAChartModel = Chart,在 AAChartKit 封装库当中,遵循这样一个极简主义公式:图表视图控件+图表模型=你想要的图表.

真机美图

Column Chart 柱状图 Columnrange Chart 条形范围图 Area Chart 区域填充图
ColumnChart.png BarChart.png AreaChart.png
Line Chart 多组数据折线图 Step Area Chart 直方折线填充图 Step Line Chart 直方折线图
LineChart.png StepAreaChart.png StepLineChart.png

使用方法

准备工做

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

正式开始

  1. 在你的视图控制器文件中添加
#import "AAChartView.h"
  1. 建立视图AAChartView
AAChartView *chartView = [[AAChartView alloc]init];
self.view.backgroundColor = [UIColor whiteColor];
chartView.frame = CGRectMake(0, 60, self.view.frame.size.width, self.view.frame.size.height-220);
chartView.contentHeight =self.view.frame.size.height-220;//设置图表视图的内容高度(默认 contentHeight 和 AAChartView 的高度相同)
[self.view addSubview:chartView];
  1. 配置视图模型AAChartModel
AAChartModel *chartModel= AAObject(AAChartModel)
    .chartTypeSet(AAChartTypeColumn)//设置图表的类型(这里以设置的为柱状图为例)
    .titleSet(@"编程语言热度")//设置图表标题
    .subtitleSet(@"虚拟数据")//设置图表副标题
    .categoriesSet(@[@"Java",@"Swift",@"Python",@"Ruby", @"PHP",@"Go",@"C",@"C#",@"C++"])//设置图表横轴的内容
    .yAxisTitleSet(@"摄氏度")//设置图表 y 轴的单位
    .seriesSet(@[
                 AAObject(AASeriesElement)
                 .nameSet(@"2017")
                 .dataSet(@[@45,@56,@34,@43,@65,@56,@47,@28,@49]),
                 
                 AAObject(AASeriesElement)
                 .nameSet(@"2018")
                 .dataSet(@[@11,@12,@13,@14,@15,@16,@17,@18,@19]),
                 
                 AAObject(AASeriesElement)
                 .nameSet(@"2019")
                 .dataSet(@[@31,@22,@33,@54,@35,@36,@27,@38,@39]),
                 
                 AAObject(AASeriesElement)
                 .nameSet(@"2020")
                 .dataSet(@[@21,@22,@53,@24,@65,@26,@37,@28,@49]),
                 ])
    ;
  1. 绘制图形
[chartView aa_drawChartWithChartModel:chartModel];//图表视图对象调用图表模型对象,绘制最终图形
  1. 刷新图形
[chartView aa_refreshChartWithChartModel:chartModel];//更新 AAChartModel 数据以后,刷新图表
  1. 特别说明

AAChartKit 中扇形图、气泡图都归属为特殊类型,因此想要绘制扇形图、气泡图,图表模型 AAChartModel 设置稍有不一样,示例以下前端

  • 绘制扇形图,你须要这样配置模型 AAChartModel
AAChartModel *chartModel= AAObject(AAChartModel)
        .chartTypeSet(AAChartTypePie)
        .titleSet(@"编程语言热度")
        .subtitleSet(@"虚拟数据")
        .dataLabelEnabledSet(true)//是否直接显示扇形图数据
        .yAxisTitleSet(@"摄氏度")
        .seriesSet(
                   @[AAObject(AASeriesElement)
                     .nameSet(@"语言热度占比")
                     .dataSet(@[
                                @[@"Java"  , @67],
                                @[@"Swift" , @44],
                                @[@"Python", @83],
                                @[@"OC"    , @11],
                                @[@"Ruby"  , @42],
                                @[@"PHP"   , @31],
                                @[@"Go"    , @63],
                                @[@"C"     , @24],
                                @[@"C#"    , @888],
                                @[@"C++"   , @66],
                                ]),
                     ]
                   
                   )
        ;
  • 绘制气泡图,你须要这样配置模型 AAChartModel
AAChartModel *chartModel= AAObject(AAChartModel)
        .chartTypeSet(AAChartTypeBubble)
        .titleSet(@"编程语言热度")
        .subtitleSet(@"虚拟数据")
        .yAxisTitleSet(@"摄氏度")
        .seriesSet(
                   @[
                     AAObject(AASeriesElement)
                     .nameSet(@"2017")
                     .dataSet(
                              @[
                                @[@97, @36, @79],
                                @[@94, @74, @60],
                                @[@68, @76, @58],
                                @[@64, @87, @56],
                                @[@68, @27, @73],
                                @[@74, @99, @42],
                                @[@7,  @93, @87],
                                @[@51, @69, @40],
                                @[@38, @23, @33],
                                @[@57, @86, @31]
                                ]),
                     
                     AAObject(AASeriesElement)
                     .nameSet(@"2018")
                     .dataSet(
                              @[
                                @[@25, @10, @87],
                                @[@2, @75, @59],
                                @[@11, @54, @8],
                                @[@86, @55, @93],
                                @[@5, @3, @58],
                                @[@90, @63, @44],
                                @[@91, @33, @17],
                                @[@97, @3, @56],
                                @[@15, @67, @48],
                                @[@54, @25, @81]
                                ]),
                     
                     AAObject(AASeriesElement)
                     .nameSet(@"2019")
                     .dataSet(
                              @[
                                @[@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]
                                ]),
                     
                     ]
                   )
        ;
  1. 当前已支持的图表类型有十种以上,说明以下
typedef NSString *AAChartType;
static AAChartType const AAChartTypeColumn      = @"column";     //柱形图
static AAChartType const AAChartTypeBar         = @"bar";        //条形图
static AAChartType const AAChartTypeArea        = @"area";       //折线区域填充图
static AAChartType const AAChartTypeAreaspline  = @"areaspline"; //曲线区域填充图
static AAChartType const AAChartTypeLine        = @"line";       //折线图
static AAChartType const AAChartTypeSpline      = @"spline";     //曲线图
static AAChartType const AAChartTypeScatter     = @"scatter";    //散点图
static AAChartType const AAChartTypePie         = @"pie";        //扇形图
static AAChartType const AAChartTypeBubble      = @"bubble";     //气泡图
static AAChartType const AAChartTypePyramid     = @"pyramid";    //金字塔图
static AAChartType const AAChartTypeFunnel      = @"funnel";     //漏斗图
static AAChartType const AAChartTypeColumnrange = @"columnrange";//柱形范围图
  1. 当前已支持的图表渲染动画类型有三十种以上,说明以下
typedef NS_ENUM(NSInteger,AAChartAnimationType){
    AAChartAnimationTypeLinear =0,
    AAChartAnimationTypeSwing,
    AAChartAnimationTypeEaseInQuad,
    AAChartAnimationTypeEaseOutQuad,
    AAChartAnimationTypeEaseInOutQuad,
    AAChartAnimationTypeEaseInCubic,
    AAChartAnimationTypeEaseOutCubic,
    AAChartAnimationTypeEaseInOutCubic,
    AAChartAnimationTypeEaseInQuart,
    AAChartAnimationTypeEaseOutQuart,
    AAChartAnimationTypeEaseInOutQuart,
    AAChartAnimationTypeEaseInQuint,
    AAChartAnimationTypeEaseOutQuint,
    AAChartAnimationTypeEaseInOutQuint,
    AAChartAnimationTypeEaseInExpo,
    AAChartAnimationTypeEaseOutExpo,
    AAChartAnimationTypeEaseInOutExpo,
    AAChartAnimationTypeEaseInSine,
    AAChartAnimationTypeEaseOutSine,
    AAChartAnimationTypeEaseInOutSine,
    AAChartAnimationTypeEaseInCirc,
    AAChartAnimationTypeEaseOutCirc,
    AAChartAnimationTypeEaseInOutCirc,
    AAChartAnimationTypeEaseInElastic,
    AAChartAnimationTypeEaseOutElastic,
    AAChartAnimationTypeEaseInOutElastic,
    AAChartAnimationTypeEaseInBack,
    AAChartAnimationTypeEaseOutBack,
    AAChartAnimationTypeEaseInOutBack,
    AAChartAnimationTypeEaseInBounce,
    AAChartAnimationTypeEaseOutBounce,
    AAChartAnimationTypeEaseInOutBounce,
};

AAChartModel一些重要属性通过配置以后的图形示例以下

- line chart - 折线图

IMG_1867.JPG

- column chart - 柱形图

IMG_1483.JPG

- bar chart - 条形图

IMG_1880.JPG

- special area chart one - 区域填充图一

IMG_1482.JPG

- special area chart two - 区域填充图二

IMG_1874.JPG

- special area chart three - 区域填充图三

IMG_1863.JPG

- area spline range chart - 区域曲线范围填充图

![屏幕快照 2018-09-14 下午11.55.59.png

- radar chart - 雷达图

IMG_1877.JPG

- polar chart - 极地图

IMG_1879.JPG

- pie chart - 扇形图

IMG_1878.JPG

- the oval style column chart - 头部为椭圆形的柱形图

IMG_1866.JPG

- bubble chart - 气泡图

IMG_1875.JPG

- mixed chart - 混合图形

屏幕快照 2017-05-11 下午11.21.03.png

AAChartModel 属性配置列表

AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, title);//标题内容
AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, subtitle);//副标题内容
AAPropStatementAndFuncStatement(copy, AAChartModel, AAChartSubtitleAlignType, subtitleAlign);//图表副标题文本水平对齐方式。可选的值有 “left”，”center“和“right”。 默认是：center.
AAPropStatementAndFuncStatement(copy, AAChartModel, AAChartType, chartType);//图表类型
AAPropStatementAndFuncStatement(copy, AAChartModel, AAChartStackingType, stacking);//堆积样式
AAPropStatementAndFuncStatement(copy, AAChartModel, AAChartSymbolType, symbol);//折线曲线链接点的类型："circle", "square", "diamond", "triangle","triangle-down"，默认是"circle"
AAPropStatementAndFuncStatement(copy, AAChartModel, AAChartZoomType, zoomType);//缩放类型 AAChartZoomTypeX表示可沿着 x 轴进行手势缩放
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, pointHollow);//折线曲线的链接点是否为空心的
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, inverted);//x 轴是否垂直
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, xAxisReversed);// x 轴翻转
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, yAxisReversed);//y 轴翻转
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, crosshairs);//是否显示准星线(默认显示)
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, gradientColorEnable);//是否要为渐变色
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, polar);//是否极化图形(变为雷达图)
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, dataLabelEnabled);//是否显示数据
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, xAxisLabelsEnabled);//x轴是否显示数据
AAPropStatementAndFuncStatement(strong, AAChartModel, NSArray *, categories);//图表横坐标每一个点对应的名称
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, xAxisGridLineWidth);//x轴网格线的宽度
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, yAxisLabelsEnabled);//y轴是否显示数据
AAPropStatementAndFuncStatement(copy,   AAChartModel, NSString *, yAxisTitle);//y轴标题
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, yAxisGridLineWidth);//y轴网格线的宽度
AAPropStatementAndFuncStatement(strong, AAChartModel, NSArray *, colorsTheme);//图表主题颜色数组
AAPropStatementAndFuncStatement(strong, AAChartModel, NSArray *, series);
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, legendEnabled);//是否显示图例
AAPropStatementAndFuncStatement(copy,   AAChartModel ,AAChartLegendLayoutType, legendLayout);//图例数据项的布局。布局类型： "horizontal" 或 "vertical" 即水平布局和垂直布局 默认是：horizontal.
AAPropStatementAndFuncStatement(copy,   AAChartModel ,AAChartLegendAlignType, legendAlign);//设定图例在图表区中的水平对齐方式，合法值有left，center 和 right。
AAPropStatementAndFuncStatement(copy,   AAChartModel ,AAChartLegendVerticalAlignType, legendVerticalAlign);//设定图例在图表区中的垂直对齐方式，合法值有 top，middle 和 bottom。垂直位置能够经过 y 选项作进一步设定。
AAPropStatementAndFuncStatement(copy,   AAChartModel, NSString *, backgroundColor);//图表背景色
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, options3dEnable);//是否3D化图形(仅对条形图,柱状图有效)
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, options3dAlpha);
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, options3dBeta);
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, options3dDepth);//3D图形深度
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, borderRadius);//柱状图长条图头部圆角半径(可用于设置头部的形状,仅对条形图,柱状图有效)
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, markerRadius);//折线链接点的半径长度

更多图形效果

AAChartKitShow.gif

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

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

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

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

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

@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 实例对象属性ios

/*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((id)AAStyle.new
              .colorSet(@"#FFD700")
              .fontSizeSet(@"12px"))
    ;

便可完成图表的浮动提示框的特殊定制化.获得的浮动提示框的视觉效果图以下👇
Custom Tooltip Stylegit

支持添加值域分割功能

  • 添加颜色带🎀值域分割

plotBandsChart

  • 添加颜色线🧶值域分割

plotLinesChart

做者

An Angithub

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

许可证

本项目使用 MIT许可证,详情请点击MIT LICENSEobjective-c

附言

在 AAChartKit 封装库的初始设计中,为提高.js文件的加载速度,故将所依赖的.js文件放置在本地.然而因为本项目功能较多,故放置于本地的附加JavaScript文件库体积较大,整个AAJSFiles文件夹下全部的.js文件体积合计共有5.3M左右,若对工程文件体积大小较为敏感的使用者,可以使用如下建议的替代方案编程

  1. 删除在本AAChartKit项目文件中,AAJSFiles文件夹下的5项.js文件.须要被删除的文件名称以下
  • AAJQueryLibrary.js
  • AAHighchartsLibrary.js
  • AAHighchartsMore.js
  • AAHighcharts-3d.js
  • AAFunnel.js
  1. 将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之内),因此建议AAChartKit用户可根据本身的实际项目的开发须要,酌情选择最终是否使用本替代方案.

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程