iOS绘制折线图
2018-03-09 本文已影响98人
重驹
折线图的绘制网上有很多不错的三方可以借鉴，譬如# PNChart、# SCChart等等，如果这些适合你的项目的话，不妨就使用这类的三方。但要是为了适用于你的项目时，你需要改很多的东西，实现起来比较麻烦的话，建议自己动手写一下，折线图的实现起来，也不是特别的难，无非就是CAShapeLayer、UIBezierPath两个类的结合使用，如果你还想加点动画的话，就多一个CABasicAnimation这个类的的使用而已。就像提到的这两个三方，如何实现中间有某些点没有值，这个就需要动源码了，改一些东西，感觉找的太麻烦，于是就自己写了。
首先看一下Demo的实现效果：
效果图.gif
自己的项目需要实现单页展示的少数据量功能，也需要展示多数据量的长页面拖拽功能。
下面是实现思路：
1.绘制坐标轴
绘制坐标轴方法.png
- (void)drawRect:(CGRect)rect {
/*******画出坐标轴********/
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
CGContextMoveToPoint(context, bounceX, 0);
CGContextAddLineToPoint(context, bounceX, rect.size.height - bounceY);
CGContextAddLineToPoint(context,rect.size.width , rect.size.height - bounceY);
CGContextStrokePath(context);
}
由于我的项目不需要这个东西，我就给注释了。
2.绘制X、Y轴内容
#pragma mark --- 创建x轴的数据
- (void)createLabelX{
self.gradientBackgroundView =[[UIScrollView alloc] initWithFrame:CGRectMake(bounceX, 0, self.bounds.size.width - bounceX, self.bounds.size.height)];
CGFloat widthlable = (self.frame.size.width - bounceX)/7;
self.gradientBackgroundView.contentSize = CGSizeMake(widthlable*self.horizontalDateArray.count, self.bounds.size.height);
[self addSubview:self.gradientBackgroundView];
for (NSInteger i = 0; i < self.horizontalDateArray.count; i++) {
CGFloat heightlable = bounceY;
UILabel * LabelMonth = [[UILabel alloc]initWithFrame:CGRectMake(widthlable * i , self.gradientBackgroundView.frame.size.height - heightlable+bounceX/2.0, widthlable, heightlable-bounceX/2.0)];
LabelMonth.textAlignment = NSTextAlignmentCenter;
LabelMonth.tag = 1000 + I;
LabelMonth.textColor = [UIColor colorWithRed:166/255.0 green:166/255.0 blue:166/255.0 alpha:1];
LabelMonth.text = self.horizontalDateArray[I];
LabelMonth.font = [UIFont systemFontOfSize:10];
LabelMonth.numberOfLines = 0;
LabelMonth.lineBreakMode = 0;
[self.gradientBackgroundView addSubview:LabelMonth];
}
}
#pragma mark 创建y轴数据
- (void)createLabelY{
CGFloat Ydivision = self.verticalDateArray.count-1;
for (NSInteger i = 0; i < self.verticalDateArray.count ; i++) {
UILabel * labelYdivision = [[UILabel alloc]initWithFrame:CGRectMake(0, (self.frame.size.height - bounceY)/Ydivision *i, bounceX, bounceX/2.0)];
labelYdivision.tag = 2000 + I;
labelYdivision.textColor = [UIColor colorWithRed:166/255.0 green:166/255.0 blue:166/255.0 alpha:1];
labelYdivision.text = [NSString stringWithFormat:@"%@",self.verticalDateArray[I]];
labelYdivision.font = [UIFont systemFontOfSize:10];
[self addSubview:labelYdivision];
}
}
3.绘制虚线、添加点标注、添加动画
这里只绘制了横向虚线，如果有纵向虚线绘制要求，方法类似。
#pragma mark --- 传添加虚线
- (void)setLineDash{
UILabel *xLabel = (UILabel*)[self viewWithTag:1000 + self.horizontalDateArray.count-1];
for (NSInteger i = 0;i < self.verticalDateArray.count; i++ ) {
CAShapeLayer * dashLayer = [CAShapeLayer layer];
dashLayer.strokeColor = [UIColor colorWithRed:222/255.0 green:223/255.0 blue:224/255.0 alpha:1].CGColor;
dashLayer.fillColor = [[UIColor clearColor] CGColor];
dashLayer.lineWidth = 1.0;
UILabel * label1 = (UILabel*)[self viewWithTag:2000 + I];
UIBezierPath * path = [[UIBezierPath alloc]init];
path.lineWidth = 1.0;
UIColor * color = [UIColor whiteColor];
[color set];
[path moveToPoint:CGPointMake( 0, label1.frame.origin.y+bounceX/4.0)];
[path addLineToPoint:CGPointMake(xLabel.frame.origin.x+xLabel.frame.size.width,label1.frame.origin.y+bounceX/4.0)];
CGFloat dash[] = {2,2};
[path setLineDash:dash count:2 phase:10];
[path stroke];
dashLayer.path = path.CGPath;
dashLayer.lineDashPattern=[NSArray arrayWithObjects:[NSNumber numberWithInt:1],
[NSNumber numberWithInt:2],nil];
[self.gradientBackgroundView.layer addSublayer:dashLayer];
}
}
4.绘制折线图
#pragma mark 画折线图
- (void)dravLine{
CGFloat MaxY ;
CGFloat firstdate = [[NSString stringWithFormat:@"%@",self.verticalDateArray[0]] floatValue] ;
CGFloat lastdate = [[NSString stringWithFormat:@"%@",[self.verticalDateArray lastObject]] floatValue];
MaxY = firstdate - lastdate;
for(NSInteger LineNumber = 0; LineNumber < 3; LineNumber++){
UIBezierPath * path = [[UIBezierPath alloc]init];
path.lineWidth = 1.0;
UIColor * color = [UIColor greenColor];
[color set];
UIColor * linecolors = (UIColor*)self.lineColorArray[LineNumber];
NSArray *array = self.dataArray[LineNumber];
//判断是否是一个可显示的第一个点
BOOL isFirstPoint = NO;
//创建折现点标记
for (NSInteger i = 0; i< self.horizontalDateArray.count; i++) {
UILabel * label1 = (UILabel*)[self viewWithTag:1000 + I];
CGFloat arc =[[NSString stringWithFormat:@"%@",array[i]] floatValue];
if (![[NSString stringWithFormat:@"%@",array[0]] isEqualToString:@"-100"]) {
//第一个数不是空的，是可用数
if (i==0) {
[path moveToPoint:CGPointMake(label1.frame.origin.x+label1.frame.size.width*0.5,(MaxY -arc +lastdate) /MaxY * (self.frame.size.height - bounceY+bounceX/4.0)+2)];
}else{
if (![[NSString stringWithFormat:@"%@",array[i]] isEqualToString:@"-100"]) {
[path addLineToPoint:CGPointMake(label1.frame.origin.x+label1.frame.size.width*0.5,(MaxY -arc +lastdate) /MaxY * (self.frame.size.height - bounceY+bounceX/4.0)+2)];
}
}
}else{
//第一个数是空的，不可用数
UILabel * labelX = (UILabel*)[self viewWithTag:1000 + I];
if (![[NSString stringWithFormat:@"%@",array[i]] isEqualToString:@"-100"]&&!isFirstPoint) {
[path moveToPoint:CGPointMake(labelX.frame.origin.x+labelX.frame.size.width*0.5,(MaxY -arc +lastdate) /MaxY * (self.frame.size.height - bounceY+bounceX/4.0+2))];
isFirstPoint = YES;
}else{
if (![[NSString stringWithFormat:@"%@",array[i]] isEqualToString:@"-100"]&&isFirstPoint){
[path addLineToPoint:CGPointMake(labelX.frame.origin.x+labelX.frame.size.width*0.5,(MaxY -arc +lastdate) /MaxY * (self.frame.size.height - bounceY+bounceX/4.0)+2)];
}
}
}
//添加每个对应的点视图
if (![[NSString stringWithFormat:@"%@",array[i]] isEqualToString:@"-100"]) {
UILabel *pointView = [[UILabel alloc] initWithFrame:CGRectMake(label1.frame.origin.x+label1.frame.size.width*0.5-2, (MaxY -arc +lastdate) /MaxY * (self.frame.size.height - bounceY+bounceX/4.0), 4, 4)];
pointView.tag = 4000 * (LineNumber + 1)+ I;
pointView.backgroundColor = linecolors;
pointView.layer.masksToBounds = YES;
pointView.layer.cornerRadius = 2.f;
[self.gradientBackgroundView addSubview:pointView];
}
//添加折线对应点的数值label
// UILabel * falglabel = [[UILabel alloc]initWithFrame:CGRectMake(label1.frame.origin.x , (MaxY -arc +lastdate) /MaxY * (self.frame.size.height - bounceY ) , 30, 15)];
// falglabel.tag = 3000 * (LineNumber + 1)+ I;
// falglabel.text = [NSString stringWithFormat:@"%.1f",arc];
// falglabel.font = [UIFont systemFontOfSize:8.0];
// falglabel.textColor = self.lineColorArray[LineNumber];
// [self addSubview:falglabel];
}
CAShapeLayer *lineChartLayer = [CAShapeLayer layer];
lineChartLayer.path = path.CGPath;
lineChartLayer.strokeColor = linecolors.CGColor;
lineChartLayer.fillColor = [[UIColor clearColor] CGColor];
// 默认设置路径宽度为0，使其在起始状态下不显示
lineChartLayer.lineCap = kCALineCapRound;
lineChartLayer.lineJoin = kCALineJoinRound;
lineChartLayer.lineWidth = 1;
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 2;
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"];
[self.gradientBackgroundView.layer addSublayer:lineChartLayer];//直接添加导视图上
// self.gradientBackgroundView.layer.mask = self.lineChartLayer;//添加到渐变图层
}
}
跳过没有值的点.png
添加标注.png
每条线对应的意义.png
5.在自定义的View里调用上面的所有方法
- (void)drawRect:(CGRect)rect {
/*******画出坐标轴********/
// CGContextRef context = UIGraphicsGetCurrentContext();
// CGContextSetLineWidth(context, 2.0);
// CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
// CGContextMoveToPoint(context, bounceX, 0);
// CGContextAddLineToPoint(context, bounceX, rect.size.height - bounceY);
// CGContextAddLineToPoint(context,rect.size.width , rect.size.height - bounceY);
// CGContextStrokePath(context);
[self createLabelX];
[self createLabelY];
[self setLineDash];
[self dravLine];
[self setLineMean];
}
6.外界调用这个控件的方法
#pragma mark --- 绘制X、Y值 、虚线
- (void )drawLineDashWithHorizontalDateArray:(NSArray *)horizontalDateArray VerticalDateArray:(NSArray *)verticalDateArray SourceData:(NSArray *)dataArray{
_horizontalDateArray = horizontalDateArray;
_verticalDateArray = verticalDateArray;
_dataArray = dataArray;
[self setNeedsDisplay];
}
点h文件.png
点m文件.png
7.使用方法
使用方法.png
Demo链接# DrawLineChartDemo代码没做优化，有好的优化还请在github上提交一下
