一：介紹
在項(xiàng)目中遇到數(shù)據(jù)展示需求時(shí)，往往會(huì)通過蜓氨，以列表的形式展示出數(shù)據(jù)或者以表格的形式展示聋袋。但是并不能直觀的觀察數(shù)據(jù)的變化，如果通過圖表的形式來展示穴吹，就可以更快捷的獲取到數(shù)據(jù)變化情況幽勒。
圖表展示的方式大致分為折線圖、柱狀圖港令、餅狀圖等等啥容，那么如何碼出一個(gè)高顏值原生折線圖呢？
源碼Demo獲取方法
關(guān)注 【網(wǎng)羅開發(fā)】微信公眾號(hào)顷霹，回復(fù)【96】便可領(lǐng)取咪惠。
網(wǎng)羅天下方法，方便你我開發(fā)淋淀，更多iOS技術(shù)干貨等待領(lǐng)取遥昧，所有文檔會(huì)持續(xù)更新，歡迎關(guān)注一起成長(zhǎng)朵纷！
下面來介紹一下如何使用炭臭。
二：項(xiàng)目展示
運(yùn)行后的展示截圖如下：
三： 實(shí)現(xiàn)思路分析
實(shí)現(xiàn)折線圖的核心代碼是下面四個(gè)類：
- FBYLineGraphBaseView
- FBYLineGraphContentView
*FBYLineGraphColorView - FBYLineGraphView
下面針對(duì)這四個(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 軸長(zhǎng)度凿试、y 軸長(zhǎng)度，代碼如下：
#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 軸長(zhǎng)度
@property (nonatomic, assign) CGFloat yAxis_L;
//y 軸長(zhǎng)度
@property (nonatomic, assign) CGFloat xAxis_L;
//繪圖
- (void)mapping;
//更新做標(biāo)注數(shù)據(jù)
- (void)reloadDatas;
@end
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
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
3. 折線圖核心代碼類(FBYLineGraphView類)
折線圖核心代碼類主要給引用類提供配置接口和數(shù)據(jù)接口盐类，其中包括表名寞奸、Y軸刻度標(biāo)簽title、Y軸最大值在跳、X軸刻度標(biāo)簽的長(zhǎng)度（單位長(zhǎng)度）枪萄、設(shè)置折線圖顯示的數(shù)據(jù)和對(duì)應(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)簽的長(zhǎng)度（單位長(zhǎng)度）
@property (nonatomic, assign) CGFloat xScaleMarkLEN;
/**
* 設(shè)置折線圖顯示的數(shù)據(jù)和對(duì)應(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
四：如何在項(xiàng)目中使用
1. 下載源碼
在demo中找到FBYLineGraph文件夾猫妙，將文件夾拖入自己的項(xiàng)目中瓷翻。DEMO截圖
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ì)圖就可以使用了对妄。
如果好用就請(qǐng)點(diǎn)贊關(guān)注湘今，會(huì)不定期更新更多干貨。更多源碼可以去GitHub下載剪菱。
希望可以幫助大家摩瞎，如有問題可加QQ群: 668562416 交流
如果哪里有什么不對(duì)或者不足的地方，還望讀者多多提意見或建議
如需轉(zhuǎn)載請(qǐng)聯(lián)系我孝常，經(jīng)過授權(quán)方可轉(zhuǎn)載旗们，謝謝
