简单iOS折线图

先看效果图

line.gif

所用框架

CAShapeLayer与UIBezierPath配合画线。画线的两种方法：

• DrawRect：DrawRect属于CoreGraphic框架，占用CPU，消耗性能大
• CAShapeLayer：CAShapeLayer属于CoreAnimation框架，通过GPU来渲染图形，节省性能。动画渲染直接提交给手机GPU，不消耗内存

实现方法

1. 初始化存放x轴的view及y轴的view
2. 随机产生x轴数据及y轴数据并赋值

NSMutableArray *xArray = [NSMutableArray new];  
NSMutableArray *yArray = [NSMutableArray new];
int x = 10+arc4random()%5;
    NSLog(@"x:%d",x);
    for (int i=1; i

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];
});

demo地址

https://github.com/RedBluePeas/line_test