折线图的绘制网上有很多不错的三方可以借鉴，譬如# PNChart、# SCChart等等，如果这些适合你的项目的话，不妨就使用这类的三方。但要是为了适用于你的项目时，你需要改很多的东西，实现起来比较麻烦的话，建议自己动手写一下，折线图的实现起来，也不是特别的难，无非就是CAShapeLayer、UIBezierPath两个类的结合使用，如果你还想加点动画的话，就多一个CABasicAnimation这个类的的使用而已。就像提到的这两个三方，如何实现中间有某些点没有值，这个就需要动源码了，改一些东西，感觉找的太麻烦，于是就自己写了。
首先看一下Demo的实现效果：

效果图.gif

1.绘制坐标轴

绘制坐标轴方法.png

  - (void)drawRect:(CGRect)rect {
    /*******画出坐标轴********/
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 2.0);
    CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
    CGContextMoveToPoint(context, bounceX, 0);
    CGContextAddLineToPoint(context, bounceX, rect.size.height - bounceY);
    CGContextAddLineToPoint(context,rect.size.width , rect.size.height - bounceY);
    CGContextStrokePath(context);
}

由于我的项目不需要这个东西，我就给注释了。

2.绘制X、Y轴内容

  #pragma mark --- 创建x轴的数据
- (void)createLabelX{
self.gradientBackgroundView =[[UIScrollView alloc] initWithFrame:CGRectMake(bounceX, 0, self.bounds.size.width - bounceX, self.bounds.size.height)];
CGFloat widthlable = (self.frame.size.width - bounceX)/7;
self.gradientBackgroundView.contentSize = CGSizeMake(widthlable*self.horizontalDateArray.count, self.bounds.size.height);
[self addSubview:self.gradientBackgroundView];

for (NSInteger i = 0; i < self.horizontalDateArray.count; i++) {
    CGFloat heightlable = bounceY;
    UILabel * LabelMonth = [[UILabel alloc]initWithFrame:CGRectMake(widthlable * i , self.gradientBackgroundView.frame.size.height - heightlable+bounceX/2.0, widthlable, heightlable-bounceX/2.0)];
    LabelMonth.textAlignment = NSTextAlignmentCenter;
    LabelMonth.tag = 1000 + I;
    LabelMonth.textColor = [UIColor colorWithRed:166/255.0 green:166/255.0 blue:166/255.0 alpha:1];
    LabelMonth.text = self.horizontalDateArray[I];
    LabelMonth.font = [UIFont systemFontOfSize:10];
    LabelMonth.numberOfLines = 0;
    LabelMonth.lineBreakMode = 0;
    [self.gradientBackgroundView addSubview:LabelMonth];
  }
}

#pragma mark 创建y轴数据
- (void)createLabelY{
CGFloat Ydivision = self.verticalDateArray.count-1;
for (NSInteger i = 0; i < self.verticalDateArray.count ; i++) {
    UILabel * labelYdivision = [[UILabel alloc]initWithFrame:CGRectMake(0, (self.frame.size.height -  bounceY)/Ydivision *i, bounceX, bounceX/2.0)];
    labelYdivision.tag = 2000 + I;
    labelYdivision.textColor = [UIColor colorWithRed:166/255.0 green:166/255.0 blue:166/255.0 alpha:1];
    labelYdivision.text = [NSString stringWithFormat:@"%@",self.verticalDateArray[I]];
    labelYdivision.font = [UIFont systemFontOfSize:10];
    [self addSubview:labelYdivision];
  }
}

3.绘制虚线、添加点标注、添加动画

这里只绘制了横向虚线，如果有纵向虚线绘制要求，方法类似。

  #pragma mark --- 传添加虚线
  - (void)setLineDash{
    UILabel *xLabel = (UILabel*)[self viewWithTag:1000 + self.horizontalDateArray.count-1];
    for (NSInteger i = 0;i < self.verticalDateArray.count; i++ ) {
    CAShapeLayer * dashLayer = [CAShapeLayer layer];
    dashLayer.strokeColor = [UIColor colorWithRed:222/255.0 green:223/255.0 blue:224/255.0 alpha:1].CGColor;
    dashLayer.fillColor = [[UIColor clearColor] CGColor];
    dashLayer.lineWidth = 1.0;
    
    
    UILabel * label1 = (UILabel*)[self viewWithTag:2000 + I];
    
    UIBezierPath * path = [[UIBezierPath alloc]init];
    path.lineWidth = 1.0;
    UIColor * color = [UIColor whiteColor];
    [color set];
    [path moveToPoint:CGPointMake( 0, label1.frame.origin.y+bounceX/4.0)];
    [path addLineToPoint:CGPointMake(xLabel.frame.origin.x+xLabel.frame.size.width,label1.frame.origin.y+bounceX/4.0)];
    CGFloat dash[] = {2,2};
    [path setLineDash:dash count:2 phase:10];
    [path stroke];
    
    
    dashLayer.path = path.CGPath;
    dashLayer.lineDashPattern=[NSArray arrayWithObjects:[NSNumber numberWithInt:1],
                               [NSNumber numberWithInt:2],nil];
    [self.gradientBackgroundView.layer addSublayer:dashLayer];
  }
}

