绘制曲线图/折线图只需4步

绘制曲线图/折线图只需4步

8390251284.gif

下载YJGraph文件拖入工程后

1、导入头文件

    #import "YJGraphView.h"
    #import "YJCoordinateItem.h"

2、给定一个存储YJCoordinateItem对象数组

   NSMutableArray *coordiantes = [NSMutableArray array];
   //x轴数据
   NSArray *xText = @[@"第一天",@"第二天",@"第三天",@"第四天",@"第五天",@"第六天",@"第七天"];
   //y轴数据
   NSArray *yValue = @[@"50",@"66",@"30",@"100",@"72",@"85",@"45"];
   for (NSInteger i = 0; i < 7; i++)
   {
   YJCoordinateItem *item = [YJCoordinateItem coordinateItemWithXText:xText[i]
yValue:[yValue[i] integerValue] ];
   [coordiantes addObject:item];
   }

3、创建曲线图

   YJGraphView *graphView = [[YJGraphView alloc]       initWithCoordiantes:coordiantes
   graphColor:[UIColor redColor]
   animated:YES];
   graphView.frame = CGRectMake(0, 100, self.view.frame.size.width, 300);
   [self.view addSubview:graphView];

4、开始绘制

 [graphView stroke];

实现绘图的核心代码：

 //在  drawRect 中进行绘图
- (void)drawRect:(CGRect)rect
{
    //建立绘图 颜色 线宽
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetStrokeColorWithColor(context, [[UIColor lightGrayColor] CGColor]);
    CGContextSetLineWidth(context, kCoordinateLineWitdth);
    
    //1、绘制坐标轴
    [self drawCoordinate:context];
    //2、绘制X轴文字
    [self drawXCoordinateText];
    //3、绘制Y轴文字
    [self drawYCoordinateText];
    //4、绘制曲线图
    [self drawGraph];
}

#pragma mark - 1绘制坐标轴

- (void)drawCoordinate:(CGContextRef)context
{
    CGFloat width = self.frame.size.width;
    CGFloat height = self.frame.size.height;
    //绘制坐标框
    CGContextAddRect(context, CGRectMake(kEdgeInsertSpace, kEdgeInsertSpace, width - 2 * kEdgeInsertSpace, height - 2 * kEdgeInsertSpace));
    CGContextStrokePath(context);
    
    //绘制虚线框
    CGFloat lenths[1] = {5};
    CGContextSetLineDash(context, 0, lenths, sizeof(lenths)/sizeof(lenths[0]));
      //行高
    CGFloat rowHeight = [self rowHeight];
    for (int i = 0; i < kNumberOfRow; i++) {
        CGFloat y = kEdgeInsertSpace + rowHeight * i;
        CGContextMoveToPoint(context, kEdgeInsertSpace, y);
        CGContextAddLineToPoint(context, kEdgeInsertSpace, y);
        CGContextStrokePath(context);
    }
    
}

#pragma mark - 2绘制X轴文字

- (void)drawXCoordinateText
{
    for (int i = 0; i < _coordinates.count; i++) {
        YJCoordinateItem *item = _coordinates[i];
        //获取文字的宽度
        CGFloat textWidth = [item.xValue sizeWithFontSize:kFontSize maxSize:CGSizeMake(MAXFLOAT, MAXFLOAT)].width;
        //绘制点
        CGPoint point = CGPointMake(kXSpace - textWidth / 2 + kEdgeInsertSpace + kDistanceBetweenPointAndPoit * i, self.frame.size.height - kEdgeInsertSpace);
        
        [item.xValue drawAtPoint:point withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:kFontSize]}];
    }
}

#pragma mark - 3绘制Y轴文字

- (void)drawYCoordinateText
{
    CGFloat maxY = [self maxYOfCoodinateYValue];
    CGFloat rowHeight = [self rowHeight];
    
    //创建一个段落
    NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStyle alloc] init];
    paragraph.alignment = NSTextAlignmentRight;
    
    for (int i = 0; i < kNumberOfRow; i++) {
        NSString *text = [NSString stringWithFormat:@"%.0f",maxY - maxY/kNumberOfRow * i];
        //获取文字的高度
        CGFloat textHeight = [text sizeWithFontSize:kFontSize maxSize:CGSizeMake(MAXFLOAT, MAXFLOAT)].height;
        //绘图
        [text drawInRect:CGRectMake(0, kEdgeInsertSpace + rowHeight * i - textHeight / 2, kEdgeInsertSpace - 5, rowHeight) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:kFontSize],NSParagraphStyleAttributeName:paragraph}];
    }
    
}

#pragma mark - 4绘制曲线图 及 动画

- (void)drawGraph
{
    //x,y坐标
    CGFloat startX,startY;
    CGFloat x,y;
    
    CGFloat maxY = [self maxYOfCoodinateYValue];
    CGFloat coordinateHeight = self.frame.size.height - 2 * kEdgeInsertSpace;
    
    //绘制图
    CGMutablePathRef graphPath = CGPathCreateMutable();
    
    
    for (int i = 0; i < _coordinates.count; i++) {
        YJCoordinateItem *item = _coordinates[i];
        CGFloat scale = item.yValue / maxY;
        
        x = kEdgeInsertSpace + kXSpace + kDistanceBetweenPointAndPoit * i;
        y = kEdgeInsertSpace + (1 - scale) * coordinateHeight;
        if (i == 0) {
            startX = x;
            startY = y;
            //CGPathMoveToPoint(graphPath, NULL, kEdgeInsertSpace,self.frame.size.height - kEdgeInsertSpace);
            CGPathMoveToPoint(graphPath, NULL, x, y);
        }else{
        CGPathAddLineToPoint(graphPath, NULL, x, y);
        }
        
        
    }
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = [UIColor kGraphColor].CGColor;
    //线条的宽度
    layer.lineWidth = kCoordinateLineWitdth;
    layer.lineCap = kCALineCapRound;
    layer.path = graphPath;
    
    
    [self.layer addSublayer:layer];
    
    if (_animation) {
        CABasicAnimation *animation = [ CABasicAnimation animationWithKeyPath : NSStringFromSelector ( @selector (strokeEnd))];
        
        animation.fromValue = @0 ;
        
        animation.toValue = @1 ;
        
        animation.duration = kAnimationDuration ;
        
        [layer addAnimation :animation forKey : NSStringFromSelector ( @selector (strokeEnd))];
    }
    
    CGPathRelease(graphPath);
}

[YJGraph文件][1]
[1]: https://github.com/CrazerF/YJGraph

如果觉得有用希望点个小星星噢~