iOS开源:AAChartKit -一款极其精美的 iOS 开源图表库
tang1984027
8年前
<h2>AAChartKit</h2> <p>AAChartKit项目,是在流行的开源前端图表库 <em>Highcharts</em> 的基础上,封装的面向对象的,一组简单易用,极其精美的图表绘制控件.</p> <ol> <li>适配 iOS 8, 支持ARC,支持 OC语言,配置简单.</li> <li>功能强大,支持柱状图 条形图 折线图 填充图 雷达图等多种图形</li> <li>动画效果细腻精致,流畅优美.</li> <li>支持类 Masonry 链式编程语法 <p><em>亲爱的,如果您使用时,觉得满意,请赏一颗星星:sparkles:,您的鼓励将是我继续努力的一大动力</em> .</p> </li> </ol> <h2>使用方法</h2> <h3>准备工作</h3> <ol> <li>将项目demo中的文件夹 AAChartKitFiles 拖入到所需项目中.</li> <li>在你的项目的 .pch 全局宏定义文件中添加 <pre> <code class="language-objectivec">#import "AAGlobalMacro.h"</code></pre> </li> </ol> <h3>正式开始</h3> <p>1.在你的视图控制器文件中添加</p> <pre> <code class="language-objectivec">#import "AAChartView.h"</code></pre> <p>2.创建视图AAChartView</p> <pre> <code class="language-objectivec">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];</code></pre> <p>3.配置视图模型AAChartModel</p> <pre> <code class="language-objectivec">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]), ]) ;</code></pre> <p>4.绘制图形</p> <pre> <code class="language-objectivec">[chartView aa_drawChartWithChartModel:chartModel];//图表视图对象调用图表模型对象,绘制最终图形</code></pre> <h3>AAChartModel一些重要属性经过配置之后的图形示例如下</h3> <ul> <li>常规折线图</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/dc530f36f24cb8dbdb794174f26d3540.jpg"></p> <p style="text-align:center">IMG_1867.JPG</p> <ul> <li>常规柱形图</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/b572e6d2e1255ab9ffd27d6999c8f88e.jpg"></p> <p style="text-align:center">IMG_1873.JPG</p> <ul> <li>y 轴翻转的堆积曲线填充图</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/74be187ab4ce7a54ecf72dfb7c141565.jpg"></p> <p style="text-align:center">IMG_1871.JPG</p> <ul> <li>x 轴翻转的堆积曲线填充图</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/8093ca4cf4a8f701286fb9078f90d8bd.jpg"></p> <p style="text-align:center">IMG_1869.JPG</p> <ul> <li>x 轴翻转的百分比堆积曲线填充图</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/b10313aabf6b12c30441b39320f4754c.jpg"></p> <p style="text-align:center">IMG_1863.JPG</p> <ul> <li>辐射化堆积折线填充图</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/e7eae041e5851da5712d673ce0d3bc2f.jpg"></p> <p style="text-align:center">IMG_1870.JPG</p> <ul> <li>辐射化百分比堆积折线填充图</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/ce3f8ef4bd93f81a2561a3e8ad6ffb95.jpg"></p> <p style="text-align:center">IMG_1868.JPG</p> <ul> <li>头部为椭圆形的百分比堆积柱形图</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/7f4134d250daf611783ab82258e77cd8.jpg"></p> <p style="text-align:center">IMG_1866.JPG</p> <ul> <li>头部为楔形的百分比堆积条形图</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/4d1eabbfa2794b9dda3d9ac48b30b52b.jpg"></p> <p style="text-align:center">IMG_1865.JPG</p> <h3>AAChartModel 属性配置列表</h3> <pre> <code class="language-objectivec">AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, title);//标题内容 AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, subtitle);//副标题内容 AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, chartType);//图表类型 AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, stacking);//堆积样式 AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, symbol);//曲线点类型:"circle", "square", "diamond", "triangle","triangle-down",默认是"circle" AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, zoomType);//缩放类型 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 , NSString *, legendLayout); AAPropStatementAndFuncStatement(copy, AAChartModel , NSString *, legendAlign); AAPropStatementAndFuncStatement(copy, AAChartModel , NSString *, legendVerticalAlign); 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);//折线连接点的半径长度</code></pre> <h3>更多图形效果</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/b797a0ebd39cf4ecdacd722ce36a1d67.gif"></p> <p style="text-align:center">AAChartKit功能演示.gif</p> <p> </p> <p> </p> <p>项目主页: <a href="http://www.open-open.com/lib/view/home/1490081257158">http://www.open-open.com/lib/view/home/1490081257158</a></p> <p> </p>