AAChartKit--- 強(qiáng)大、精美、易用的開源iOS圖表庫

104828720 發(fā)布于2019-08-01 16:38 / 1448人閱讀

摘要：可選的值有，和。布局類型或即水平布局和垂直布局默認(rèn)是設(shè)定圖例在圖表區(qū)中的水平對齊方式，合法值有，和。垂直位置可以通過選項做進(jìn)一步設(shè)定。

因項目功能較多,文件較大,請移步至 GitHub 下載. 親愛的,如果您使用時,覺得滿意,請賞一顆星星?,您的鼓勵將是我繼續(xù)努力的一大動力 .

GitHub傳送門

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

前言

AAChartKit項目,是在流行的開源前端圖表庫Highcharts的基礎(chǔ)上,封裝的面向?qū)ο蟮?一組簡單易用,極其精美的圖表繪制控件.

適配 iOS 6, 支持ARC,支持 OC語言,配置簡單.

功能強(qiáng)大,支持柱狀圖 條形圖 折線圖 填充圖 雷達(dá)圖 扇形圖 氣泡圖等多種圖形

動畫效果細(xì)膩精致,流暢優(yōu)美.

支持類 Masonry 鏈?zhǔn)骄幊陶Z法

AAChartView +AAChartModel = Chart,在 AAChartKit 封裝庫當(dāng)中,遵循這樣一個極簡主義公式:圖表視圖控件+圖表模型=你想要的圖表.

真機(jī)美圖

Column Chart 柱狀圖	Columnrange Chart 條形范圍圖	Area Chart 區(qū)域填充圖

Line Chart 多組數(shù)據(jù)折線圖	Step Area Chart 直方折線填充圖	Step Line Chart 直方折線圖

使用方法 準(zhǔn)備工作

將項目demo中的文件夾AAChartKitLib拖入到所需項目中.

在你的項目的 .pch 全局宏定義文件中添加

#import "AAGlobalMacro.h"

正式開始

在你的視圖控制器文件中添加

#import "AAChartView.h"

創(chuàng)建視圖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;//設(shè)置圖表視圖的內(nèi)容高度(默認(rèn) contentHeight 和 AAChartView 的高度相同)
[self.view addSubview:chartView];

配置視圖模型AAChartModel

    AAChartModel *chartModel= AAObject(AAChartModel)
    .chartTypeSet(AAChartTypeColumn)//設(shè)置圖表的類型(這里以設(shè)置的為柱狀圖為例)
    .titleSet(@"編程語言熱度")//設(shè)置圖表標(biāo)題
    .subtitleSet(@"虛擬數(shù)據(jù)")//設(shè)置圖表副標(biāo)題
    .categoriesSet(@[@"Java",@"Swift",@"Python",@"Ruby", @"PHP",@"Go",@"C",@"C#",@"C++"])//設(shè)置圖表橫軸的內(nèi)容
    .yAxisTitleSet(@"攝氏度")//設(shè)置圖表 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];//圖表視圖對象調(diào)用圖表模型對象,繪制最終圖形

刷新圖形

 [chartView aa_refreshChartWithChartModel:chartModel];//更新 AAChartModel 數(shù)據(jù)之后,刷新圖表

特別說明

AAChartKit 中扇形圖、氣泡圖都?xì)w屬為特殊類型,所以想要繪制扇形圖、氣泡圖,圖表模型 AAChartModel 設(shè)置稍有不同,示例如下

繪制扇形圖,你需要這樣配置模型 AAChartModel

AAChartModel *chartModel= AAObject(AAChartModel)
        .chartTypeSet(AAChartTypePie)
        .titleSet(@"編程語言熱度")
        .subtitleSet(@"虛擬數(shù)據(jù)")
        .dataLabelEnabledSet(true)//是否直接顯示扇形圖數(shù)據(jù)
        .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(@"虛擬數(shù)據(jù)")
        .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]
                                ]),
                     
                     ]
                   )
        ;

當(dāng)前已支持的圖表類型有十種以上,說明如下

typedef NSString *AAChartType;
static AAChartType const AAChartTypeColumn      = @"column";     //柱形圖
static AAChartType const AAChartTypeBar         = @"bar";        //條形圖
static AAChartType const AAChartTypeArea        = @"area";       //折線區(qū)域填充圖
static AAChartType const AAChartTypeAreaspline  = @"areaspline"; //曲線區(qū)域填充圖
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";//柱形范圍圖

當(dāng)前已支持的圖表渲染動畫類型有三十種以上,說明如下

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一些重要屬性經(jīng)過配置之后的圖形示例如下 - line chart - 折線圖

- column chart - 柱形圖

- bar chart - 條形圖

- special area chart one - 區(qū)域填充圖一

- special area chart two - 區(qū)域填充圖二

- special area chart three - 區(qū)域填充圖三

- area spline range chart - 區(qū)域曲線范圍填充圖

- radar chart - 雷達(dá)圖

- polar chart - 極地圖

- pie chart - 扇形圖

- the oval style column chart - 頭部為橢圓形的柱形圖

- bubble chart - 氣泡圖

- mixed chart - 混合圖形

AAChartModel 屬性配置列表

AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, title);//標(biāo)題內(nèi)容
AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, subtitle);//副標(biāo)題內(nèi)容
AAPropStatementAndFuncStatement(copy, AAChartModel, AAChartSubtitleAlignType, subtitleAlign);//圖表副標(biāo)題文本水平對齊方式?？蛇x的值有 “l(fā)eft”，”center“和“right”。 默認(rèn)是：center.
AAPropStatementAndFuncStatement(copy, AAChartModel, AAChartType, chartType);//圖表類型
AAPropStatementAndFuncStatement(copy, AAChartModel, AAChartStackingType, stacking);//堆積樣式
AAPropStatementAndFuncStatement(copy, AAChartModel, AAChartSymbolType, symbol);//折線曲線連接點的類型："circle", "square", "diamond", "triangle","triangle-down"，默認(rèn)是"circle"
AAPropStatementAndFuncStatement(copy, AAChartModel, AAChartZoomType, zoomType);//縮放類型 AAChartZoomTypeX表示可沿著 x 軸進(jìn)行手勢縮放
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, pointHollow);//折線曲線的連接點是否為空心的
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, inverted);//x 軸是否垂直
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, xAxisReversed);// x 軸翻轉(zhuǎn)
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, yAxisReversed);//y 軸翻轉(zhuǎn)
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, crosshairs);//是否顯示準(zhǔn)星線(默認(rèn)顯示)
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, gradientColorEnable);//是否要為漸變色
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, polar);//是否極化圖形(變?yōu)槔走_(dá)圖)
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, dataLabelEnabled);//是否顯示數(shù)據(jù)
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, xAxisLabelsEnabled);//x軸是否顯示數(shù)據(jù)
AAPropStatementAndFuncStatement(strong, AAChartModel, NSArray *, categories);//圖表橫坐標(biāo)每個點對應(yīng)的名稱
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, xAxisGridLineWidth);//x軸網(wǎng)格線的寬度
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, yAxisLabelsEnabled);//y軸是否顯示數(shù)據(jù)
AAPropStatementAndFuncStatement(copy,   AAChartModel, NSString *, yAxisTitle);//y軸標(biāo)題
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, yAxisGridLineWidth);//y軸網(wǎng)格線的寬度
AAPropStatementAndFuncStatement(strong, AAChartModel, NSArray *, colorsTheme);//圖表主題顏色數(shù)組
AAPropStatementAndFuncStatement(strong, AAChartModel, NSArray *, series);
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, legendEnabled);//是否顯示圖例
AAPropStatementAndFuncStatement(copy,   AAChartModel ,AAChartLegendLayoutType, legendLayout);//圖例數(shù)據(jù)項的布局。布局類型： "horizontal" 或 "vertical" 即水平布局和垂直布局 默認(rèn)是：horizontal.
AAPropStatementAndFuncStatement(copy,   AAChartModel ,AAChartLegendAlignType, legendAlign);//設(shè)定圖例在圖表區(qū)中的水平對齊方式，合法值有l(wèi)eft，center 和 right。
AAPropStatementAndFuncStatement(copy,   AAChartModel ,AAChartLegendVerticalAlignType, legendVerticalAlign);//設(shè)定圖例在圖表區(qū)中的垂直對齊方式，合法值有 top，middle 和 bottom。垂直位置可以通過 y 選項做進(jìn)一步設(shè)定。
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);//柱狀圖長條圖頭部圓角半徑(可用于設(shè)置頭部的形狀,僅對條形圖,柱狀圖有效)
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, markerRadius);//折線連接點的半徑長度

更多圖形效果

支持監(jiān)聽用戶點擊事件及單指滑動事件

可通過給 AAChartView 示例對象設(shè)置代理方法,來實現(xiàn)監(jiān)聽用戶的點擊事件和單指滑動事件

 //設(shè)置 AAChartView 事件代理
 self.aaChartView.delegate = self;

 //實現(xiàn)對 AAChartView 事件代理的監(jiān)聽
 #pragma mark -- AAChartView delegate
 - (void)AAChartView:(AAChartView *)chartView moveOverEventWithMessage:(AAMoveOverEventMessageModel *)message {
 NSLog(@"

云服務(wù)器 GPU云服務(wù)器圖表庫 python 圖表庫數(shù)據(jù)可視化圖表庫收藏的精美的Flash

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50647.html

發(fā)表評論

登陸后可評論

0條評論

104828720

男|高級講師

我要關(guān)注我要私信

TA的文章

IR2103H橋驅(qū)動電路

閱讀 1830·2021-10-12 10:12
SiteGround分布式備份系統(tǒng)，更好的保護(hù)獨(dú)立站用戶數(shù)據(jù)

閱讀 2581·2021-09-29 09:42
C語言實現(xiàn)呼吸燈（HAL庫）

閱讀 2774·2021-09-03 10:28
前端每日實戰(zhàn)：71# 視頻演示如何用純 CSS 創(chuàng)作一個跳 8 字型舞的 loader

閱讀 2282·2019-08-30 15:54
使用purifycss精簡css

閱讀 1186·2019-08-30 15:53
Flex布局實例，水平垂直居中展示

閱讀 1419·2019-08-30 11:26
overflow屬性便捷語法的不兼容問題

閱讀 3385·2019-08-30 11:02
使用 <wbr> 解決長 URL 的換行問題

閱讀 2168·2019-08-30 11:02

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

AAChartKit--- 強(qiáng)大、精美、易用的開源iOS圖表庫

因項目功能較多,文件較大,請移步至 GitHub 下載. 親愛的,如果您使用時,覺得滿意,請賞一顆星星?,您的鼓勵將是我繼續(xù)努力的一大動力 .

AAChartKit項目,是在流行的開源前端圖表庫Highcharts的基礎(chǔ)上,封裝的面向?qū)ο蟮?一組簡單易用,極其精美的圖表繪制控件.

相關(guān)文章