带渐变图层的曲线图绘制

在进行曲线图渐变图层绘制的时候，根据实际需要，在CFLineChartView的基础上增加了曲线绘制，和点击显示数值的处理。

渐变图层的绘制，百度了不少资料，可以新建渐变图层，然后为渐变图层设置mask路径即可。

效果图：

屏幕快照 2017-07-17 下午5.10.42.png

1.简单计算，确定x,y轴上的均值，以及通过记录最大Y值，和确定Y轴上最多有几个点
2.进行X轴和Y轴上的文本显示处理
3.绘制网格线

- (void)drawLines{
    UIBezierPath *path = [UIBezierPath bezierPath];
    //竖线 两条
    for (int i = 0; i < 2; i++) {
        [path moveToPoint:CGPointMake(HHLeftMargin+allW*i, HHTopMargin)];
        [path addLineToPoint:CGPointMake(HHLeftMargin+allW*i, HHTopMargin+allH)];
    }
    
    //横线 包括x轴
    for (int i = 0; i <= yCount; i++) {
        [path moveToPoint:CGPointMake(HHLeftMargin, HHViewSelfHeight-HHBottomMargin-everyY*i)];
        [path addLineToPoint:CGPointMake(HHViewSelfWidth-HHRightMargin, HHViewSelfHeight-HHBottomMargin-everyY*i)];
    }
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    shapeLayer.strokeColor = self.gridLineColor.CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.lineWidth = 1;
    [self.layer addSublayer:shapeLayer];
}

4.计算点的坐标（可在此步骤进行点的绘制）
5.曲线绘制和渐变填充

- (void)drawCurvePath{
//    [self gradientLayer];
    
    _path = [UIBezierPath bezierPath];
    [_path moveToPoint:[_pointArr[0] CGPointValue]];
    
    for (int i = 1; i < _pointArr.count; i++) {
        CGPoint prePoint = [_pointArr[i-1] CGPointValue];
        CGPoint nowpoint = [_pointArr[i] CGPointValue];
        
        //控制点 x均为两个点的中点
        CGPoint controlPoint1 = CGPointMake((prePoint.x+nowpoint.x)/2, prePoint.y);
        CGPoint controlPoint2 = CGPointMake((prePoint.x+nowpoint.x)/2, nowpoint.y);
        [_path addCurveToPoint:nowpoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];
    }
    
}

- (void)drawCurveLine{
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = _path.CGPath;
    shapeLayer.strokeColor = self.curveColor.CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.lineWidth = 1;
    [self.layer addSublayer:shapeLayer];
}

- (void)drawGradientLayer{
    UIBezierPath *gradientPath = [UIBezierPath bezierPathWithCGPath:_path.CGPath];

    gradientPath.lineWidth = 0.01;
    [gradientPath addLineToPoint:_xendPoint];
    [gradientPath addLineToPoint:_xStartPoint];
    [gradientPath addLineToPoint:[_pointArr[0] CGPointValue]];
    [gradientPath closePath];
    
    
    
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.bounds;
    NSArray *colors = @[(__bridge id)self.gradientStartColor.CGColor,(__bridge id)self.gradientEndColor.CGColor];
    gradientLayer.colors = colors;
    gradientLayer.locations = @[@0,@1];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(0, 1);
    [self.layer addSublayer:gradientLayer];
    _gradientLayer = gradientLayer;
    
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.strokeColor = [UIColor clearColor].CGColor;
    maskLayer.path = gradientPath.CGPath;
    maskLayer.lineWidth = 0.01;
    //    maskLayer.fillColor = [UIColor whiteColor].CGColor;
    self.gradientLayer.mask = maskLayer;
    
}

5.触摸时显示点的视图添加

demo：https://github.com/HannahZheng/singleChart