UIBezierPath 画折线图

 效果图

实现

原理很简单，直接发代码

//创建数据
 NSMutableArray * dataArray = [[NSMutableArray alloc]init];
    for (int i=0; i<10; i++) {
        
        int a = arc4random()%150;
        [dataArray addObject:[NSNumber numberWithInt:a]];
        
    }
    
    //创建坐标轴
    CGFloat XAxisWidth = Device_Width - FIT_WIDTH(23)*2; // X宽度
    CGFloat YAxisHeight = FIT_HEIGHT(150); // Y高度
    CGPoint axisOriginPoint = CGPointMake(FIT_WIDTH(23), FIT_HEIGHT(350)); // 起始点坐标
    
    //创建路径
    UIBezierPath * bezierPath = [[UIBezierPath alloc]init];
    [bezierPath moveToPoint:CGPointMake(FIT_WIDTH(23), axisOriginPoint.y - YAxisHeight)];
    [bezierPath addLineToPoint:CGPointMake(FIT_WIDTH(23), axisOriginPoint.y)];
    [bezierPath addLineToPoint:CGPointMake(FIT_WIDTH(23) + XAxisWidth, axisOriginPoint.y)];
    
    //画坐标轴
    CAShapeLayer * XAxisShapeLayer = [[CAShapeLayer alloc]init];
    XAxisShapeLayer.path = bezierPath.CGPath;
    XAxisShapeLayer.lineWidth = 2;
    XAxisShapeLayer.lineJoin = kCALineJoinRound;
    XAxisShapeLayer.strokeColor = [UIColor lightGrayColor].CGColor;
    XAxisShapeLayer.fillColor = nil;
    [self.layer addSublayer:XAxisShapeLayer];
    [bezierPath removeAllPoints];
    
    
    //创建折线点
    for (int i=0; i<dataArray.count; i++) {
        
        //X坐标文字
        CATextLayer * textLayer = [[CATextLayer alloc]init];
        textLayer.string = [NSString stringWithFormat:@"%d",i];
        textLayer.fontSize = FIT_HEIGHT(11);
        textLayer.foregroundColor = [UIColor lightGrayColor].CGColor;
        textLayer.frame = CGRectMake(FIT_WIDTH(23)+XAxisWidth/dataArray.count * i, axisOriginPoint.y +FIT_HEIGHT(5), XAxisWidth/dataArray.count, FIT_HEIGHT(11));
        textLayer.alignmentMode = kCAAlignmentLeft;
        textLayer.contentsScale = [UIScreen mainScreen].scale; // 以屏幕适配文字，避免拉伸或者模糊
        [self.layer addSublayer:textLayer];
        
        
        //x坐标标志
        UIBezierPath * bezierPath = [[UIBezierPath alloc]init];
        [bezierPath moveToPoint:CGPointMake(FIT_HEIGHT(23) + XAxisWidth/dataArray.count * i, axisOriginPoint.y)];
        [bezierPath addLineToPoint:CGPointMake(FIT_HEIGHT(23) + XAxisWidth/dataArray.count * i, axisOriginPoint.y - FIT_HEIGHT(3))];
        CAShapeLayer * shapeLayerX = [[CAShapeLayer alloc]init];
        shapeLayerX.path = bezierPath.CGPath;
        shapeLayerX.lineWidth = 1;
        shapeLayerX.strokeColor = [UIColor lightGrayColor].CGColor;
        shapeLayerX.fillColor = nil;
        [self.layer addSublayer:shapeLayerX];
        [bezierPath removeAllPoints];
        
        
        //y坐标标志
        bezierPath = [[UIBezierPath alloc]init];
        [bezierPath moveToPoint:CGPointMake(FIT_HEIGHT(23) + XAxisWidth/dataArray.count * i, axisOriginPoint.y)];
        [bezierPath addLineToPoint:CGPointMake(FIT_HEIGHT(23) + XAxisWidth/dataArray.count * i, axisOriginPoint.y - FIT_HEIGHT(3))];
        CAShapeLayer * shapeLayerY = [[CAShapeLayer alloc]init];
        shapeLayerY.path = bezierPath.CGPath;
        shapeLayerY.lineWidth = 1;
        shapeLayerY.strokeColor = [UIColor lightGrayColor].CGColor;
        shapeLayerY.fillColor = nil;
        [self.layer addSublayer:shapeLayerY];
        [bezierPath removeAllPoints];
        
        
    }
    
    //创建数据折线
    UIBezierPath * brokenBezierPath = [[UIBezierPath alloc]init];
    CAShapeLayer * brokenShaperLayer = [[CAShapeLayer alloc]init];
    
    for (int i=0; i<dataArray.count; i++) {
        
        CGFloat height = axisOriginPoint.y - [dataArray[i] floatValue] ;
        if (i == 0) {
            [brokenBezierPath moveToPoint:CGPointMake(FIT_WIDTH(23), height)];
        }
        else
            [brokenBezierPath addLineToPoint:CGPointMake(FIT_WIDTH(23) + XAxisWidth/dataArray.count * i , height)];
        
    }
    
    brokenShaperLayer.path = brokenBezierPath.CGPath;
    brokenShaperLayer.lineWidth = 2;
    brokenShaperLayer.strokeColor = Color_248.CGColor;
    brokenShaperLayer.fillColor = nil;
    brokenShaperLayer.lineJoin = kCALineJoinRound;
    [self.layer addSublayer:brokenShaperLayer];
    
    
    
    /*
        •速度控制函数(CAMediaTimingFunction)
        1.kCAMediaTimingFunctionLinear（线性）：匀速，给你一个相对静态的感觉
        2.kCAMediaTimingFunctionEaseIn（渐进）：动画缓慢进入，然后加速离开
        3.kCAMediaTimingFunctionEaseOut（渐出）：动画全速进入，然后减速的到达目的地
        4.kCAMediaTimingFunctionEaseInEaseOut（渐进渐出）：动画缓慢的进入，中间加速，然后减速的到达目的地。这个是默认的动画行为。
    */
    
    //通过 strokeEnd 添加简单的动画效果
    CABasicAnimation * brokenAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    brokenAnimation.fromValue = @0;
    brokenAnimation.toValue = @1;
    brokenAnimation.duration = 2;
    brokenAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    [brokenShaperLayer addAnimation:brokenAnimation forKey:@"brokenAnimation"];


/*
 几种动画方式
    transform.scale            比例转化     @(0.8)
    transform.scale.x          宽的比例     @(0.8)
    transform.scale.y          高的比例     @(0.8)
    transform.rotation.x       围绕x轴旋转     @(M_PI)
    transform.rotation.y       围绕y轴旋转     @(M_PI)
    transform.rotation.z       围绕z轴旋转     @(M_PI)
    cornerRadius               圆角的设置     @(50)
    backgroundColor            背景颜色的变化     (id)[UIColor purpleColor].CGColor
    bounds                     大小，中心不变     [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
    position                   位置(中心点的改变)     [NSValue valueWithCGPoint:CGPointMake(300, 300)];
    contents                   内容，比如UIImageView的图片     imageAnima.toValue = (id)[UIImage imageNamed:@"to"].CGImage;
    opacity                    透明度     @(0.7)
    contentsRect.size.width     横向拉伸缩放     @(0.4)最好是0~1之间的
 
 
 */

总结

柱状图，饼状图都可以这样实现，原理简单就不贴代码了。