一、画出X，Y轴
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.f);//线的宽度
CGContextSetRGBStrokeColor(context, 0.2, 0.2, 0.2, 1);//线的颜色
CGContextMoveToPoint(context, bounceX, bounceY);
CGContextAddLineToPoint(context, bounceX, self.bounds.size.height - bounceY);//Y轴
CGContextAddLineToPoint(context, self.bounds.size.width - bounceX, self.bounds.size.height - bounceY);//X轴
CGContextStrokePath(context);
}
二、分别给X坐标和Y坐标添加代表的属性值
- (void)createXLable {//画X轴坐标参数
CGFloat month = 12;
for (NSInteger i = 0; i < month; i++) {
UILabel * LabelX = [[UILabel alloc]initWithFrame:CGRectMake((self.frame.size.width - 2*bounceX)/month * i + bounceX, self.frame.size.height - bounceY + bounceY*0.5, (self.frame.size.width - 2*bounceX)/month + 5, bounceY/2)];
LabelX.tag = 1000 + i;
LabelX.text = [NSString stringWithFormat:@"%ld月",i+1];
LabelX.font = [UIFont systemFontOfSize:10];
LabelX.transform = CGAffineTransformMakeRotation(M_PI * 0.3);//让其转动一点，显示得更像X坐标
[self addSubview:LabelX];
}
}
- (void)createYLable {//画Y轴坐标参数
NSInteger count = 10;
for (NSInteger i = 0; i < count; i++) {
UILabel * LabelY = [[UILabel alloc]initWithFrame:CGRectMake(0, (self.frame.size.height - 2*bounceY)/count * i + bounceY, bounceX-5, bounceY/2)];
LabelY.tag = 1000 + i;
LabelY.text = [NSString stringWithFormat:@"%ld",(count - i)*100 + 100];
LabelY.font = [UIFont systemFontOfSize:10];
LabelY.textAlignment = NSTextAlignmentRight;
[self addSubview:LabelY];
}
}
三、画折线图
- (void)dravLine{
// 背景视图
UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(bounceX, bounceY, self.bounds.size.width - bounceX*2, self.bounds.size.height - 2*bounceY)];
self.gradientBackgroundView = backgroundView;
[self addSubview:backgroundView];
UILabel * label = (UILabel*)[self viewWithTag:1000];//根据横坐标上面的label 获取直线关键点的x 值
UIBezierPath * path = [[UIBezierPath alloc]init];
path.lineWidth = 1.0;
UIColor * color = [UIColor greenColor];
[color set];
[path moveToPoint:CGPointMake( label.frame.origin.x - bounceX, (MaxCount -arc4random()%MaxCount) /MaxCount * (self.frame.size.height - bounceY*2 ) )];
//创建折现点标记
for (NSInteger i = 1; i< month; i++) {
UILabel * label1 = (UILabel*)[self viewWithTag:1000 + i];
CGFloat arc = arc4random()%MaxCount; //折线点目前给的是随机数,替换成相应的数据就可以了
[path addLineToPoint:CGPointMake(label1.frame.origin.x - bounceX, (MaxCount -arc) /MaxCount * (self.frame.size.height - bounceY*2 ) )];
UILabel * falglabel = [[UILabel alloc]initWithFrame:CGRectMake(label1.frame.origin.x , (MaxCount -arc) /MaxCount * (self.frame.size.height - bounceY*2 )+10 , 30, 15)];
falglabel.tag = 3000+ i;
falglabel.text = [NSString stringWithFormat:@"%.1f",arc];
falglabel.textColor = [UIColor purpleColor];
falglabel.font = [UIFont systemFontOfSize:7.0];
[self addSubview:falglabel];
}
CAShapeLayer *lineChartLayer = [CAShapeLayer layer];
lineChartLayer.path = path.CGPath;
lineChartLayer.strokeColor = [UIColor grayColor].CGColor;
lineChartLayer.fillColor = [[UIColor clearColor] CGColor];
lineChartLayer.lineCap = kCALineCapRound;
lineChartLayer.lineJoin = kCALineJoinRound;
[self.gradientBackgroundView.layer addSublayer:lineChartLayer];//直接添加导视图上
lineChartLayer.lineWidth = 1;
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 3;
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"];
}
结果图
49A555CC-8E38-4278-9070-7EA5C39D6261.png
