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>