iOS动画折线图

最新推荐文章于 2024-06-24 09:48:58 发布
最新推荐文章于 2024-06-24 09:48:58 发布
阅读量102 收藏
点赞数
文章标签： 后端
原文链接：https://juejin.im/post/5b74e86b6fb9a009934bd9ce
版权

效果图：

后端传一个数组，然后根据数组生成点的坐标。所以解析下，我们需要画的有点，点和点之间的线，以及背景和下面的期数时间。最后我们需要加块有效果的红色块，这块要的效果是可以手指点击和滑动区域这个块就在哪个位置的点上。

首先我们需要把几个方法整理出来：

//画点和点之间的线和背景
- (void)drawTimeLine:(CGPoint)point toPoint:(CGPoint)toPoint {
    [self.timeLinePath moveToPoint:point];
    [self.timeLinePath addLineToPoint:toPoint];
    
    [self.fillPath moveToPoint:point];
    [self.fillPath addLineToPoint:toPoint];
    
    [self.fillPath addLineToPoint:self.xendPoint];
    [self.fillPath addLineToPoint:self.xstartPoint];
    
    self.fillColorLayer.path = self.fillPath.CGPath;
    
    [self.layer addSublayer:self.fillColorLayer];
    
    self.timeLineLayer.path = self.timeLinePath.CGPath;
    [self.layer addSublayer:self.timeLineLayer];
}

//画点
- (void)setupCircleLayer:(CGPoint)point tag:(NSInteger)tag{
    self.circleLayer = [[CALayer alloc] init];
    self.circleLayer.backgroundColor = [UIColor baseColor].CGColor;
    self.circleLayer.frame = CGRectMake(0, 0, 4, 4);
    self.circleLayer.cornerRadius = 2;
    self.circleLayer.position = point;
    self.circleLayer.masksToBounds = YES;
    [self.layer addSublayer:self.circleLayer];
}

//画文字
- (void)drawLabelAtRect:(CGRect)rect textStr:(NSString*)textStr color:(UIColor *)color {
    CATextLayer *textLayer = [CATextLayer layer];
    textLayer.frame = rect;
    [self.layer addSublayer:textLayer];
    //set text attributes
    textLayer.foregroundColor = color.CGColor;
    textLayer.alignmentMode = kCAAlignmentCenter;
    textLayer.wrapped = YES;
    //choose a font
    UIFont *font = [UIFont systemFontOfSize:10];
    //set layer font
    CFStringRef fontName = (__bridge CFStringRef)font.fontName;
    CGFontRef fontRef = CGFontCreateWithFontName(fontName);
    textLayer.font = fontRef;
    textLayer.fontSize = font.pointSize;
    CGFontRelease(fontRef);
    textLayer.contentsScale = [UIScreen mainScreen].scale;
    //choose some text
    //set layer text
    textLayer.string = textStr;
}
复制代码

好有了上面3个方法我们基本图形概括就可以画出来了，现在我们需要的是确定坐标。 我们都知道在手机上，左上角是（0，0），而在我们这个坐标中我们想要的是左下角的这个点是我们的（0，0）对不对，所以我们需要一个转换思维的过程，就是我们坐下脚的真实坐标可能是（20， 125）而在我们眼里是（0，0）然后去算其他的所有坐标，我不知道这么说能不能理解。 然后后端传给你的是一些比如第几期多少利率之类的数据。所以你先要确定的就是首尾的4个点，然后根据百分比变化去算其他的点，不然没有根据你是算不出来的。如果这些你都理清楚了，那基本就没什么问题了。

接下来说下上面这个动画我们怎么实现，很清晰的一个就是在这个块区域你点击的横坐标x肯定是要和红色块相关的，所有我们要做的就是根据你手指的点击或者滑动的x（横坐标）来显示这个块该在哪，然后就是这个块肯定是和我们点相关的，所以我的做法，是把数组转换出来的坐标存下来，然后根据横坐标X，去确定红色块的Y，而红色块始终是在我们点的上面的，之间的纵坐标的的差距是固定的，这样一分析就很明了，上代码：

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    UITouch *touch=[touches anyObject];
    CGPoint point = [touch locationInView:self];
    [self showIllabel:point];
}

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    UITouch *touch=[touches anyObject];
    CGPoint point = [touch locationInView:self];
    [self showIllabel:point];
}

