昨天把AAChartKit和Charts整體描述了一下,講了一下兩個三方庫的優缺點。今天就注重講一下AAChartKit的使用。
0.簡介
AAChartKit 項目,是AAInfographics的 Objective-C
語言版本,是在流行的開源前端圖表框架Highcharts的基礎上,封裝的面向對象的,一組簡單易用,極其精美的圖表繪制控件.
特性:
1. 環境友好,兼容性強. 適配 iOS 6 +, 支持ARC,支持 Objective-C語言,配置簡單.同時更有 Swift 版本AAInfographics可供使用.
2. 功能強大,類型多樣. 支持柱狀圖 、條形圖 、折線圖 、曲線圖 、折線填充圖 、曲線填充圖、雷達圖、極地圖、扇形圖、氣泡圖、散點圖、區域范圍圖、柱形范圍圖、面積范圍圖、面積范圍均線圖、直方折線圖、直方折線填充圖、箱線圖、瀑布圖、熱力圖、桑基圖、金字塔圖、漏斗圖、等二十幾種類型的圖形,不可謂之不多.
3. 交互式圖形動畫. 有着清晰和充滿細節的用戶交互方式,與此同時,圖形渲染動畫效果細膩精致,流暢優美.有三十多種以上渲染動畫效果可供選擇,用戶可自由設置渲染圖形時的動畫時間和動畫類型,關於圖形渲染動畫類型,具體參見 AAChartKit 動畫類型.
4. 支持手勢縮放.支持圖表的手勢縮放和拖動閱覽,手勢縮放類型具體參見 AAChartKit 手勢縮放類型,默認禁用手勢縮放功能.
5. 極簡主義. AAChartView + AAChartModel = Chart,在 AAChartKit 圖表框架當中,遵循這樣一個極簡主義公式:圖表視圖控件 + 圖表模型 = 你想要的圖表.同另一款強大而又精美的圖表庫AAInfographics完全一致.
6. 鏈式編程語法. 支持類 Masonry 鏈式編程語法,一行代碼即可配置完成 AAChartModel模型對象實例.
7. 簡潔清晰,輕便易用. 最少僅僅需要 五行代碼 即可完成整個圖表的繪制工作(使用鏈式編程語法配置 AAChartModel 實例對象時,無論你寫多少行代碼,理論上只能算作是一行).
上面文字摘自官方文檔。
1.導入工程。
首先我們從github上下載示例工程。
由於AAChartKit暫不支持cocoapods導入(作者已經在開發中了,目測下幾個版本就會加上)。所以我們只能手動導入。
導入方法:
(1)將下載示例工程中的AAChartKitLib拖入自己的項目;
(2)在自己的項目的.pch文件中加入 #import "AAGlobalMacro.h",這是AAChartKIT的宏定義。
完成這兩步,就完成了AAChartKIT的導入工作。
2.使用方法
(1)在需要使用的界面中加入頭文件#import "AAChartKit.h"
(2)添加圖表
CGFloat chartViewWidth = self.view.frame.size.width; CGFloat chartViewHeight = self.view.frame.size.height-220; self.aaChartView = [[AAChartView alloc]init]; self.aaChartView.frame = CGRectMake(0, 60, chartViewWidth, chartViewHeight); self.aaChartView.delegate = self; self.aaChartView.scrollEnabled = NO;//禁用 AAChartView 滾動效果 // 設置aaChartVie 的內容高度(content height) // self.aaChartView.contentHeight = chartViewHeight*2; // 設置aaChartVie 的內容寬度(content width) // self.aaChartView.contentWidth = chartViewWidth*2; [self.view addSubview:self.aaChartView]; //設置 AAChartView 的背景色是否為透明 self.aaChartView.isClearBackgroundColor = YES;
(3)配置數據模型
self.aaChartModel= AAChartModel.new .chartTypeSet(chartType)//圖表類型 .titleSet(@"")//圖表主標題 .subtitleSet(@"")//圖表副標題 .yAxisLineWidthSet(@0)//Y軸軸線線寬為0即是隱藏Y軸軸線 .colorsThemeSet(@[@"#fe117c",@"#ffc069",@"#06caf4",@"#7dffc0"])//設置主體顏色數組 .yAxisTitleSet(@"")//設置 Y 軸標題 .tooltipValueSuffixSet(@"℃")//設置浮動提示框單位后綴 .backgroundColorSet(@"#4b2b7f") .yAxisGridLineWidthSet(@0)//y軸橫向分割線寬度為0(即是隱藏分割線) .seriesSet(@[ AASeriesElement.new .nameSet(@"2017") .dataSet(@[@7.0, @6.9, @9.5, @14.5, @18.2, @21.5, @25.2, @26.5, @23.3, @18.3, @13.9, @9.6]), AASeriesElement.new .nameSet(@"2018") .dataSet(@[@0.2, @0.8, @5.7, @11.3, @17.0, @22.0, @24.8, @24.1, @20.1, @14.1, @8.6, @2.5]), AASeriesElement.new .nameSet(@"2019") .dataSet(@[@0.9, @0.6, @3.5, @8.4, @13.5, @17.0, @18.6, @17.9, @14.3, @9.0, @3.9, @1.0]), AASeriesElement.new .nameSet(@"2020") .dataSet(@[@3.9, @4.2, @5.7, @8.5, @11.9, @15.2, @17.0, @16.6, @14.2, @10.3, @6.6, @4.8]), ] ); /*配置 Y 軸標注線,解開注釋,即可查看添加標注線之后的圖表效果(NOTE:必須設置 Y 軸可見)*/ // [self configureTheYAxisPlotLineForAAChartView]; [self.aaChartView aa_drawChartWithChartModel:_aaChartModel];
這就完成了基本模型操作。根據model中的不同設置可以顯示不同的圖表,還可以設置背景漸變、x軸y軸的自定義等功能。本文的代碼是選自示例工程最簡單的實現,其余復雜功能具體可以看示例工程中的代碼。
3.更新內容
如果你需要更新圖表內容,你應該閱讀以下內容,根據你的實際需要,選擇調用適合你的函數。
// 僅僅刷新圖形的數據(進行數據的動態更新操作時,建議使用此方法) /*僅僅更新 AAChartModel 對象的 series 屬性時,動態刷新圖表*/ [_aaChartView aa_onlyRefreshTheChartDataWithChartModelSeries:aaChartModelSeriesArray];
/*更新 AAChartModel 內容之后,刷新圖表*/ [_aaChartView aa_refreshChartWithChartModel:aaChartModel];
兩者區別:
刷新圖形除數據屬性 series
以外的其他屬性,首次繪制圖形完成之后,后續刷新圖表的屬性均建議調用下面的方法
注意:僅僅刷新圖形數據,則建議使用上面的aa_onlyRefreshTheChartDataWithChartModelSeries
方法。
4.特別說明:
AAChartKit 中扇形圖、氣泡圖都歸屬為特殊類型,所以想要繪制扇形圖、氣泡圖,圖表模型 AAChartModel 設置稍有不同。詳見官方demo。
5.總結:
看了這幾步就基本上完成了AAChartKIT的使用。我最開始使用的也是這個三方庫,雖然他獲取的點贊數不如Charts,但是它導入簡單,使用方便。但是由於我們的工程需要自定義顯示點擊后的MarkView和獲取點擊的圖標的數據,這個三方庫暫不支持我想要的功能。只能放棄了。
6.遇到的坑 摘自博客
我的實際需求是x軸要顯示n條數據,不管x軸對應的y軸有沒有數據都要顯示.
AAChartKit的x軸個數是自適應數據, AAChartModel 用於設置 X軸文字內容的屬性 categories是用來替換x軸屬性的, 並不決定x軸有多少條, 決定x軸有多少條數據的屬性是AASeriesElement的dataSet.