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"];}