- (void)showIllabel:(CGPoint)point {
    if (self.model.projectPlanNo.length > 0) {
        if (point.x < 20) {
            NSString *firstY = self.pointYArray[0];
            self.illLabel.center = CGPointMake(20, firstY.floatValue - 30);
            KZWdayUpInvestIrrConfigModel *daymodel = self.model.dayUpInvestIrrConfigList[0];
            self.illLabel.text = [NSString stringWithFormat:@"%.1f%%\n第%ld期", daymodel.yearRate*100, daymodel.period];
        }else if (point.x > SCREEN_WIDTH - 15) {
            NSString *endY = self.pointYArray[self.pointYArray.count - 1];
            self.illLabel.center = CGPointMake(SCREEN_WIDTH - 15, endY.floatValue - 30);
            KZWdayUpInvestIrrConfigModel *daymodel = self.model.dayUpInvestIrrConfigList[self.pointYArray.count - 1];
            self.illLabel.text = [NSString stringWithFormat:@"%.1f%%\n第%ld期", daymodel.yearRate*100, daymodel.period];
        }else {
            CGFloat oneWidth = (SCREEN_WIDTH - 35)/(self.model.dayUpInvestIrrConfigList.count - 1);
            NSInteger which = (point.x - 30)/oneWidth;
            if (which < self.pointXArray.count  - 1) {
                NSString *whichY = self.pointYArray[which + 1];
                NSString *whichX = self.pointXArray[which + 1];
                self.illLabel.center = CGPointMake(whichX.floatValue, whichY.floatValue - 30);
                KZWdayUpInvestIrrConfigModel *daymodel = self.model.dayUpInvestIrrConfigList[which + 1];
                self.illLabel.text = [NSString stringWithFormat:@"%.1f%%\n第%ld期", daymodel.yearRate*100, daymodel.period];
            }
        }
    }
}
复制代码

最后我们是加到tabeleView上的，手势有冲突，解决下：

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch{
    if ([gestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]]) {
        //满足条件拦截手势
        return YES;
    }
    return NO;
}

- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer{
    if ([gestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]]) {
        return NO;
    }
    return YES;
}
复制代码

这样这个折线图就算完成了。 上完整代码：

//
//  KZWRollingView.m
//  kongzhongfinancial
//
//  Created by ouyang on 2018/8/9.
//  Copyright © 2018年 ouy. All rights reserved.
//

#import "KZWRollingView.h"

@interface KZWRollingView()

@property (nonatomic, assign) CGRect rollingFrame;
@property (nonatomic, strong) UIBezierPath *timeLinePath;
@property (nonatomic, strong) CAShapeLayer *timeLineLayer;
@property (nonatomic, strong) UIBezierPath *fillPath;
@property (nonatomic, strong) CAShapeLayer *fillColorLayer;
@property (nonatomic, assign) CGPoint xstartPoint;
@property (nonatomic, assign) CGPoint xendPoint;
@property (nonatomic, strong) CALayer *circleLayer;
@property (nonatomic, strong) UIButton *pointButton;

@property (nonatomic, strong) UILabel *illLabel;
@property (nonatomic, strong) NSMutableArray *pointYArray;
@property (nonatomic, strong) NSMutableArray *pointXArray;

@end

@implementation KZWRollingView

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        self.pointYArray = [NSMutableArray array];
        self.pointXArray = [NSMutableArray array];
        self.rollingFrame = frame;
        self.xstartPoint = CGPointMake(20, 125);
        self.xendPoint = CGPointMake(SCREEN_WIDTH - 15, 125);
        [self addSubview:self.illLabel];
    }
    return self;
}

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch{
    if ([gestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]]) {
        //满足条件拦截手势
        return YES;
    }
    return NO;
}

- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer{
    if ([gestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]]) {
        return NO;
    }
    return YES;
}

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    UITouch *touch=[touches anyObject];
    CGPoint point = [touch locationInView:self];
    [self showIllabel:point];
}

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    UITouch *touch=[touches anyObject];
    CGPoint point = [touch locationInView:self];
    [self showIllabel:point];
}

