【iOS】圖表實現-AAChartKit


昨天把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.

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM