碼出一個高顏值折線圖

一：介紹

在項目中遇到數據展現需求時，每每會經過，以列表的形式展現出數據或者以表格的形式展現。可是並不能直觀的觀察數據的變化，若是經過圖表的形式來展現，就能夠更快捷的獲取到數據變化狀況。

圖表展現的方式大體分爲折線圖、柱狀圖、餅狀圖等等，那麼如何碼出一個高顏值原生折線圖呢？

源碼Demo獲取方法

關注 【網羅開發】微信公衆號，回覆【96】即可領取。 網羅天下方法，方便你我開發，更多iOS技術乾貨等待領取，全部文檔會持續更新，歡迎關注一塊兒成長！

二：項目展現

運行後的展現截圖以下：

三： 實現思路分析

實現折線圖的核心代碼是下面四個類：

• FBYLineGraphBaseView
• FBYLineGraphContentView
• FBYLineGraphColorView
• FBYLineGraphView

下面針對這四個類實現作一個詳細的流程分析。

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
複製代碼

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
複製代碼

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
複製代碼

3. 折線圖核心代碼類(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
複製代碼

三：如何在項目中使用

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下載。

但願能夠幫助你們，若有問題可加QQ羣: 668562416 交流

若是哪裏有什麼不對或者不足的地方，還望讀者多多提意見或建議

如需轉載請聯繫我，通過受權方可轉載，謝謝

本篇已同步到我的博客：FBY展菲