- (void)showIllabel:(CGPoint)point {
    if (self.model.projectPlanNo.length > 0) {
        if (point.x < 20) {
            NSString *firstY = self.pointYArray[0];
            self.illLabel.center = CGPointMake(20, firstY.floatValue - 30);
            KZWdayUpInvestIrrConfigModel *daymodel = self.model.dayUpInvestIrrConfigList[0];
            self.illLabel.text = [NSString stringWithFormat:@"%.1f%%\n第%ld期", daymodel.yearRate*100, daymodel.period];
        }else if (point.x > SCREEN_WIDTH - 15) {
            NSString *endY = self.pointYArray[self.pointYArray.count - 1];
            self.illLabel.center = CGPointMake(SCREEN_WIDTH - 15, endY.floatValue - 30);
            KZWdayUpInvestIrrConfigModel *daymodel = self.model.dayUpInvestIrrConfigList[self.pointYArray.count - 1];
            self.illLabel.text = [NSString stringWithFormat:@"%.1f%%\n第%ld期", daymodel.yearRate*100, daymodel.period];
        }else {
            CGFloat oneWidth = (SCREEN_WIDTH - 35)/(self.model.dayUpInvestIrrConfigList.count - 1);
            NSInteger which = (point.x - 30)/oneWidth;
            if (which < self.pointXArray.count  - 1) {
                NSString *whichY = self.pointYArray[which + 1];
                NSString *whichX = self.pointXArray[which + 1];
                self.illLabel.center = CGPointMake(whichX.floatValue, whichY.floatValue - 30);
                KZWdayUpInvestIrrConfigModel *daymodel = self.model.dayUpInvestIrrConfigList[which + 1];
                self.illLabel.text = [NSString stringWithFormat:@"%.1f%%\n第%ld期", daymodel.yearRate*100, daymodel.period];
            }
        }
    }
}

- (UILabel *)illLabel {
    if (!_illLabel) {
        _illLabel = [[UILabel alloc] initWithFrame:CGRectMake(8, 40, 45, 30)];
        _illLabel.backgroundColor = [UIColor baseColor];
        _illLabel.textColor = [UIColor whiteColor];
        _illLabel.textAlignment = NSTextAlignmentCenter;
        _illLabel.numberOfLines = 0;
        _illLabel.layer.cornerRadius = 3;
        _illLabel.layer.masksToBounds = YES;
        _illLabel.font = [UIFont systemFontOfSize:9];
        _illLabel.hidden = YES;
    }
    return _illLabel;
}

- (UIBezierPath *)timeLinePath {
    if (!_timeLinePath) {
        _timeLinePath = [[UIBezierPath alloc]init];
    }
    return _timeLinePath;
}

- (CAShapeLayer *)timeLineLayer {
    if (!_timeLineLayer) {
        _timeLineLayer = [[CAShapeLayer alloc]init];
        _timeLineLayer.strokeColor = [UIColor baseColor].CGColor;
        _timeLineLayer.lineWidth = 1.0f;
        _timeLineLayer.fillColor = [UIColor clearColor].CGColor;
    }
    return _timeLineLayer;
}

- (UIBezierPath *)fillPath {
    if (!_fillPath) {
        _fillPath = [[UIBezierPath alloc]init];
    }
    return _fillPath;
}

- (CAShapeLayer *)fillColorLayer {
    if (!_fillColorLayer) {
        _fillColorLayer = [[CAShapeLayer alloc]init];
        _fillColorLayer.fillColor = [[UIColor colorWithHexString:@"ff9933"] colorWithAlphaComponent:0.2].CGColor;
        _fillColorLayer.strokeColor = [UIColor clearColor].CGColor;
    }
    return _fillColorLayer;
}

- (void)drawTimeLine:(CGPoint)point toPoint:(CGPoint)toPoint {
    [self.timeLinePath moveToPoint:point];
    [self.timeLinePath addLineToPoint:toPoint];
    
    [self.fillPath moveToPoint:point];
    [self.fillPath addLineToPoint:toPoint];
    
    [self.fillPath addLineToPoint:self.xendPoint];
    [self.fillPath addLineToPoint:self.xstartPoint];
    
    self.fillColorLayer.path = self.fillPath.CGPath;
    
    [self.layer addSublayer:self.fillColorLayer];
    
    self.timeLineLayer.path = self.timeLinePath.CGPath;
    [self.layer addSublayer:self.timeLineLayer];
}

- (void)setupCircleLayer:(CGPoint)point tag:(NSInteger)tag{
    self.circleLayer = [[CALayer alloc] init];
    self.circleLayer.backgroundColor = [UIColor baseColor].CGColor;
    self.circleLayer.frame = CGRectMake(0, 0, 4, 4);
    self.circleLayer.cornerRadius = 2;
    self.circleLayer.position = point;
    self.circleLayer.masksToBounds = YES;
    [self.layer addSublayer:self.circleLayer];
}

