转载

一款极其精美的 iOS 开源图表库

AAChartKit 2.0

查看网页版说明书`(附有交互式图表)`请点击链接

http://htmlpreview.github.io/?https://github.com/AAChartModel/AAChartKit/blob/master/AAChartKit/ChartsDemo/AAChartKitDocumentLive.html

Github主页地址：

https://github.com/AAChartModel/AAChartKit

前言

AAChartKit项目,是在流行的开源前端图表库Highcharts的基础上,封装的面向对象的,一组简单易用,极其精美的图表绘制控件.

适配 iOS 6, 支持ARC,支持 OC语言,配置简单.
功能强大,支持柱状图 条形图 折线图 填充图 雷达图 扇形图 气泡图等多种图形
动画效果细腻精致,流畅优美.
支持类 Masonry 链式编程语法
AAChartView +AAChartModel = Chart,在 AAChartKit 封装库当中,遵循这样一个极简主义公式:图表视图控件+图表模型=你想要的图表.

使用方法

准备工作

将项目demo中的文件夹AAChartKitFiles拖入到所需项目中.
在你的项目的 .pch 全局宏定义文件中添加

#import "AAGlobalMacro.h"

正式开始

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

#import "AAChartView.h"

创建视图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];

配置视图模型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]),                  ])     ;

绘制图形

[chartView aa_drawChartWithChartModel:chartModel];//图表视图对象调用图表模型对象,绘制最终图形

刷新图形

 [chartView aa_refreshChartWithChartModel:chartModel];//更新 AAChartModel 数据之后,刷新图表

特别说明

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]                                 ]),                                            ]                    )         ;

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

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";     //漏斗图

Samples

折线图

柱状图

条形图

曲线填充图一

曲线填充图二

曲线填充图三

雷达图

极地图

扇形图

椭圆形头部的堆积柱形图

气泡图

混合图形

一款极其精美的 iOS 开源图表库

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);//折线连接点的半径长度

附言

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