ios開發(fā)一個(gè)好看的折線圖
一：介紹
在項(xiàng)目中遇到數(shù)據(jù)展示需求時(shí)，往往會(huì)通過，以列表的形式展示出數(shù)據(jù)或者以表格的形式展示。但是并不能直觀的觀察數(shù)據(jù)的變化，如果通過圖表的形式來展示，就可以更快捷的獲取到數(shù)據(jù)變化情況。
圖表展示的方式大致分為折線圖、柱狀圖、餅狀圖等等，那么如何碼出一個(gè)高顏值原生折線圖呢？demo源碼已經(jīng)放在GitHub上，下面來介紹一下如何使用。
二：項(xiàng)目展示
運(yùn)行后的展示截圖如下：
三： 實(shí)現(xiàn)思路分析
實(shí)現(xiàn)折線圖的核心代碼是下面四個(gè)類：
- FBYLineGraphBaseView
- FBYLineGraphContentView
- FBYLineGraphColorView
- FBYLineGraphView
下面針對這四個(gè)類實(shí)現(xiàn)做一個(gè)詳細(xì)的流程分析。
1. 折線圖基礎(chǔ)框架實(shí)現(xiàn)(FBYLineGraphBaseView類)
折線圖基礎(chǔ)框架包括Y軸刻度標(biāo)簽、X軸刻度標(biāo)簽、與x軸平行的網(wǎng)格線的間距、網(wǎng)格線的起始點(diǎn)、x 軸長度、y 軸長度，代碼如下：
#import <uikit uikit.h=""> @interface FBYLineGraphBaseView : UIView //Y軸刻度標(biāo)簽 @property (nonatomic, strong) NSArray *yMarkTitles; //X軸刻度標(biāo)簽 @property (nonatomic, strong) NSArray *xMarkTitles; // 與x軸平行的網(wǎng)格線的間距 @property (nonatomic, assign) CGFloat xScaleMarkLEN; //網(wǎng)格線的起始點(diǎn) @property (nonatomic, assign) CGPoint startPoint; //x 軸長度 @property (nonatomic, assign) CGFloat yAxis_L; //y 軸長度 @property (nonatomic, assign) CGFloat xAxis_L; //繪圖 - (void)mapping; //更新做標(biāo)注數(shù)據(jù) - (void)reloadDatas; @end</uikit>
2. 折線圖數(shù)據(jù)內(nèi)容顯示(FBYLineGraphContentView類)
折線圖數(shù)據(jù)內(nèi)容顯示是繼承FBYLineGraphBaseView類進(jìn)行實(shí)現(xiàn)，其中主要包括，X軸最大值、數(shù)據(jù)內(nèi)容來實(shí)現(xiàn)，代碼如下：
#import <uikit uikit.h=""> #import "FBYLineGraphBaseView.h" @interface FBYLineGraphContentView : FBYLineGraphBaseView @property (nonatomic, strong) NSArray *valueArray; @property (nonatomic, assign) CGFloat maxValue; //繪圖 - (void)mapping; //更新折線圖數(shù)據(jù) - (void)reloadDatas; @end</uikit>
3. 折線圖顏色控制類(FBYLineGraphColorView類)
折線圖顏色控制類主要控制選中遠(yuǎn)點(diǎn)邊框?qū)挾群驼w布局顏色，代碼如下：
#import <uikit uikit.h=""> @interface FBYLineGraphColorView : UIView //顏色設(shè)置 @property (nonatomic, assign) CGFloat borderWidth; @property (nonatomic, assign) UIColor *borderColor; - (instancetype)initWithCenter:(CGPoint)center radius:(CGFloat)radius; @end</uikit>
4. 折線圖核心代碼類(FBYLineGraphView類)
折線圖核心代碼類主要給引用類提供配置接口和數(shù)據(jù)接口，其中包括表名、Y軸刻度標(biāo)簽title、Y軸最大值、X軸刻度標(biāo)簽的長度（單位長度）、設(shè)置折線圖顯示的數(shù)據(jù)和對應(yīng)X坐標(biāo)軸刻度標(biāo)簽，代碼如下：
#import <uikit uikit.h=""> @interface FBYLineGraphView : UIView //表名 @property (nonatomic, strong) NSString *title; //Y軸刻度標(biāo)簽title @property (nonatomic, strong) NSArray *yMarkTitles; //Y軸最大值 @property (nonatomic, assign) CGFloat maxValue; //X軸刻度標(biāo)簽的長度（單位長度） @property (nonatomic, assign) CGFloat xScaleMarkLEN; /** * 設(shè)置折線圖顯示的數(shù)據(jù)和對應(yīng)X坐標(biāo)軸刻度標(biāo)簽 * * @param xMarkTitlesAndValues 折線圖顯示的數(shù)據(jù)和X坐標(biāo)軸刻度標(biāo)簽 * @param titleKey 標(biāo)簽（如:9月1日） * @param valueKey 數(shù)據(jù) (如:80) */ - (void)setXMarkTitlesAndValues:(NSArray *)xMarkTitlesAndValues titleKey:(NSString *)titleKey valueKey:(NSString *)valueKey; - (void)mapping; - (void)reloadDatas; @end</uikit>
四：如何在項(xiàng)目中使用
1. 下載源碼
在demo中找到FBYLineGraph文件夾，將文件夾拖入自己的項(xiàng)目中。
2. 代碼引用
2.1 首先在項(xiàng)目中需要使用的頁面引用
#import "FBYLineGraphView.h"
2.2 初始化折線圖
FBYLineGraphView *LineGraphView = [[FBYLineGraphView alloc] initWithFrame:CGRectMake(10, 100, SCREEN_WIDTH - 20, 220)];
2.3 設(shè)置折線圖屬性
LineGraphView.title = @"折線統(tǒng)計(jì)圖"; // 折線圖名稱 LineGraphView.maxValue = 100; // 最大值 LineGraphView.xScaleMarkLEN = 60; // 每格的寬度如果不設(shè)置，系統(tǒng)默認(rèn)平均分配
2.4 給折線圖添加內(nèi)容
LineGraphView.yMarkTitles = @[@"0",@"20",@"40",@"60",@"80",@"100"]; // Y軸刻度標(biāo)簽
[LineGraphView setXMarkTitlesAndValues:@[@{@"item":@"1月1日",@"count":@10},@{@"item":@"1月2日",@"count":@80},@{@"item":@"1月3日",@"count":@68},@{@"item":@"1月4日",@"count":@100},@{@"item":@"1月5日",@"count":@60},@{@"item":@"1月6日",@"count":@56},@{@"item":@"1月7日",@"count":@11}] titleKey:@"item" valueKey:@"count"]; // X軸刻度標(biāo)簽及相應(yīng)的值
可以根據(jù)自己項(xiàng)目獲取的數(shù)據(jù)進(jìn)行修改，不過數(shù)據(jù)格式不要改動(dòng)。
2.5 設(shè)置完數(shù)據(jù)和屬性，繪制展示折線圖
//設(shè)置完數(shù)據(jù)等屬性后繪圖折線圖 [LineGraphView mapping]; [self.view addSubview:LineGraphView];
設(shè)置完上面的，一個(gè)高顏值原生折線統(tǒng)計(jì)圖就可以使用了。
如果好用就請點(diǎn)贊關(guān)注，會(huì)不定期更新更多干貨。更多源碼可以去GitHub下載。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于iOS如何使用UIKeyInput自定義密碼輸入框的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
舉例講解iOS應(yīng)用開發(fā)中對設(shè)計(jì)模式中的策略模式的使用
這篇文章主要介紹了iOS應(yīng)用設(shè)計(jì)中對設(shè)計(jì)模式中的策略模式的使用,示例代碼為傳統(tǒng)的Objective-C語言,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了Objective-C封裝字符串存儲(chǔ)操作示例,需要的朋友可以參考下2014-05-05
這篇文章給大家分享了在IOS中判斷字符串是不是純數(shù)字的三種方法，大家可以根據(jù)自己的需求來選擇對應(yīng)的方法實(shí)現(xiàn)，有需要的朋友們可以參考借鑒，下面來看看。2016-09-09
iOS驗(yàn)證手機(jī)號(hào)的正則表達(dá)式
這篇文章主要為大家詳細(xì)介紹了iOS驗(yàn)證手機(jī)號(hào)的正則表達(dá)式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
iOS runtime動(dòng)態(tài)添加方法示例詳解
Runtime是想要做好iOS開發(fā),或者說是真正的深刻的掌握OC這門語言所必需理解的東西。下面這篇文章主要給大家介紹了關(guān)于iOS runtime動(dòng)態(tài)添加方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2018-01-01
iOS報(bào)Multiple?commands?produceMultiple錯(cuò)誤的解決方案
這篇文章主要為大家介紹了iOS報(bào)Multiple?commands?produceMultiple錯(cuò)誤的解決方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
iOS 泛型中nullable、null resettable、null kindof 用法詳解
這篇文章主要介紹了iOS 泛型中nullable、null resettable、null kindof 用法詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了給大家介紹了iOS獲取Label高度的幾種方法，包括 view的sizeThatFits 方法、view的sizeToFit方法、NSString的sizeWithAttributes方法和NSString 的 boundingRectWithSize 方法，文中不僅介紹四種方法的實(shí)現(xiàn)，還進(jìn)行了對比，下面來一起看看吧。2016-11-11
這篇文章主要給大家介紹了關(guān)于iOS 12中無法獲取WiFi的SSID的相關(guān)資料，文中通過示例代碼以及圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09