iOS开发（OC）——折线图的绘制（带动画）

1. 新建一个DrawLine类继承UIView
2. DrawLine.h代码

@property (nonatomic,strong)NSMutableArray *data;



@property (nonatomic, strong) CAShapeLayer *lineChartLayer;
@property (nonatomic, strong)UIBezierPath * path1;
/** 渐变背景视图 */
@property (nonatomic, strong) UIView *gradientBackgroundView;
/** 渐变图层 */
@property (nonatomic, strong) CAGradientLayer *gradientLayer;
/** 颜色数组 */
@property (nonatomic, strong) NSMutableArray *gradientLayerColors;



@property (nonatomic,assign)int ySpace;//y轴间隔
@property (nonatomic,assign)int yNum;//y轴的分点数
@property (nonatomic,assign)int xSpace;//x轴间隔
@property (nonatomic,assign)int xNum;//x轴的分点数
@property (nonatomic,strong)NSString *ytitle;//y轴标题
@property (nonatomic,strong)NSString *xtitle;//x轴标题
@property (nonatomic,assign)BOOL showNum;//显示数值

//建立坐标
-(void)initCoordinate;
//开始画图
-(void)beginDraw;

3.DrawLine.m代码

- (instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor whiteColor];
        [self drawGradientBackgroundView];
    }
    return self;
}



-(void)initCoordinate
{
    //y轴
//    UIView *view=[[UIView alloc] initWithFrame:CGRectMake(50, 15, 1, self.frame.size.height-60)];
//    view.backgroundColor=[UIColor lightGrayColor];
//    [self addSubview:view];

    UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake(70, 10, 150, 21)];
    label.text=self.ytitle;
    label.font=[UIFont systemFontOfSize:12];
    label.textColor=[UIColor grayColor];
    [self addSubview:label];


    for(int i=self.yNum;i>0;i--){

        UIView *cutoffLine=[[UIView alloc] initWithFrame:CGRectMake(51, 15+(self.frame.size.height-60)/(self.yNum+1)*(self.yNum+1-i), self.frame.size.width-100, 1)];
        cutoffLine.backgroundColor=[UIColor colorWithRed:245/255.0 green:245/255.0 blue:245/255.0 alpha:1.0];
        [self.gradientBackgroundView addSubview:cutoffLine];

        UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake(0, cutoffLine.center.y-10.5, 45, 21)];
        label.font=[UIFont systemFontOfSize:10];
        label.textColor=[UIColor grayColor];
        label.textAlignment=NSTextAlignmentRight;
        label.text=[NSString stringWithFormat:@"%d",self.ySpace*i];
        [self addSubview:label];
    }



    //x轴
    UIView *view=[[UIView alloc] initWithFrame:CGRectMake(50, 15+self.frame.size.height-60, screen_width-100, 1)];
    view.backgroundColor=[UIColor lightGrayColor];
    [self addSubview:view];

    for(int i=0;i<self.xNum;i++){
        UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake((screen_width-100)/self.xNum*i+50, self.frame.size.height-40, (screen_width-100)/self.xNum, 21)];
        label.font=[UIFont systemFontOfSize:10];
        label.textColor=[UIColor grayColor];
        label.text=[NSString stringWithFormat:@"%d",self.xSpace*i];
        [self addSubview:label];
    }

    label=[[UILabel alloc] initWithFrame:CGRectMake(screen_width-70, 20+self.frame.size.height-60, 70, 21)];
    label.text=self.xtitle;
    label.font=[UIFont systemFontOfSize:12];
    label.textColor=[UIColor grayColor];
    [self addSubview:label];
}


