绘制曲线图/折线图只需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);

}

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