iOS 绘制漂亮的折线图

效果图是这样的：

关键是在

基本策略 是描点 和 连线。

折线基础版本，我找到网上的第三方，UUChart 。 特点是朴素，简单，扩展性强。

效果图重点是在折线要有阴影，于是 重点 放在 折线发散的阴影 和 拆解第三方 整理出符合需求的面向对象良好的折线模型。

一 拆解：

分三个文件 HFChart,HFChartLineView,HFChartConst

HFChart : 折线视图控制器角色  控制展示数值范围，颜色，横线 等 必要UI 元素展示规则

HFChartConst : 折线需要展示的一些静态参数 比如 45设定为行间距 就可以设置在 Const 里面。

HFChartLine:  主要是实施绘制 描点 连线 和 绘制我们需要的阴影

二 阴影

说是阴影，实际 是颜色的渐变。

（1）之前 思考方向  这个阴影 是两点之间的连线 发散出来的， 就是这个执拗思路莫名把问题难度加大。因为 折线的若干个点，相邻 每两个点之间的连线都要有阴影 那么阴影方向？ 阴影重叠？ 等问题怎么解决？ 越想越复杂

（2）从颜色渐变考虑

创建渐变图层，根据折线点，mask遮罩区域，剩下的渐变图层放在视图背景图上 就是阴影啦。有没有一种豁然开朗的感觉？

举例子：

(2.1)绘制渐变图层：CAGradientLayer  是用来绘制渐变图层的工具，作为关键字可以搜索到很多参考资料

    //实现背景渐变
    //初始化我们需要改变背景色的UIView，并添加在视图上
    self.theView = [[UIView alloc] initWithFrame:CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, self.view.hf_width)];
    [self.view addSubview:self.theView];
    //初始化CAGradientlayer对象，使它的大小为UIView的大小
    self.gradientLayer = [CAGradientLayer layer];
    self.gradientLayer.frame = self.theView.bounds;
    //将CAGradientlayer对象添加在我们要设置背景色的视图的layer层
    [self.theView.layer addSublayer:self.gradientLayer];
    //设置渐变区域的起始和终止位置（范围为0-1）
    //不设置默认从上到下渐变，如果使用startPoint endPoint 就是右下角对角线 方向渐变 也可以自定义方向
   // self.gradientLayer.startPoint = CGPointMake(0, 0);
   // self.gradientLayer.endPoint = CGPointMake(1, 1);
    //设置颜色数组(我写的是白色的渐变)
    CGColorRef color1 = [UIColor colorWithWhite:1.000 alpha:0.7].CGColor;
    CGColorRef color2 = [UIColor colorWithWhite:1.000 alpha:0.0].CGColor;
    [_gradientLayer setColors:@[(__bridge id)color1,(__bridge id)color2]];//设置颜色分割点（范围：0-1）
    self.gradientLayer.locations = @[@(0.0f), @(0.9f)];

效果图如下：（为了看清楚 白色的渐变遮罩 我选择了醒目的 紫色做背景色）

(2.2) 在知道已知点集（有序点 折点顺序）合添加遮罩方法

//给渐变层设置 mask 属性
    {
        // 设置只显示一个三角形范围的渐变色
        UIBezierPath *shapeLayerPath = [[UIBezierPath alloc] init];
        // 点的坐标是相对于渐变层的
        [shapeLayerPath moveToPoint:CGPointMake(0,self.view.hf_width)];//第一个点
        [shapeLayerPath addLineToPoint:CGPointMake(self.view.hf_width/2, 0)];//第二个点
        [shapeLayerPath addLineToPoint:CGPointMake(self.view.hf_width, self.view.hf_width)];//第三个点
        CAShapeLayer *shapeLayer = [CAShapeLayer layer];
        shapeLayer.path = shapeLayerPath.CGPath;
        self.gradientLayer.mask = shapeLayer; 
    }

效果图：

三 剩下的就是组织自己的折线模型结构了 已经是很简单了有没有？

整理HFChart HFChartConst HFChartLine 给 HFChartLine 添加遮罩 完成

参考 ：

1 . https://github.com/ZhipingYang/UUChartView

2.http://www.jb51.net/article/79948.htm