繪制曲線圖/折線圖只需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

如果覺得有用希望點個小星星噢~