折线图

一个折线图的需求，好久没写过折线图了，打算自己弄下。

对于折线图或者条形统计图来说，我很少自己去封装，并不是有多难有多麻烦(其实找到规律之后反而很简单)，而是我觉得根本没有一个好的封装方式，UI样式总与你做过的不一样，你还是要不停地调整。所以我感觉过度的封装折线图意义不大，重要的是学到折线图、曲线图、条形图等图表的处理方式。

对于折线图来说，一般都是CAShapeLayer+UIBezierPath进行路径绘制，难度低于需要找控制点的曲线图，主要是对位置的处理。

那么来分析下上面的视图需求，我把整个图拆分成以下几点：

1.坐标转换部分

这里分为三个部分：原始数据、iOS平台坐标系数据(左上角为起点)、数学概念上坐标系数据(左下角为起点)。

我们需要对原始数据进行等比例加工，来转换成适合我们视图的坐标数据。一般来说，X轴直接按数据个数进行等比例分隔，而Y轴，需要获取到最大值拿到临界点，再按最大值的若干倍来布局Y轴的值。原始数据的处理对应的是数学概念上坐标系，而iOS平台下的坐标系则是以左上角为起点，需要我们再处理一次。这三组数据建议均做保留，OC中用Model保存，swift中用结构体保存，下面会用到。

2.折线部分

CAShapeLayer性能远胜于draw:rect:，所以这里采用CAShapeLayer进行画线布局。UI绘制中所用到的坐标系全都是iOS平台坐标系统，我们只需把上一步中的点连起来即可。

3.颜色渐变部分

CAGradientLayer用来搞定渐变效果。当然，单纯的CAGradientLayer无法产生多边形的效果，说到多边形，自然就又回到了CAShapeLayer上，给CAGradientLayer加个遮罩，简简单单达到渐变的多边形。

4.层级部分

由于layer的反复叠加，上一层的layer会遮挡下一层，并且渐变效果使用mask，mask的存在抹去了非覆盖部分，这就会使得折线部分的层级和其他视图层级有点小问题：先加X轴上的横线(无论是view还是layer的方式)会使得横线被覆盖掉，后加X轴上的横线又会遮挡折线部分。如何搞一个隐约模糊的效果呢？那么就要用到Layer的不透明效果了：opacity，调整透明效果，达到X轴浮现。值得注意的是这个属性也具有Animatable特性，可以简单快速达到一些动画效果。

5.触摸视图变化部分

触摸部分包括点击和按住移动。在

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;

中轻松获得事件回调。竖线的view效果很好达到，我们需要处理一下折线上的点的效果，要达到这个效果我们就要计算出两点间的斜率。这里需要注意的是，计算斜率时用的是数学坐标系统，得到真实的y时还需要向iOS系统转换一下。

6.logo部分(在demo中还未体现)

这部分指的是当前点对应的信息，像下面这样。

这部分需要注意的是左右临边界和中间斜率k对logo在点左点右的影响。

从优先级来说，临边界 > 斜率k

为了达到良好的效果，在临左边界时logo应在右边显示，临右边界时应在左显示；在中间时，k < 0则在右显示，k > 0则在左显示。

Demo地址

因为是从工程中剥离出来的，也未做太多处理，logo部分暂时还未做。