ios开发一个好看的折线图

一：介绍

在项目中遇到数据展示需求时，往往会通过，以列表的形式展示出数据或者以表格的形式展示。但是并不能直观的观察数据的变化，如果通过图表的形式来展示，就可以更快捷的获取到数据变化情况。

图表展示的方式大致分为折线图、柱状图、饼状图等等，那么如何码出一个高颜值原生折线图呢？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轴最大值、数据内容来实现，代码如下：