在項目中遇到數據展示需求時，往往會通過，以列表的形式展示出數據或者以表格的形式展示。但是并不能直觀的觀察數據的變化，如果通過圖表的形式來展示，就可以更快捷的獲取到數據變化情況。
圖表展示的方式大致分為折線圖、柱狀圖、餅狀圖等等，那么如何碼出一個高顏值原生折線圖呢？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. 下載源碼
GitHub 源碼鏈接
在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下載。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
