iOS超简易折线图(初学)

一、背景图（表格）：

- (void)drawTableLine {
    NSInteger count = 9;
    
    CGFloat spacing_X = self.frame.size.width/(count+1);
    CGFloat spacing_Y = self.frame.size.height/8;
    
    
    CGContextRef tableContext = UIGraphicsGetCurrentContext();
    CGMutablePathRef verticalPath = CGPathCreateMutable();
    for (int i = 0; i < count + 1; i++) {
        // 垂直线
        CGPathMoveToPoint(verticalPath, NULL, i*spacing_X, 0);
        CGPathAddLineToPoint(verticalPath, NULL, i*spacing_X, self.frame.size.height);
        CGContextStrokePath(tableContext);
        //        [[UIColor blueColor] setStroke];
        //        CGContextAddPath(tableContext, verticalPath);
        //        CGContextDrawPath(tableContext, kCGPathStroke);
        
    }
    for ( int i = 0; i < 8; i++) {
        // 水平线
        CGPathMoveToPoint(verticalPath, NULL, 0, i*spacing_Y);
        CGPathAddLineToPoint(verticalPath, NULL, self.frame.size.width, i*spacing_Y);
        CGContextStrokePath(tableContext);
        [[UIColor orangeColor] setStroke];
        CGContextAddPath(tableContext, verticalPath);
        CGContextDrawPath(tableContext, kCGPathStroke);
    }
    CGPathRelease(verticalPath);
}

效果图：

二、折线图：

- (void)drawGraph {
    NSInteger count = self.valueArray.count;
    NSInteger max = [[self.valueArray valueForKeyPath:@"@max.floatValue"] integerValue]+2;
    NSInteger min = [[self.valueArray valueForKeyPath:@"@min.floatValue"] integerValue]-2;
   
    CGFloat spacing_X = self.frame.size.width/(count+1);
    CGFloat spacing_Y = self.frame.size.height/(max-min);
   
    CGContextRef graphContext = UIGraphicsGetCurrentContext();
    CGMutablePathRef graphPath = CGPathCreateMutable();

    for (int i = 0; i < count-1; i++) {
        NSInteger value = [self.valueArray[i] integerValue];
        NSInteger value1 = [self.valueArray[i+1] integerValue];
   
        CGPathMoveToPoint(graphPath, NULL, (i+1)*spacing_X+PointRadius, (max-value)*spacing_Y);
        CGPathAddLineToPoint(graphPath, NULL, (i+2)*spacing_X-PointRadius, (max-value1)*spacing_Y);
        CGContextSetLineWidth(graphContext, 0.5);
   
        CGContextAddPath(graphContext, graphPath);
        CGContextStrokePath(graphContext);
        [[UIColor blueColor] setStroke];
        CGContextDrawPath(graphContext, kCGPathStroke);
    }
    CGPathRelease(graphPath);
}

效果如图：

三、圆点：
在每个坐标点加一个圆点

//  注：折线图中的点可以使用button/label实现  也可以使用画点实现
- (void)drawPoint {
    NSInteger count = self.valueArray.count;
   
    CGContextRef pointContext = UIGraphicsGetCurrentContext();
    CGMutablePathRef pointPath = CGPathCreateMutable();
   
    NSInteger max = [[self.valueArray valueForKeyPath:@"@max.floatValue"] integerValue]+2;
    NSInteger min = [[self.valueArray valueForKeyPath:@"@min.floatValue"] integerValue]-2;
   
    CGFloat spacing_X = self.frame.size.width/(count+1);
    CGFloat spacing_Y = self.frame.size.height/(max-min);
   
    for (int i = 0; i < count; i++) {
        NSInteger value = [self.valueArray[i] integerValue];
       
        CGRect rect = CGRectMake((i+1)*spacing_X-PointRadius, (max-value)*spacing_Y-PointRadius, 2*PointRadius, 2*PointRadius);
        CGPathAddEllipseInRect(pointPath, NULL, rect);
        CGContextAddPath(pointContext, pointPath);
        CGContextStrokePath(pointContext);
        [[UIColor blueColor] setStroke];
        CGContextDrawPath(pointContext, kCGPathFill);
    }
}

效果图如下：