一：介紹
在專案中遇到資料展示需求時， 往往會通過， 以清單的形式展示出資料或者以表格的形式展示。 但是並不能直觀的觀察資料的變化， 如果通過圖表的形式來展示， 就可以更快捷的獲取到資料變化情況。
圖表展示的方式大致分為折線圖、柱狀圖、餅狀圖等等， 那麼如何碼出一個高顏值原生折線圖呢？demo源碼已經放在GitHub上， 下面來介紹一下如何使用。
二：項目展示
運行後的展示截圖如下：
三： 實現思路分析
實現折線圖的核心代碼是下面四個類：
FBYLineGraphBaseView
FBYLineGraphContentView
FBYLineGraphColorView
FBYLineGraphView
下面針對這四個類實現做一個詳細的流程分析。
1. 折線圖基礎框架實現(FBYLineGraphBaseView類)
折線圖基礎框架包括Y軸刻度標籤、X軸刻度標籤、與x軸平行的格線的間距、格線的起始點、x 軸長度、y 軸長度， 代碼如下：
#import2. 折線圖資料內容顯示(FBYLineGraphContentView類)
折線圖資料內容顯示是繼承FBYLineGraphBaseView類進行實現， 其中主要包括， X軸最大值、資料內容來實現， 代碼如下：
3. 折線圖顏色控制類(FBYLineGraphColorView類)
折線圖顏色控制類主要控制選中遠點邊框寬度和整體佈局顏色， 代碼如下：
#import4. 折線圖核心代碼類(FBYLineGraphView類)
折線圖核心代碼類主要給引用類提供配置介面和資料介面， 其中包括表名、Y軸刻度標籤title、Y軸最大值、X軸刻度標籤的長度（單位長度）、設置折線圖顯示的資料和對應X坐標軸刻度標籤， 代碼如下：
#import三：如何在專案中使用
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];設置完上面的， 一個高顏值原生折線統計圖就可以使用了。
如果好用就請點贊關注，
如果哪裡有什麼不對或者不足的地方， 還望讀者多多提意見或建議
如需轉載請聯繫我， 經過授權方可轉載， 謝謝
作者：FBY展菲
連結：https://juejin.im/post/5a6061e06fb9a01c9b66003c