- (void)drawLabelAtRect:(CGRect)rect textStr:(NSString*)textStr color:(UIColor *)color {
    CATextLayer *textLayer = [CATextLayer layer];
    textLayer.frame = rect;
    [self.layer addSublayer:textLayer];
    //set text attributes
    textLayer.foregroundColor = color.CGColor;
    textLayer.alignmentMode = kCAAlignmentCenter;
    textLayer.wrapped = YES;
    //choose a font
    UIFont *font = [UIFont systemFontOfSize:10];
    //set layer font
    CFStringRef fontName = (__bridge CFStringRef)font.fontName;
    CGFontRef fontRef = CGFontCreateWithFontName(fontName);
    textLayer.font = fontRef;
    textLayer.fontSize = font.pointSize;
    CGFontRelease(fontRef);
    textLayer.contentsScale = [UIScreen mainScreen].scale;
    //choose some text
    //set layer text
    textLayer.string = textStr;
}

- (void)setModel:(KZWRollingProjectModel *)model {
    if (_model == model) {
        return;
    }
    _model = model;
    
    [self.pointYArray removeAllObjects];
    [self.pointXArray removeAllObjects];
   
    NSInteger pointCount = model.dayUpInvestIrrConfigList.count;
    if (pointCount > 0) {
        CGPoint firstPoint = CGPointMake(20, 90);
        for (int i = 0; i < model.dayUpInvestIrrConfigList.count; i ++) {
            KZWdayUpInvestIrrConfigModel *daymdoel = model.dayUpInvestIrrConfigList[i];
            CGPoint point = CGPointMake(20 + i*(SCREEN_WIDTH - 35)/(pointCount - 1), 90 - (daymdoel.yearRate - model.baseIrrRate)/model.maxAddIrrRate*60);
            if (i > 0) {
                [self drawTimeLine:firstPoint toPoint:point];
            }
            firstPoint = point;
            [self.pointYArray addObject:[NSString stringWithFormat:@"%.2f", point.y]];
            [self.pointXArray addObject:[NSString stringWithFormat:@"%.2f", point.x]];
            
            [self setupCircleLayer:point tag:i];
            if (daymdoel.desc.length > 0) {
                [self drawLabelAtRect:CGRectMake(point.x - 15, point.y - 15, 30, 10) textStr:[NSString stringWithFormat:@"%.1f%%", daymdoel.yearRate*100] color:[UIColor baseColor]];
                [self drawLabelAtRect:CGRectMake(point.x - 16, 125, 32, 36) textStr:[NSString stringWithFormat:@"%@\n%ld天", daymdoel.desc, model.cycleDuration] color:[UIColor colorWithHexString:FontColor666666]];
            }
        }
    }
    self.illLabel.hidden = NO;
    KZWdayUpInvestIrrConfigModel *firstdaymodel = self.model.dayUpInvestIrrConfigList[0];
    NSString *firstY = self.pointYArray[0];
    self.illLabel.center = CGPointMake(20, firstY.floatValue - 30);
    self.illLabel.text = [NSString stringWithFormat:@"%.1f%%\n第%ld期", firstdaymodel.yearRate*100, firstdaymodel.period];
}

@end


复制代码

所以一些效果和动画真正难的是坐标和分析，而不是实现。

