美文网首页iOS开发那点儿事锻炼吃饭的家伙
iOS 画折线图(包括平滑曲线和渐变阴影)

iOS 画折线图(包括平滑曲线和渐变阴影)

作者: 天明天 | 来源:发表于2017-06-01 11:36 被阅读609次

前几天接到业务需求 需要画折线图,网上也看了许多的资料,也有许多封装好的第三方类库比如AAChartKitXYPieChartPNChart等好多,不过这些类库大多封装的太厉害了,我这边的业务需求有比较简单,就是单纯的绘制折线图并保证是平滑的曲线,而且要有添加渐变阴影。说下我的思路:

  • 先画整个表的横纵坐标系
  • 画出纵坐标延伸的网格线
  • 添加横纵坐标数字
  • 绘制折线
  • 变成平滑曲线
  • 绘制渐变阴影
    最后得到效果是这样的


    animiation.gif

    具体的代码如下:


首先画出横纵坐标系,以及横网格线
-(void)makeChartXView{
    //X轴
    layerX = [CAShapeLayer layer];
    layerX.frame = CGRectMake(25,LABLE_HEIGHT + 25, LABLE_WIDTH, 1);
    layerX.backgroundColor = [UIColor colorFromHexCode:@"d8d8d8"].CGColor;
    [self.layer addSublayer:layerX];
    
}
-(void)makeChartYView{

    //左侧纵坐标轴
    layerY = [CAShapeLayer layer];
    layerY.frame = CGRectMake(25,25, 1, LABLE_HEIGHT);
    layerY.backgroundColor = [[UIColor colorFromHexCode:@"d8d8d8"] CGColor];
    [self.layer addSublayer:layerY];
    
    float height= 30;
    // 纵坐标上的横线
    for (int i=0; i<5; i++) {
        if (i!=5) {
            CAShapeLayer *layer5 = [CAShapeLayer layer];
            layer5.frame = CGRectMake(0, i*height,LABLE_WIDTH, 0.5f);
            layer5.backgroundColor = [[UIColor colorFromHexCode:@"d8d8d8"] CGColor];
            [layerY addSublayer:layer5];
        }
    }
    
    // 右侧侧纵轴线
    CAShapeLayer *layerLeft = [CAShapeLayer layer];
    layerLeft.frame = CGRectMake(VIEW_WIDTH-2,25, 0.5f, LABLE_HEIGHT);
    layerLeft.backgroundColor = [[UIColor colorFromHexCode:@"d8d8d8"] CGColor];
    [self.layer addSublayer:layerLeft];

}
添加横纵坐标数字
-(void)setArrX:(NSArray *)arrX{
   _arrX = arrX;
   
   [layerX removeFromSuperlayer];
   [self makeChartXView];
   
   CGFloat width = (VIEW_WIDTH-30)/3;
   
   for (NSInteger i=0; i<arrX.count; i++) {
       
       UILabel *label = (UILabel*)[self viewWithTag:5000+i];
       [label removeFromSuperview];
   }
   //横坐标上的数字
   for (int i=0; i<arrX.count; i++) {
       
       UILabel *layer3 = [UILabel new];
       layer3.frame = CGRectMake((VIEW_WIDTH - LABLE_WIDTH)+i*width+25, VIEW_HEIGHT - 20, width, 20);
       layer3.text = [NSString stringWithFormat:@"%@",_arrX[i]];
       layer3.font = [UIFont systemFontOfSize:12];
       layer3.textAlignment = NSTextAlignmentLeft;
       layer3.tag = 5000+i;
       layer3.textColor = [UIColor colorFromHexCode:@"999999"];
       [self addSubview:layer3];
   }

}
-(void)setArrY:(NSArray *)arrY{
   _arrY = arrY;
   
   [layerY removeFromSuperlayer];
   [self makeChartYView];
   
   float height= 30;

   for (NSInteger i=0; i<6; i++) {
       
       UILabel *label = (UILabel*)[self viewWithTag:4000+i];
       [label removeFromSuperview];
   }
   
   //纵坐标上的数字
   for (int i=0; i<6; i++) {
       
       UILabel *layer6 = [UILabel new];
       layer6.frame = CGRectMake(-5,LABLE_HEIGHT-(i*height)+15, 25, 20);
       layer6.text = [NSString stringWithFormat:@"%@",_arrY[i]];
       layer6.font = [UIFont systemFontOfSize:12];
       layer6.textAlignment = NSTextAlignmentRight;
       layer6.tag = 4000+i;
       layer6.textColor = [UIColor colorFromHexCode:@"999999"];
       [self addSubview:layer6];

   }
}
根据横纵坐标数据源绘图
-(void)drawSmoothViewWithArrayX:(NSArray*)pathX andArrayY:(NSArray*)pathY andScaleX:(float)X{

    [_bottomLayer removeFromSuperlayer];
    [self makeBottomlayer];
    [_pointArr removeAllObjects];
    
    // 创建layer并设置属性
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.lineWidth =  3.0f;
    layer.lineCap = kCALineCapRound;
    layer.lineJoin = kCALineJoinRound;
    layer.strokeColor = [UIColor colorFromHexCode:@"00c1ed"].CGColor;
    [_bottomLayer addSublayer:layer];
    
    CGPoint point;
    // 创建贝塞尔路径~
    UIBezierPath *path = [UIBezierPath bezierPath];

    //X轴和Y轴的倍率
    CGFloat BLX = (LABLE_WIDTH-15)/X;
    CGFloat BLY = LABLE_HEIGHT/[[_arrY lastObject] floatValue];
    
    for (int i= 0; i< pathY.count; i++) {
        
        CGFloat X = [pathX[i] floatValue]*BLX +(VIEW_WIDTH - LABLE_WIDTH) +10;
        CGFloat Y = LABLE_HEIGHT - [pathY[i] floatValue]*BLY +(VIEW_HEIGHT - LABLE_HEIGHT)/2;//(VIEW_HEIGHT - LABLE_HEIGHT)/2是指图表在背景大图的的height
        
        //NSLog(@"space==%lf",VIEW_HEIGHT - LABLE_HEIGHT);
        point = CGPointMake(X, Y);

        [_pointArr addObject:[NSValue valueWithCGPoint:point]];
        
        if (i==0) {
            [path moveToPoint:point];//起点
        }
        
        [path addLineToPoint:point];
    }
    
    path = [path smoothedPathWithGranularity:20];
    // 关联layer和贝塞尔路径~
    layer.path = path.CGPath;
    
    // 创建Animation
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.fromValue = @(0.0);
    animation.toValue = @(3.0);
    animation.autoreverses = NO;
    animation.duration = 6.0;
    
    // 设置layer的animation
    [layer addAnimation:animation forKey:nil];
    
    layer.strokeEnd = 1;
    anmitionLayer = layer;
    
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        
        [self drawGradient];
        
    });

}
最后是渐变阴影的添加和刷新绘图动画的代码
#pragma mark 渐变阴影
- (void)drawGradient {
    
    [gradientLayer removeAllAnimations];
    [gradientLayer removeFromSuperlayer];
    
    gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = CGRectMake(0,0, LABLE_WIDTH, VIEW_HEIGHT -23);
    gradientLayer.colors =@[(__bridge id)[UIColor colorWithRed:46/255.0 green:200/255.0 blue:237/255.0 alpha:0.5].CGColor,(__bridge id)[UIColor colorWithRed:240/255.0 green:252/255.0 blue:254/255.0 alpha:0.4].CGColor];
    
    UIBezierPath *gradientPath = [[UIBezierPath alloc] init];
    
   // NSLog(@"Y====%lf",[[_pointArr firstObject] CGPointValue].y);

    CGPoint firstPoint = CGPointMake([[_pointArr firstObject] CGPointValue].x,LABLE_HEIGHT+25) ;

    CGPoint lastPoint =  [[_pointArr lastObject] CGPointValue];
    
   // NSLog(@"firstPointX===%lf firstpointY==%lf",firstPoint.x,firstPoint.y);
    [gradientPath moveToPoint:firstPoint];
    
    for (int i = 0; i < _pointArr.count; i ++) {
        [gradientPath addLineToPoint:[_pointArr[i] CGPointValue]];
    }
    // 圆滑曲线
    gradientPath = [gradientPath smoothedPathWithGranularity:20];
    
    CGPoint endPoint = lastPoint;
    endPoint = CGPointMake(endPoint.x , VIEW_WIDTH +23);
    [gradientPath addLineToPoint:endPoint];
    
    CAShapeLayer *arc = [CAShapeLayer layer];
    arc.path = gradientPath.CGPath;
    gradientLayer.mask = arc;
    [anmitionLayer addSublayer:gradientLayer];
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    animation.fromValue = @(0.3);
    animation.toValue = @(1);
    animation.autoreverses = NO;
    animation.duration = 2.0;
    [gradientLayer addAnimation:animation forKey:nil];
    
}
#pragma mark 刷新绘图动画
-(void)refreshChartAnmition{
    
    // 创建Animation
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.fromValue = @(0.0);
    animation.toValue = @(3.0);
    animation.autoreverses = NO;
    animation.duration = 6.0;
    
    // 设置layer的animation
    [anmitionLayer addAnimation:animation forKey:nil];
    
    anmitionLayer.strokeEnd = 1;
    
    [gradientLayer removeAllAnimations];
    [gradientLayer removeFromSuperlayer];
    
     dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
         [gradientLayer removeAllAnimations];
         [gradientLayer removeFromSuperlayer];
         
        [self drawGradient];
        
    });
}

具体封装好的代码可以去我的:GitHub

相关文章

网友评论

    本文标题:iOS 画折线图(包括平滑曲线和渐变阴影)

    本文链接:https://www.haomeiwen.com/subject/phvsfxtx.html