先看效果图
line.gif
所用框架
CAShapeLayer与UIBezierPath配合画线。画线的两种方法：
- DrawRect：DrawRect属于CoreGraphic框架，占用CPU，消耗性能大
- CAShapeLayer：CAShapeLayer属于CoreAnimation框架，通过GPU来渲染图形，节省性能。动画渲染直接提交给手机GPU，不消耗内存
实现方法
- 初始化存放x轴的view及y轴的view
- 随机产生x轴数据及y轴数据并赋值
NSMutableArray *xArray = [NSMutableArray new];
NSMutableArray *yArray = [NSMutableArray new];
int x = 10+arc4random()%5;
NSLog(@"x:%d",x);
for (int i=1; i<x; i++) {
[xArray addObject:[NSString stringWithFormat:@"%d",i]];
int y1 = (arc4random()%10)-5;
float y2 = (arc4random()%100) / 100.0;
float y = (float)(y1+y2);
NSLog(@"y1:%d y2:%f",y1,y2);
[yArray addObject:[NSString stringWithFormat:@"%.2f",y]];
}
[self.lineChart setXvalue:xArray];
[self.lineChart setDataArray:yArray];
3.在对应的轴线上添加组件赋值，折线的实现首先对获取到的y轴数据做处理
3.1 取出最大值最小值
NSMutableArray *dataArray = [NSMutableArray new];
CGFloat max = [[yArray valueForKeyPath:@"@max.floatValue"] floatValue];
_maxValue = max;
CGFloat min = [[yArray valueForKeyPath:@"@min.floatValue"] floatValue];
_minValue = min;
if (max>=0) {
_maxValue = max * 1.4;
}else {
_maxValue = max * 0.6;
}
if (min>=0) {
_minValue = min * 0.6;
}else {
_minValue = min * 1.4;
}
CGFloat ava = (_maxValue-_minValue)/3;
[dataArray addObject:[NSString stringWithFormat:@"%.2f%%",_maxValue]];
[dataArray addObject:[NSString stringWithFormat:@"%.2f%%",(_maxValue-ava)]];
[dataArray addObject:[NSString stringWithFormat:@"%.2f%%",(_minValue+ava)]];
[dataArray addObject:[NSString stringWithFormat:@"%.2f%%",_minValue]];
return dataArray;
3.2 画背景线
CAShapeLayer *bgLayer = [CAShapeLayer layer];
bgLayer.strokeColor = self.bgLineColor.CGColor;
UIBezierPath *linePath = [UIBezierPath bezierPath];
linePath.lineWidth = 2.0;
//背景线
[yValue enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger i, BOOL * _Nonnull stop) {
[linePath moveToPoint:CGPointMake(0 , self.lineHeight / (yValue.count - 1) * i)];
[linePath addLineToPoint:CGPointMake(self.frame.size.width-self.yWidth ,self.lineHeight / (yValue.count - 1) * i)];
}];
bgLayer.path = linePath.CGPath;
[self.layer addSublayer:bgLayer];
3.3 画折线
///折线图
_lineLayer.lineWidth = 1.0;
_lineLayer.strokeColor = COLORHEX(0x24d8fd).CGColor;
_lineLayer.fillColor = [UIColor clearColor].CGColor;
_fillLayer.fillColor = [COLORHEX(0x24d8fd) colorWithAlphaComponent:0.2].CGColor;
UIBezierPath *linePath = [UIBezierPath bezierPath];
UIBezierPath *fillpath = [UIBezierPath bezierPath];
//值差与高度的比例
CGFloat unitValue = (_maxValue - _minValue)/self.lineHeight;
//平均宽度
CGFloat unitWidth = (self.frame.size.width-self.yWidth)/(dataArray.count-1);
NSInteger startY = ABS(self.lineHeight - ([dataArray[0] floatValue]-self.minValue) / unitValue);
[linePath moveToPoint:CGPointMake(0, startY)];
[fillpath moveToPoint:CGPointMake(0, startY)];
[dataArray enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
CGFloat xPosition = unitWidth * idx;
CGFloat yPosition;
if (unitValue == 0.00) {
yPosition = 0.00;
}else {
yPosition = ABS(self.lineHeight - ([obj floatValue]-self.minValue) / unitValue);
}
[linePath addLineToPoint:CGPointMake(xPosition, yPosition)];
[fillpath addLineToPoint:CGPointMake(xPosition, yPosition)];
//在最后一组数据时给填充路径形成一个闭包
if (idx == dataArray.count-1) {
[fillpath addLineToPoint:CGPointMake(self.frame.size.width-self.yWidth, self.lineHeight)];
[fillpath addLineToPoint:CGPointMake(0, self.lineHeight)];
[fillpath moveToPoint:CGPointMake(0, startY)];
}
}];
3.4 动画效果
CABasicAnimation *ani = [ CABasicAnimation animationWithKeyPath : NSStringFromSelector ( @selector (strokeEnd))];
ani.fromValue = @0;
ani.toValue = @1;
ani.duration = 2.0;
[_lineLayer addAnimation:ani forKey:NSStringFromSelector(@selector(strokeEnd))];
__block typeof(&*self) ws = self;
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[ws.layer addSublayer:ws.fillLayer];
});
