在上篇 在坐标系中绘制数据曲线 文章中，有人问如何在曲线下面加入渐变颜色，我尝试了一下，采用CAShapeLayer ,CAGradientLayer组合可以，修改上一次的代码，如下：

-(void)setupUI
{
    _isNeedDisplayXData = YES;
    _isNeedDisplayYData = YES;
    _coordinateBackgroundImgView = [[UIImageView alloc] init];
    [self addSubview:_coordinateBackgroundImgView];
    
    _shapeLayer = [CAShapeLayer layer];
    _shapeLayer.fillColor = [UIColor blackColor].CGColor;
    _shapeLayer.strokeColor = [UIColor clearColor].CGColor;
    
    _greadientlayer = [CAGradientLayer layer];
    _greadientlayer.colors = @[(id)[UIColor colorWithRed:30/255.0 green:50/255. blue:60/255. alpha:1.0].CGColor,(id)[UIColor colorWithRed:50/255.0 green:90/255. blue:50/255. alpha:1.0].CGColor,(id)[UIColor colorWithRed:20/255.0 green:90/255. blue:50/255. alpha:1.0].CGColor,(id)[UIColor colorWithRed:120/255.0 green:10/255. blue:30/255. alpha:1.0].CGColor];
    [self.layer addSublayer:_greadientlayer];

    _greadientlayer.mask = _shapeLayer;
    
    _curveShapeLayer = [CAShapeLayer layer];
    _curveShapeLayer.lineWidth = 1;
    _curveShapeLayer.fillColor = [UIColor clearColor].CGColor;
    if (!_curveColor) {
        _curveColor = [UIColor brownColor];
    }
    _curveShapeLayer.strokeColor =  _curveColor.CGColor;
    [self.layer addSublayer:_curveShapeLayer];

}

-(void)drawDataImg
{
    if (!_dataArrary || _dataArrary.count <=0) {
        return;
    }
    
    dispatch_queue_t queue = NULL;

    if (_isDynamicRefreshData) {
        //创建串行队列
        if(!_queue)
        {
            _queue = dispatch_queue_create("com.draw.dataImg", DISPATCH_QUEUE_SERIAL);

        }
        queue = _queue;
    }
    else
    {
        queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
    }
    
    dispatch_async(queue, ^{
        
//        UIGraphicsBeginImageContext(_shapeLayer.frame.size);
//        CGContextRef context = UIGraphicsGetCurrentContext();
        UIBezierPath *bezierPath = [UIBezierPath bezierPath];
        
        CGPoint point = [_dataArrary[0] CGPointValue];
        
        CGFloat xLength = _shapeLayer.frame.size.width;
        CGFloat yLength = _shapeLayer.frame.size.height;
        CGFloat xValue = point.x;
        CGFloat yValue = point.y;
        
        [[UIColor clearColor] setFill];
        if (!_curveColor) {
            _curveColor = [UIColor whiteColor];
        }
        [_curveColor setStroke];
//        CGContextFillEllipseInRect(context, _shapeLayer.bounds);
        
        [bezierPath moveToPoint:CGPointMake((xValue / _xMaxData) * xLength, yLength - (yValue / _yMaxData ) * yLength)];
        
        for (NSValue *value in _dataArrary)
        {
            point = [value CGPointValue];
            xValue = point.x;
            yValue = point.y;

            [bezierPath addLineToPoint:CGPointMake((xValue / _xMaxData) * xLength, yLength - (yValue / _yMaxData ) * yLength)];
            
        }
        
//        CGContextAddPath(context, bezierPath.CGPath);
//        CGContextDrawPath(context, kCGPathFillStroke);
//        
//        
//        CGContextFillPath(context);
        
        
        _dataDispalyImg = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        
        UIBezierPath *orgPath = [UIBezierPath bezierPathWithCGPath:bezierPath.CGPath];
        point = [_dataArrary[_dataArrary.count - 1] CGPointValue];
        xValue = point.x;
        yValue = point.y;

        [bezierPath addLineToPoint:CGPointMake((xValue / _xMaxData) * xLength, yLength)];
        [bezierPath addLineToPoint:CGPointMake(0, yLength)];

        dispatch_async(dispatch_get_main_queue(), ^{
            
            _curveShapeLayer.path = orgPath.CGPath;
            _shapeLayer.path = bezierPath.CGPath;
        });
        
    });
}

运行结果：

88.mov_1455935452.gif