在項目中遇到數據展示需求時，往往會通過，以列表的形式展示出數據或者以表格的形式展示。但是并不能直觀的觀察數據的變化，如果通過圖表的形式來展示，就可以更快捷的獲取到數據變化情況。
圖表展示的方式大致分為折線圖、柱狀圖、餅狀圖等等，那么如何碼出一個高顏值原生折線圖呢？demo源碼已經放在GitHub上，下面來介紹一下如何使用。
運行后的展示截圖如下：
實現折線圖的核心代碼是下面四個類：
下面針對這四個類實現做一個詳細的流程分析。
1. 折線圖基礎框架實現(FBYLineGraphBaseView類)
折線圖基礎框架包括Y軸刻度標簽、X軸刻度標簽、與x軸平行的網格線的間距、網格線的起始點、x 軸長度、y 軸長度，代碼如下：
#import <uikit uikit.h="">@interface FBYLineGraphBaseView : UIView//Y軸刻度標簽@property (nonatomic, strong) NSArray *yMarkTitles;//X軸刻度標簽@property (nonatomic, strong) NSArray *xMarkTitles;// 與x軸平行的網格線的間距@property (nonatomic, assign) CGFloat xScaleMarkLEN;//網格線的起始點@property (nonatomic, assign) CGPoint startPoint;//x 軸長度@property (nonatomic, assign) CGFloat yAxis_L;//y 軸長度@property (nonatomic, assign) CGFloat xAxis_L;//繪圖- (void)mapping;//更新做標注數據- (void)reloadDatas;@end</uikit>
2. 折線圖數據內容顯示(FBYLineGraphContentView類)
折線圖數據內容顯示是繼承FBYLineGraphBaseView類進行實現，其中主要包括，X軸最大值、數據內容來實現，代碼如下：
#import <uikit uikit.h="">#import "FBYLineGraphBaseView.h"@interface FBYLineGraphContentView : FBYLineGraphBaseView@property (nonatomic, strong) NSArray *valueArray;@property (nonatomic, assign) CGFloat maxValue;//繪圖- (void)mapping;//更新折線圖數據- (void)reloadDatas;@end</uikit>
3. 折線圖顏色控制類(FBYLineGraphColorView類)
折線圖顏色控制類主要控制選中遠點邊框寬度和整體布局顏色，代碼如下：
#import <uikit uikit.h="">@interface FBYLineGraphColorView : UIView//顏色設置@property (nonatomic, assign) CGFloat borderWidth;@property (nonatomic, assign) UIColor *borderColor;- (instancetype)initWithCenter:(CGPoint)center radius:(CGFloat)radius;@end</uikit>
4. 折線圖核心代碼類(FBYLineGraphView類)
折線圖核心代碼類主要給引用類提供配置接口和數據接口，其中包括表名、Y軸刻度標簽title、Y軸最大值、X軸刻度標簽的長度（單位長度）、設置折線圖顯示的數據和對應X坐標軸刻度標簽，代碼如下：
#import <uikit uikit.h="">@interface FBYLineGraphView : UIView//表名@property (nonatomic, strong) NSString *title;//Y軸刻度標簽title@property (nonatomic, strong) NSArray *yMarkTitles;//Y軸最大值@property (nonatomic, assign) CGFloat maxValue;//X軸刻度標簽的長度（單位長度）@property (nonatomic, assign) CGFloat xScaleMarkLEN;/** * 設置折線圖顯示的數據和對應X坐標軸刻度標簽 * * @param xMarkTitlesAndValues 折線圖顯示的數據和X坐標軸刻度標簽 * @param titleKey 標簽（如:9月1日） * @param valueKey 數據 (如:80) */- (void)setXMarkTitlesAndValues:(NSArray *)xMarkTitlesAndValues titleKey:(NSString *)titleKey valueKey:(NSString *)valueKey;- (void)mapping;- (void)reloadDatas;@end</uikit>
1. 下載源碼
在demo中找到FBYLineGraph文件夾，將文件夾拖入自己的項目中。
2. 代碼引用
2.1 首先在項目中需要使用的頁面引用
#import "FBYLineGraphView.h"
2.2 初始化折線圖
FBYLineGraphView *LineGraphView = [[FBYLineGraphView alloc] initWithFrame:CGRectMake(10, 100, SCREEN_WIDTH - 20, 220)];
2.3 設置折線圖屬性
LineGraphView.title = @"折線統計圖"; // 折線圖名稱LineGraphView.maxValue = 100; // 最大值LineGraphView.xScaleMarkLEN = 60; // 每格的寬度如果不設置，系統默認平均分配
2.4 給折線圖添加內容
LineGraphView.yMarkTitles = @[@"0",@"20",@"40",@"60",@"80",@"100"]; // Y軸刻度標簽[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軸刻度標簽及相應的值可以根據自己項目獲取的數據進行修改，不過數據格式不要改動。
2.5 設置完數據和屬性，繪制展示折線圖
//設置完數據等屬性后繪圖折線圖[LineGraphView mapping];[self.view addSubview:LineGraphView];
設置完上面的，一個高顏值原生折線統計圖就可以使用了。
如果好用就請點贊關注，會不定期更新更多干貨。更多源碼可以去GitHub下載。
新聞熱點
疑難解答