#pragma mark 画折线图
- (void)dravLine{

    CGFloat barWidth=(screen_width-100)/self.xNum*(self.xNum-1)/((self.xNum-1)*self.xSpace);//条形图1个单位的宽
    CGFloat barHeight=(self.frame.size.height-60)/(self.yNum+1)/self.ySpace;//条形图1个单位的高
    //（xorignal,yorignal）坐标原点
    CGFloat xorignal=50;
    CGFloat yorignal=15+self.frame.size.height-60;

//    UILabel * label = (UILabel*)[self viewWithTag:1000];
    UIBezierPath * path = [[UIBezierPath alloc]init];
    path.lineWidth = 1.0;
    self.path1 = path;
    UIColor * color = [UIColor greenColor];
    [color set];

    //起点
    [path moveToPoint:CGPointMake( [self.data[0][@"x"] floatValue]*barWidth+xorignal, yorignal-[self.data[0][@"y"] floatValue]*barHeight )];
    //数值
    UILabel *label=(UILabel *)[self viewWithTag:1000];
    if(label==nil){
        label=[[UILabel alloc] initWithFrame:CGRectMake([self.data[0][@"x"] floatValue]*barWidth+xorignal-50, yorignal-[self.data[0][@"y"] floatValue]*barHeight-20, 100, 21)];
        label.font=[UIFont systemFontOfSize:10];
        label.textColor=[UIColor grayColor];
        label.tag=1000;
        label.textAlignment=NSTextAlignmentCenter;
        label.text=[NSString stringWithFormat:@"%.0f",[self.data[0][@"y"] floatValue]];
        [self addSubview:label];
    }else{
        label.frame=CGRectMake([self.data[0][@"x"] floatValue]*barWidth+xorignal-50, yorignal-[self.data[0][@"y"] floatValue]*barHeight-20, 100, 21);
        label.text=[NSString stringWithFormat:@"%.0f",[self.data[0][@"y"] floatValue]];
    }
    if(!self.showNum){
        label.hidden=YES;
    }else{
        label.hidden=NO;
    }

    //圆点
    UIView *roundView=(UIView *)[self viewWithTag:100];
    if(roundView==nil){
        roundView=[[UIView alloc] initWithFrame:CGRectMake([self.data[0][@"x"] floatValue]*barWidth+xorignal-3, yorignal-[self.data[0][@"y"] floatValue]*barHeight-3, 6, 6)];
        roundView.layer.masksToBounds=YES;
        roundView.layer.cornerRadius=3;
        roundView.backgroundColor=[UIColor grayColor];
        roundView.tag=100;
        [self addSubview:roundView];
    }else{
        roundView=[[UIView alloc] initWithFrame:CGRectMake([self.data[0][@"x"] floatValue]*barWidth+xorignal-3, yorignal-[self.data[0][@"y"] floatValue]*barHeight-3, 6, 6)];
    }


    //转折点
    for (NSInteger i = 1; i< self.data.count; i++) {
        [path addLineToPoint:CGPointMake([self.data[i][@"x"] floatValue]*barWidth+xorignal, yorignal-[self.data[i][@"y"] floatValue]*barHeight)];


        UILabel *label=(UILabel *)[self viewWithTag:1000+i];
        if(label==nil){
            label=[[UILabel alloc] initWithFrame:CGRectMake([self.data[i][@"x"] floatValue]*barWidth+xorignal-50, yorignal-[self.data[i][@"y"] floatValue]*barHeight-20, 100, 21)];
            label.font=[UIFont systemFontOfSize:10];
            label.textColor=[UIColor grayColor];
            label.tag=1000+i;
            label.textAlignment=NSTextAlignmentCenter;
            label.text=[NSString stringWithFormat:@"%.0f",[self.data[i][@"y"] floatValue]];
            [self addSubview:label];
        }else{
            label.frame=CGRectMake([self.data[i][@"x"] floatValue]*barWidth+xorignal-50, yorignal-[self.data[i][@"y"] floatValue]*barHeight-20, 100, 21);
            label.text=[NSString stringWithFormat:@"%.0f",[self.data[i][@"y"] floatValue]];
        }

        if(!self.showNum){//不显示转折点数值
            label.hidden=YES;
        }else{
            label.hidden=NO;
        }


        UIView *roundView=(UIView *)[self viewWithTag:100+i];
        if(roundView==nil){
            roundView=[[UIView alloc] initWithFrame:CGRectMake([self.data[i][@"x"] floatValue]*barWidth+xorignal-3, yorignal-[self.data[i][@"y"] floatValue]*barHeight-3, 6, 6)];
            roundView.layer.masksToBounds=YES;
            roundView.layer.cornerRadius=3;
            roundView.backgroundColor=[UIColor grayColor];
            roundView.tag=100+i;
            [self addSubview:roundView];
        }else{
            roundView=[[UIView alloc] initWithFrame:CGRectMake([self.data[i][@"x"] floatValue]*barWidth+xorignal-3, yorignal-[self.data[i][@"y"] floatValue]*barHeight-3, 6, 6)];
        }
    }

    self.lineChartLayer = [CAShapeLayer layer];
    self.lineChartLayer.path = path.CGPath;
    //线的颜色
    self.lineChartLayer.strokeColor = [UIColor greenColor].CGColor;
    self.lineChartLayer.fillColor = [[UIColor clearColor] CGColor];
    self.lineChartLayer.lineCap = kCALineCapRound;
    self.lineChartLayer.lineJoin = kCALineJoinRound;

    [self.gradientBackgroundView.layer addSublayer:self.lineChartLayer];//直接添加导视图上
}



#pragma mark 渐变的颜色
- (void)drawGradientBackgroundView {
    // 渐变背景视图（不包含坐标轴）
    self.gradientBackgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height)];
    [self addSubview:self.gradientBackgroundView];
    /** 创建并设置渐变背景图层 */
    //初始化CAGradientlayer对象，使它的大小为渐变背景视图的大小
    self.gradientLayer = [CAGradientLayer layer];
    self.gradientLayer.frame = self.gradientBackgroundView.bounds;
    //设置渐变区域的起始和终止位置（范围为0-1），即渐变路径
    self.gradientLayer.startPoint = CGPointMake(0, 0.0);
    self.gradientLayer.endPoint = CGPointMake(1.0, 0.0);
    //设置颜色的渐变过程
    self.gradientLayerColors = [NSMutableArray arrayWithArray:@[(__bridge id)[UIColor whiteColor].CGColor, (__bridge id)[UIColor whiteColor].CGColor]];
    self.gradientLayer.colors = self.gradientLayerColors;
    //将CAGradientlayer对象添加在我们要设置背景色的视图的layer层
    [self.gradientBackgroundView.layer addSublayer:self.gradientLayer];

}

//开始画（动画）
-(void)beginDraw
{
    if(self.lineChartLayer!=nil){
        [self.lineChartLayer removeFromSuperlayer];
    }


    [self dravLine];

    self.lineChartLayer.lineWidth = 2;
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 1.0;
    pathAnimation.repeatCount = 1;
    pathAnimation.removedOnCompletion = YES;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    // 设置动画代理，动画结束时添加一个标签，显示折线终点的信息
    pathAnimation.delegate = self;
    [self.lineChartLayer addAnimation:pathAnimation forKey:@"strokeEnd"];
}

iOS开发交流群：301058503