一：介绍
在项目中遇到数据展示需求时，往往会通过，以列表的形式展示出数据或者以表格的形式展示。但是并不能直观的观察数据的变化，如果通过图表的形式来展示，就可以更快捷的获取到数据变化情况。
图表展示的方式大致分为折线图、柱状图、饼状图等等，那么如何码出一个高颜值原生折线图呢？demo源码已经放在GitHub上，下面来介绍一下如何使用。
二：项目展示
运行后的展示截图如下：
三： 实现思路分析
实现折线图的核心代码是下面四个类：
-
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</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类)
