iOS 折线图的简单现实

一、画出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坐标和Y坐标添加代表的属性值

- (void)createXLable {//画X轴坐标参数
    
    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);//让其转动一点，显示得更像X坐标
        [self addSubview:LabelX];
    }
}

- (void)createYLable {//画Y轴坐标参数
    
    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];//根据横坐标上面的label 获取直线关键点的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 )  )];
    
    //创建折现点标记
    for (NSInteger i = 1; i< month; i++) {
        UILabel * label1 = (UILabel*)[self viewWithTag:1000 + i];
        CGFloat  arc = arc4random()%MaxCount;  //折线点目前给的是随机数,替换成相应的数据就可以了
        [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];//直接添加导视图上
    
    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];
    // 设置动画代理，动画结束时添加一个标签，显示折线终点的信息
    pathAnimation.delegate = self;
    [lineChartLayer addAnimation:pathAnimation forKey:@"strokeEnd"];
    
}

结果图

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