iOS 折线图实现，虚线，渐变色填充，线条动画

效果图 Demo地址
未命名.gif
Demo主要实现了一下几点功能
1.折线图 + stroke动画 + 可左右滚动
2.虚线标注
3.渐变蒙层填充
4.小圆点展示 + 点击放大动画
如果以上效果有满足您当前需要请往下看
拆分界面

调用示例

- (NXLineChartView * )chartView{
    if (!_chartView) {
        _chartView = [[NXLineChartView alloc]init];
        _chartView.backgroundColor = [UIColor whiteColor];
        _chartView.center = CGPointMake([UIScreen mainScreen].bounds.size.width/2, [UIScreen mainScreen].bounds.size.height/2);
        _chartView.bounds = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width-100, 200);
        _chartView.lineChartXLabelArray = @[@"魅族",@"华为",@"中兴",@"小米",@"苹果",@"一加",@"乐视",@"音乐",@"电视",@"体育"];
        _chartView.lineChartYLabelArray = @[];
        _chartView.LineChartDataArray   = @[@100,@40,@60,@45,@100,@55,@33,@120,@40,@100];
    }
    return _chartView;
}


#import <UIKit/UIKit.h>

@interface NXLineChartView : UIView
@property (nonatomic, strong) NSArray * lineChartYLabelArray;
@property (nonatomic, strong) NSArray * lineChartXLabelArray; // X轴数据
@property (nonatomic, strong) NSArray * LineChartDataArray; // 数据源
@end
1.画折线，这里通过UIBezierPath和CAShapeLayer结合绘图
先创建可左右滚动的scrollView
E66E72C5-76D6-4E08-AA7A-B27DAFA32DFC.png
//可滚动视图
- (UIScrollView *)mainScroll{
    if (!_mainScroll) {
        _mainScroll = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
        _mainScroll.showsVerticalScrollIndicator = NO;
        _mainScroll.showsHorizontalScrollIndicator = NO;
        [self addSubview:_mainScroll];
    }
    return _mainScroll;
}
通过LineChartDataArray获得的数据，进行绘制
610EA4B9-561C-49F8-AF06-DB3D9747A498.png
// 设置折线图
- (void)setLineChartDataArray:(NSArray *)LineChartDataArray{
    _LineChartDataArray = LineChartDataArray;
    if (!_LineChartDataArray) return;
   // [self drawGragient];

    UIBezierPath * bezierPath = [self getPath];
    
    CAShapeLayer * layers = [CAShapeLayer layer];
    
    layers.path = bezierPath.CGPath;
    layers.lineWidth = 2.0;
    layers.strokeColor = [UIColor redColor].CGColor;
    layers.fillColor = [UIColor clearColor].CGColor;
    [self doAnimationWithLayer:layers];
    [self.mainScroll.layer addSublayer:layers];
   // self.gredientView.layer.mask = layers;
    [self addTopPointButton]; // 小圆点
    [self drawGredientLayer]; // 渐变
   
}