4.绘制折线图

  #pragma mark 画折线图
  - (void)dravLine{
    CGFloat MaxY ;
    CGFloat firstdate = [[NSString stringWithFormat:@"%@",self.verticalDateArray[0]] floatValue] ;
    CGFloat lastdate = [[NSString stringWithFormat:@"%@",[self.verticalDateArray lastObject]] floatValue];
    MaxY = firstdate - lastdate;
    for(NSInteger LineNumber = 0; LineNumber < 3; LineNumber++){
    UIBezierPath * path = [[UIBezierPath alloc]init];
    path.lineWidth = 1.0;
    UIColor * color = [UIColor greenColor];
    [color set];
    UIColor * linecolors = (UIColor*)self.lineColorArray[LineNumber];
    NSArray *array = self.dataArray[LineNumber];
    //判断是否是一个可显示的第一个点
    BOOL isFirstPoint = NO;
    //创建折现点标记
    for (NSInteger i = 0; i< self.horizontalDateArray.count; i++) {
        UILabel * label1 = (UILabel*)[self viewWithTag:1000 + I];
        CGFloat arc =[[NSString stringWithFormat:@"%@",array[i]] floatValue];
        if (![[NSString stringWithFormat:@"%@",array[0]] isEqualToString:@"-100"]) {
            //第一个数不是空的，是可用数
            if (i==0) {
                [path moveToPoint:CGPointMake(label1.frame.origin.x+label1.frame.size.width*0.5,(MaxY -arc +lastdate) /MaxY * (self.frame.size.height - bounceY+bounceX/4.0)+2)];
            }else{
                if (![[NSString stringWithFormat:@"%@",array[i]] isEqualToString:@"-100"]) {
                    [path addLineToPoint:CGPointMake(label1.frame.origin.x+label1.frame.size.width*0.5,(MaxY -arc +lastdate) /MaxY * (self.frame.size.height - bounceY+bounceX/4.0)+2)];
                }
                
            }
        }else{
            //第一个数是空的，不可用数
            UILabel * labelX = (UILabel*)[self viewWithTag:1000 + I];
            if (![[NSString stringWithFormat:@"%@",array[i]] isEqualToString:@"-100"]&&!isFirstPoint) {
                
                [path moveToPoint:CGPointMake(labelX.frame.origin.x+labelX.frame.size.width*0.5,(MaxY -arc +lastdate) /MaxY * (self.frame.size.height - bounceY+bounceX/4.0+2))];
                isFirstPoint = YES;
            }else{
                if (![[NSString stringWithFormat:@"%@",array[i]] isEqualToString:@"-100"]&&isFirstPoint){
                    [path addLineToPoint:CGPointMake(labelX.frame.origin.x+labelX.frame.size.width*0.5,(MaxY -arc +lastdate) /MaxY * (self.frame.size.height - bounceY+bounceX/4.0)+2)];
                }
            }
            
            
        }

        //添加每个对应的点视图
        if (![[NSString stringWithFormat:@"%@",array[i]] isEqualToString:@"-100"]) {
            UILabel *pointView = [[UILabel alloc] initWithFrame:CGRectMake(label1.frame.origin.x+label1.frame.size.width*0.5-2, (MaxY -arc +lastdate) /MaxY * (self.frame.size.height - bounceY+bounceX/4.0), 4, 4)];
            pointView.tag = 4000 * (LineNumber + 1)+ I;
            pointView.backgroundColor = linecolors;
            pointView.layer.masksToBounds = YES;
            pointView.layer.cornerRadius = 2.f;
            [self.gradientBackgroundView addSubview:pointView];
        }
        //添加折线对应点的数值label
        //            UILabel * falglabel = [[UILabel alloc]initWithFrame:CGRectMake(label1.frame.origin.x  , (MaxY -arc +lastdate) /MaxY * (self.frame.size.height - bounceY )  , 30, 15)];
        //            falglabel.tag = 3000 * (LineNumber + 1)+ I;
        //            falglabel.text = [NSString stringWithFormat:@"%.1f",arc];
        //            falglabel.font = [UIFont systemFontOfSize:8.0];
        //            falglabel.textColor = self.lineColorArray[LineNumber];
        //            [self addSubview:falglabel];
    }
    
    CAShapeLayer *lineChartLayer = [CAShapeLayer layer];
    
    lineChartLayer.path = path.CGPath;
    
    lineChartLayer.strokeColor = linecolors.CGColor;
    lineChartLayer.fillColor = [[UIColor clearColor] CGColor];
    // 默认设置路径宽度为0，使其在起始状态下不显示
    lineChartLayer.lineCap = kCALineCapRound;
    lineChartLayer.lineJoin = kCALineJoinRound;
    lineChartLayer.lineWidth = 1;
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 2;
    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"];
    
    [self.gradientBackgroundView.layer addSublayer:lineChartLayer];//直接添加导视图上
    //   self.gradientBackgroundView.layer.mask = self.lineChartLayer;//添加到渐变图层
  }
}

跳过没有值的点.png

添加标注.png

每条线对应的意义.png

5.在自定义的View里调用上面的所有方法

- (void)drawRect:(CGRect)rect {
    /*******画出坐标轴********/
//        CGContextRef context =  UIGraphicsGetCurrentContext();
//        CGContextSetLineWidth(context, 2.0);
//        CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
//        CGContextMoveToPoint(context, bounceX, 0);
//        CGContextAddLineToPoint(context, bounceX, rect.size.height - bounceY);
//        CGContextAddLineToPoint(context,rect.size.width , rect.size.height - bounceY);
//        CGContextStrokePath(context);
  [self createLabelX];
  [self createLabelY];
  [self setLineDash];
  [self dravLine];
  [self setLineMean];
}

6.外界调用这个控件的方法

  #pragma mark --- 绘制X、Y值 、虚线
- (void )drawLineDashWithHorizontalDateArray:(NSArray *)horizontalDateArray VerticalDateArray:(NSArray *)verticalDateArray SourceData:(NSArray *)dataArray{
  _horizontalDateArray = horizontalDateArray;
  _verticalDateArray = verticalDateArray;
  _dataArray = dataArray;

  [self setNeedsDisplay];
}

点h文件.png

点m文件.png

7.使用方法

使用方法.png