在項(xiàng)目中遇到數(shù)據(jù)展示需求時(shí)，往往會通過，以列表的形式展示出數(shù)據(jù)或者以表格的形式展示。但是并不能直觀的觀察數(shù)據(jù)的變化，如果通過圖表的形式來展示，就可以更快捷的獲取到數(shù)據(jù)變化情況。
圖表展示的方式大致分為折線圖、柱狀圖、餅狀圖等等，那么如何碼出一個(gè)高顏值原生折線圖呢？demo源碼已經(jīng)放在GitHub上，下面來介紹一下如何使用。
運(yùn)行后的展示截圖如下：
實(shí)現(xiàn)折線圖的核心代碼是下面四個(gè)類：
下面針對這四個(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>
1. 下載源碼
GitHub 源碼鏈接
在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ù)格式不要改動。
2.5 設(shè)置完數(shù)據(jù)和屬性，繪制展示折線圖
//設(shè)置完數(shù)據(jù)等屬性后繪圖折線圖[LineGraphView mapping];[self.view addSubview:LineGraphView];
設(shè)置完上面的，一個(gè)高顏值原生折線統(tǒng)計(jì)圖就可以使用了。
如果好用就請點(diǎn)贊關(guān)注，會不定期更新更多干貨。更多源碼可以去GitHub下載。
新聞熱點(diǎn)
疑難解答
圖片精選