- (UIBezierPath *)getPath{
    self.topPointArray = [[NSMutableArray alloc]init];
    UIBezierPath * bezierPath = [UIBezierPath bezierPath];
    for (int idx =0; idx<_LineChartDataArray.count; idx++) {
        if (idx == 0) {
            CGPoint startPoint = CGPointMake([_pointXArray[0] floatValue], self.frame.size.height-[_LineChartDataArray[0] floatValue]-bottomMarginScale);
            [bezierPath moveToPoint:startPoint];
            [self.topPointArray addObject:[NSValue valueWithCGPoint:startPoint]];
            
        }else{
            CGPoint point = CGPointMake([_pointXArray[idx] floatValue], self.frame.size.height-[_LineChartDataArray[idx] floatValue]-bottomMarginScale);
            [bezierPath addLineToPoint:point];
            [self.topPointArray addObject:[NSValue valueWithCGPoint:point]];
        }
    }
    return bezierPath;
    
}
线条动画采用核心动画strokeEnd这个效果实现，代码如下
- (void)doAnimationWithLayer:(CAShapeLayer *)layer{
    CABasicAnimation * baseAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    baseAnimation.duration = 2;
    baseAnimation.fromValue = @0.0;
    baseAnimation.toValue = @1.0;
    baseAnimation.repeatCount = 1;
    [layer addAnimation:baseAnimation forKey:@"strokeAnimation"];
    
    
}
2.虚线标注
468532F5-8A95-490C-AA67-3C3418E34E01.png
- (void)drawRect:(CGRect)rect {
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGFloat yAxisOffset =  10.f;
    CGPoint point;
    CGFloat yStepHeight = rect.size.height / self.LineChartDataArray.count;

    CGContextSetStrokeColorWithColor(ctx, [UIColor lightGrayColor].CGColor);
    CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
    
    for (NSUInteger i = 0; i < _LineChartDataArray.count; i++) {
        point = CGPointMake(10 + yAxisOffset, (rect.size.height - i * yStepHeight + 10 / 2));
        CGContextMoveToPoint(ctx, point.x, point.y);
        // add dotted style grid
        CGFloat dash[] = {6, 5};
        // dot diameter is 20 points
        CGContextSetLineWidth(ctx, 0.5);
        CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
        
        CGContextSetLineCap(ctx, kCGLineCapRound);
        CGContextSetLineDash(ctx, 0.0, dash, 2);
        // 这里是改变虚线的宽度
        CGRect frame = CGRectMake(rect.origin.x, rect.origin.y, self.totalWidth, rect.size.height);
        CGContextAddLineToPoint(ctx, CGRectGetWidth(frame) - 5 + 5, point.y);
        CGContextStrokePath(ctx);
    }

}
3.渐变蒙层填充
0EADDE88-83BB-4D0F-9957-1251A7090C8D.png
/*

 @parameter 背景颜色填充
 */