weixin_34318956
关注
iOS折线图
gcx19891102的博客
09-09 342
简单的折线图DEMO
iOS画折线图
杜甲同学的专栏
03-02 3434
代码例子效果：  下载地址：http://download.csdn.net/detail/qqmcy/6983187 LineChartViewDemo.h #import @interface LineChartViewDemo : UIView //横竖轴距离间隔 @property (assign) NSInteger hInterval; @prop
ios-折线图.zip
07-11
纯原生CoreGraphics绘制 欢迎交流 希望帮到大家一起学习
推荐文章：探索高效灵活的iOS折线图解决方案 - LPLineChartView
最新发布
gitblog_00009的博客
06-24 390
推荐文章：探索高效灵活的iOS折线图解决方案 - LPLineChartView LPLineChartView项目地址:https://gitcode.com/gh_mirrors/lp/LPLineChartView 在追寻数据可视化极致体验的旅途中，一款名为LPLineChartView的开源库脱颖而出，它以其简洁高效的API设计与高度可定制化的特性，为iOS开发者提供了一种全新的折线图绘...
iOS - 折线图
司小文的专栏
01-06 2748
前几天项目需求要做折线图，简单的搞了一下，正好做个demo给小伙伴们一起搞搞。这次先上图再上代码直接上代码了，功能简单，注释写好了// // ViewController.m // cccc // // Created by 司小文 on 2017/12/22. // Copyright © 2017年 司小文. All rights reserved. // #import "View...
IOS —— 折线图 Echart随笔
banlong6430的博客
12-12 327
前阵子在寻觅折线图第三方工具的时候，找了许久都没太满意。（要么太简单，要么兼容不了） 在几经波折下找到了百度的Echarts，在学习的过程中也踩了几波坑。这里分享下自己学习的代码以及相应的备注 1.折线图 - (void)viewDidLoad { [super viewDidLoad]; //折线图 // [self createLineCha...
iOS开发（OC）——折线图的绘制（带动画）
菜鸟历程
09-21 5046
新建一个DrawLine类继承UIView DrawLine.h代码 @property (nonatomic,strong)NSMutableArray *data;@property (nonatomic, strong) CAShapeLayer *lineChartLayer; @property (nonatomic, strong)UIBezierPath * path1; /** 渐变
ios-滑动折线图.zip
07-11
"ios-滑动折线图.zip"项目显然关注的是如何在移动设备上实现一个可左右滑动并且支持长按显示具体数据的折线图。这个功能在数据分析、金融应用或者统计展示等场景中非常常见。以下将详细介绍实现这一功能所需的关键...
ios-折线图绘制.zip
07-11
在iOS开发中，折线图是一种常见的数据可视化方式，它能直观地展示数据的变化趋势。本教程将指导你如何在iOS应用中实现简单的折线图绘制。我们将主要使用Swift编程语言，结合UIKit或Core Graphics框架来完成这个任务...
iOS使用Charts框架绘制折线图
08-31
本篇文章将深入讲解如何使用`Charts`框架在iOS应用中绘制折线图。 首先，我们需要初始化`LineChartView`对象。`LineChartView`是`Charts`框架中用于绘制折线图的主要类。以下是如何创建并添加到视图层次结构的示例...
iOS中的折线图绘制
12-19
iOS折线图。重写drawRect，再用CGContextRef画线。主要是坐标点的转换。
ios折线图demo
08-27
ios上实现的一个简单的折线图demo。
ios-一个简单的可滑动的图表折线图line chart.zip
07-11
最近项目上有一个折线图的需求，根据实际的产品需求、面向服务器接口数据手撸了一个，自己写随意玩=。= 简书介绍http://www.jianshu.com/p/90c68507e378 github下载地址https://github.com/PengXinabc/PXLineChart
关于ios的折线图制作
12-16
ios折线图完美制作。满足各种数据需求。内含详细注释，代码清晰。方便用户自己修改。
iOS股票折线图
06-12
在iOS应用开发中，创建股票折线图是展示金融数据常用的一种方式，它能直观地反映出股票价格随时间的变化趋势。本项目“iOS股票折线图”着重介绍如何在iOS平台下实现这一功能，主要涉及的技术包括数据解析、图形渲染...
iOS 折线图动画
猴子_寻觅灯塔
05-28 1782
最近做了一个小demo，里面需要动态hui'zhi
iOS 折线图，柱状图
qiangshuting的博客
01-30 688
在网上看了许多大家写的折线图，柱状图，有两种 如果只是简单的运用，可以自己用动画写一个 github地址 在网上看了许多大家写的折线图，柱状图，有两种 要点有： UIBezierPath用于定义一个直线/曲线组合而成的路径，并且可以在自定义视图中渲染该路径。 1 . + (instancetype)bezierPath; 初始化一个UIBezierPath对象。 2 .路径操作函数 -...
iOS轻量折线图库
weixin_33739646的博客
03-30 202
效果图 项目地址 DBLineChart 优势 支持坐标轴和标签属性自定义 支持折线特性自定义 轻量，依赖系统库，无额外依赖 功能单一，仅折线图，无其他夹带 使用说明 参考项目说明 转载于:https://juejin.im/post/5c9f1fe151882567dd1cbe01...
iOS实现动画颜色渐变折线图
本文主要探讨了如何在iOS平台上实现一种独特的折线图，即带有动画效果且线条颜色渐变的折线图。这种折线图能更生动地展示数据变化，提升用户界面的视觉吸引力。由于网络上关于这种特殊折线图的教程并不多见，本文...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值