一、畫出X，Y軸

- (void)drawRect:(CGRect)rect {
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 2.f);//線的寬度
    CGContextSetRGBStrokeColor(context, 0.2, 0.2, 0.2, 1);//線的顏色
    CGContextMoveToPoint(context, bounceX, bounceY);
    CGContextAddLineToPoint(context, bounceX, self.bounds.size.height - bounceY);//Y軸
    CGContextAddLineToPoint(context, self.bounds.size.width - bounceX, self.bounds.size.height - bounceY);//X軸
    CGContextStrokePath(context);
}

二、分別給X坐標(biāo)和Y坐標(biāo)添加代表的屬性值

- (void)createXLable {//畫X軸坐標(biāo)參數(shù)
    
    CGFloat  month = 12;
    for (NSInteger i = 0; i < month; i++) {
        
        UILabel * LabelX = [[UILabel alloc]initWithFrame:CGRectMake((self.frame.size.width - 2*bounceX)/month * i + bounceX, self.frame.size.height - bounceY + bounceY*0.5, (self.frame.size.width - 2*bounceX)/month + 5, bounceY/2)];
        LabelX.tag = 1000 + i;
        LabelX.text = [NSString stringWithFormat:@"%ld月",i+1];
        LabelX.font = [UIFont systemFontOfSize:10];
        LabelX.transform = CGAffineTransformMakeRotation(M_PI * 0.3);//讓其轉(zhuǎn)動一點，顯示得更像X坐標(biāo)
        [self addSubview:LabelX];
    }
}

- (void)createYLable {//畫Y軸坐標(biāo)參數(shù)
    
    NSInteger count = 10;
    for (NSInteger i = 0; i < count; i++) {
        UILabel * LabelY = [[UILabel alloc]initWithFrame:CGRectMake(0, (self.frame.size.height - 2*bounceY)/count * i + bounceY, bounceX-5, bounceY/2)];
        LabelY.tag = 1000 + i;
        LabelY.text = [NSString stringWithFormat:@"%ld",(count - i)*100 + 100];
        LabelY.font = [UIFont systemFontOfSize:10];
        LabelY.textAlignment = NSTextAlignmentRight;
        [self addSubview:LabelY];
    }
}

三、畫折線圖

- (void)dravLine{
    
    // 背景視圖
    UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(bounceX, bounceY, self.bounds.size.width - bounceX*2, self.bounds.size.height - 2*bounceY)];
    self.gradientBackgroundView = backgroundView;
    [self addSubview:backgroundView];
    
    UILabel * label = (UILabel*)[self viewWithTag:1000];//根據(jù)橫坐標(biāo)上面的label 獲取直線關(guān)鍵點的x 值
    UIBezierPath * path = [[UIBezierPath alloc]init];
    path.lineWidth = 1.0;
    UIColor * color = [UIColor greenColor];
    [color set];
    [path moveToPoint:CGPointMake( label.frame.origin.x - bounceX, (MaxCount -arc4random()%MaxCount) /MaxCount * (self.frame.size.height - bounceY*2 )  )];
    
    //創(chuàng)建折現(xiàn)點標(biāo)記
    for (NSInteger i = 1; i< month; i++) {
        UILabel * label1 = (UILabel*)[self viewWithTag:1000 + i];
        CGFloat  arc = arc4random()%MaxCount;  //折線點目前給的是隨機數(shù),替換成相應(yīng)的數(shù)據(jù)就可以了
        [path addLineToPoint:CGPointMake(label1.frame.origin.x - bounceX,  (MaxCount -arc) /MaxCount * (self.frame.size.height - bounceY*2 ) )];
        UILabel * falglabel = [[UILabel alloc]initWithFrame:CGRectMake(label1.frame.origin.x , (MaxCount -arc) /MaxCount * (self.frame.size.height - bounceY*2 )+10 , 30, 15)];
        
        falglabel.tag = 3000+ i;
        falglabel.text = [NSString stringWithFormat:@"%.1f",arc];
        falglabel.textColor = [UIColor purpleColor];
        falglabel.font = [UIFont systemFontOfSize:7.0];
        [self addSubview:falglabel];
    }
    
    CAShapeLayer *lineChartLayer = [CAShapeLayer layer];
    lineChartLayer.path = path.CGPath;
    lineChartLayer.strokeColor = [UIColor grayColor].CGColor;
    lineChartLayer.fillColor = [[UIColor clearColor] CGColor];
    
    lineChartLayer.lineCap = kCALineCapRound;
    lineChartLayer.lineJoin = kCALineJoinRound;
    
    [self.gradientBackgroundView.layer addSublayer:lineChartLayer];//直接添加導(dǎo)視圖上
    
    lineChartLayer.lineWidth = 1;
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 3;
    pathAnimation.repeatCount = 1;
    pathAnimation.removedOnCompletion = YES;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    // 設(shè)置動畫代理，動畫結(jié)束時添加一個標(biāo)簽，顯示折線終點的信息
    pathAnimation.delegate = self;
    [lineChartLayer addAnimation:pathAnimation forKey:@"strokeEnd"];
    
}

結(jié)果圖

49A555CC-8E38-4278-9070-7EA5C39D6261.png