- (void)drawGredientLayer{
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = CGRectMake(0, 0, self.totalWidth, self.frame.size.height-bottomMarginScale);
    gradientLayer.colors = @[(__bridge id)[UIColor colorWithRed:250/255.0 green:170/255.0 blue:10/255.0 alpha:0.8].CGColor,(__bridge id)[UIColor colorWithWhite:1 alpha:0.4].CGColor];
    
    gradientLayer.locations=@[@0.0,@1.0];
    gradientLayer.startPoint = CGPointMake(0.0,0.0);
    gradientLayer.endPoint = CGPointMake(1,0);
   
    
    UIBezierPath *gradientPath = [UIBezierPath bezierPath];
    [gradientPath moveToPoint:CGPointMake([_pointXArray[0] floatValue], self.frame.size.height-bottomMarginScale)];
    for (int i=0; i<_LineChartDataArray.count; i++) {
        [gradientPath addLineToPoint:CGPointMake([_pointXArray[i] floatValue], self.frame.size.height-[_LineChartDataArray[i] floatValue]-bottomMarginScale)];
    }
    [gradientPath addLineToPoint:CGPointMake([_pointXArray[_pointXArray.count-1] floatValue], self.frame.size.height-bottomMarginScale)];
    CAShapeLayer *arc = [CAShapeLayer layer];
    arc.path = gradientPath.CGPath;
    gradientLayer.mask = arc;
    [self.mainScroll.layer addSublayer:gradientLayer];

}
4.小圆点展示 + 点击放大动画
小圆点
1656071B-9D9B-4E6B-A2D9-7F2DEC6A6D13.png
// 添加小圆点
- (void)addTopPointButton{
    if (self.topPointArray.count ==0) return;
    for (int idx =0; idx<self.topPointArray.count; idx++) {
        CGPoint point = [self.topPointArray[idx] CGPointValue];
        UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
        button.center = point;
        button.bounds = CGRectMake(0, 0, 10, 10);
        button.layer.cornerRadius = 5;
        button.clipsToBounds = YES;
        button.backgroundColor = [UIColor cyanColor];
        button.tag = GAP+idx;
        [button setTitle:[self.LineChartDataArray[idx] stringValue] forState:UIControlStateNormal];
        [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        button.titleLabel.font = [UIFont systemFontOfSize:5];
        button.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
        [button addTarget:self action:@selector(didSelectButtonClick:) forControlEvents:UIControlEventTouchUpInside];
        [self.mainScroll addSubview:button];
    }

    
    
}
小圆点点击放大动画采用核心动画scale
D4D0D9FE-58AD-481D-84D4-F5231A1DBDCD.png
- (void)didSelectButtonClick:(UIButton *)sender{
    for (id emptyObj in self.mainScroll.subviews) {
        if ([emptyObj isKindOfClass:[UIButton class]]) {
            UIButton * btn = (UIButton *)emptyObj;
          //  btn.bounds = CGRectMake(0, 0, 5, 5);
          //  [btn setTitleColor:[UIColor clearColor] forState:UIControlStateNormal];
            [btn.layer removeAllAnimations];
        }
    }
    [self doScaleAnimationWithView:sender];
    NSLog(@"%@",[self.LineChartDataArray[sender.tag-GAP] stringValue]);
    [sender setTitle:[self.LineChartDataArray[sender.tag-GAP] stringValue] forState:UIControlStateNormal];
    [sender setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    sender.titleLabel.font = [UIFont systemFontOfSize:5];
    
}

- (void)doScaleAnimationWithView:(UIView *)view{
    CAKeyframeAnimation * animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
    animation.duration = 0.3;
    animation.values = @[@2,@1.5,@0.8,@1,@2];
    animation.repeatCount = 2;
    
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    [view.layer addAnimation:animation forKey:@"scaleAnimations"];
}
底部X坐标轴数据填充
7683165E-2EBF-4946-9B48-773E5C67F5EB.png
// 底部X视图
- (void)setLineChartXLabelArray:(NSArray *)lineChartXLabelArray{
    _lineChartXLabelArray = lineChartXLabelArray;
    if (!_lineChartXLabelArray) return;
    
    _pointXArray = [[NSMutableArray alloc]init];
   // CGFloat labelWidthScale = (self.frame.size.width-leftXMarginScale-rightXMarginScale)/_lineChartXLabelArray.count;
    self.totalWidth =0;
    for (int idx = 0; idx < _lineChartXLabelArray.count; idx ++) {
        CGFloat labelWidthScale = [self getLabelWidthWithText:_lineChartXLabelArray[idx]];
        CGFloat x = self.totalWidth+marginScale;
        CGFloat y = self.frame.size.height- lineChartXlabelHeight;
        UILabel * label = [[UILabel alloc]init];
        label.frame = CGRectMake(x, y, labelWidthScale, lineChartXlabelHeight);
        label.text = _lineChartXLabelArray[idx];
        label.textAlignment = NSTextAlignmentCenter;
        label.textColor = [UIColor redColor];
        label.font = [UIFont systemFontOfSize:fontSize];
        [_pointXArray addObject:[NSString stringWithFormat:@"%.f",label.center.x]];
        [self.mainScroll addSubview:label];
        self.totalWidth = label.frame.origin.x+label.frame.size.width;
        [self.mainScroll setContentSize:CGSizeMake(CGRectGetMaxX(label.frame), 0)];
    }
    
}
再看下调用示例比较简单
- (NXLineChartView * )chartView{
    if (!_chartView) {
        _chartView = [[NXLineChartView alloc]init];
        _chartView.backgroundColor = [UIColor whiteColor];
        _chartView.center = CGPointMake([UIScreen mainScreen].bounds.size.width/2, [UIScreen mainScreen].bounds.size.height/2);
        _chartView.bounds = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width-100, 200);
        _chartView.lineChartXLabelArray = @[@"魅族",@"华为",@"中兴",@"小米",@"苹果",@"一加",@"乐视",@"音乐",@"电视",@"体育"];
        _chartView.lineChartYLabelArray = @[];
        _chartView.LineChartDataArray   = @[@100,@40,@60,@45,@100,@55,@33,@120,@40,@100];
    }
    return _chartView;
}

Demo地址

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,686评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,668评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,160评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,736评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,847评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,043评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,129评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,872评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,318评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,470评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,126评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2赞 351

推荐阅读更多精彩内容

  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,066评论 4赞 62
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,857评论 25赞 707
  • 六盘山有怀
    且登长城仰高山，望雁排云过六盘。 云淡天高长缨在，独留遐域西风寒。
    戈小生阅读 381评论 0赞 0
  • 关于改变
    我今天要将自己2014年觉得最有用的东西分享给大家，希望对大家有所帮助。 直接说结论你如果想改变自己，就必须接受现...
    结构学AI阅读 127评论 0赞 1
  • 2017-283
    因为害怕失败所以偷懒。 失败，你不够聪明。拒绝承认，于是放弃努力。 换工作，年纪大没技能，在等等吧。现在的工作混的...
    暁猴纸阅读 102评论 0赞 0