iOS 动画绘制线条颜色渐变的折线图

效果图

....................

概述

  • 现状

    折线图的应用比较广泛，为了增强用户体验，很多应用中都嵌入了折线图。折线图可以更加直观的表示数据的变化。网络上有很多绘制折线图的demo，有的也使用了动画，但是线条颜色渐变的折线图的demo少之又少，甚至可以说没有。该Blog阐述了动画绘制线条颜色渐变的折线图的实现方案，以及折线图线条颜色渐变的实现原理，并附以完整的示例。
  • 成果
    • 本人已将折线图封装到了一个UIView子类中，并提供了相应的接口。该自定义折线图视图，基本上可以适用于大部分需要集成折线图的项目。若你遇到相应的需求可以直接将文件拖到项目中，调用相应的接口即可
    • 项目文件中包含了大量的注释代码，若你的需求与折线图的实现效果有差别，那么你可以对项目文件的进行修改，也可以依照思路定义自己的折线图视图
  • Blog中涉及到的知识点
    • CALayer

      • 图层，可以简单的看做一个不接受用户交互的UIView
      • 每个图层都具有一个CALayer类型mask属性，作用与蒙版相似
      • Blog中主要用到的CALayer子类有
        • CAGradientLayer，绘制颜色渐变的背景图层
        • CAShapeLayer，绘制折线图
    • CAAnimation
      • 核心动画的基类（不可实例化对象），实现动画操作
    • Quartz 2D
      • 一个二维的绘图引擎，用来绘制折线（Path）和坐标轴信息（Text）

实现思路

  • 折线图视图

    • 整个折线图将会被自定义到一个UIView子类中
  • 坐标轴绘制
    • 坐标轴直接绘制到折线图视图上，在自定义折线图视图的 drawRect 方法中绘制坐标轴相关信息（线条和文字）
    • 注意坐标系的转换
  • 线条颜色渐变
    • 失败的方案

      • 开始的时候，为了实现线条颜色渐变，我的思考方向是，如何改变路径（UIBezierPath）的渲染颜色（strokeColor）。但是strokeColor只可以设置一种，所以最终无法实现线条颜色的渐变。
    • 成功的方案
      • 在探索过程中找到了CALayer的CALayer类型的mask（）属性，最终找到了解决方案，即：使用UIView对象封装渐变背景视图（frame为折线图视图的减去坐标轴后的frame），创建一个CAGradientLayer渐变图层添加到背景视图上。
      • 创建一个CAShapeLayer对象，用于绘制线条，线条的渲染颜色（strokeColor）为whiteColor，填充颜色 （fillColor）为clearColor，从而显示出渐变图层的颜色。将CAShapeLayer对象设置为背景视图的mask属性，即背景视图的 蒙版。
  • 折线
    • 使用 UIBezierPath 类来绘制折线
    • 折线转折处尖角的处理，使用 kCALineCapRound 与 kCALineJoinRound 设置折线转折处为圆角
    • 折线起点与终点的圆点的处理，可以直接在 UIBezierPath 对象上添加一个圆，设置远的半径为路径宽度的一半，从而保证是一个实心的圆而不是一个圆环
  • 折线转折处的点
    • 折线转折处点使用一个类来描述（不使用CGPoint的原因是：折线转折处的点需要放到一个数组中）
  • 坐标轴信息
    • X轴、Y轴的信息分别放到一个数组中
    • X轴显示的是最近七天的日期，Y轴显示的是最近七天数据变化的幅度
  • 动画
    • 使用CABasicAnimation类来完成绘制折线图时的动画
    • 需要注意的是，折线路径在一开始时需要社会线宽为0，开始绘制时才设置为适当的线宽，保证一开折线路径是隐藏的
  • 标签
    • 在动画结束时，向折线图视图上添加一个标签（UIButton对象），显示折线终点的信息
    • 标签的位置，需要根据折线终点的位置计算

具体实现

  • 折线转折处的点

    • 使用一个类来描述折线转折处的点，代码如下：

      // 接口
/** 折线图上的点 */
@interface IDLineChartPoint : NSObject
/** x轴偏移量 */
@property (nonatomic, assign) float x;
/** y轴偏移量 */
@property (nonatomic, assign) float y;
/** 工厂方法 */
+ (instancetype)pointWithX:(float)x andY:(float)y;
@end

// 实现
@implementation IDLineChartPoint
+ (instancetype)pointWithX:(float)x andY:(float)y {
    IDLineChartPoint *point = [[self alloc] init];
    point.x = x;
    point.y = y;
    return point;
}
@end
  • 自定义折线图视图
    • 折线图视图是一个自定义的UIView子类，代码如下：

      // 接口
/** 折线图视图 */
@interface IDLineChartView : UIView
/** 折线转折点数组 */
@property (nonatomic, strong) NSMutableArray<IDLineChartPoint *> *pointArray;
/** 开始绘制折线图 */
- (void)startDrawlineChart;
@end

// 分类
@interface IDLineChartView ()
@end

// 实现
@implementation IDLineChartView
// 初始化
- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        // 设置折线图的背景色
        self.backgroundColor = [UIColor colorWithRed:243/255.0 green:243/255.0 blue:243/255.0 alpha:1.0];
    }
    return self;
}
@end
    • 效果如图

  • 绘制坐标轴信息
    • 与坐标轴绘制相关的常量

      /** 坐标轴信息区域宽度 */
static const CGFloat kPadding = 25.0;
/** 坐标系中横线的宽度 */
static const CGFloat kCoordinateLineWith = 1.0;
    • 在分类中添加与坐标轴绘制相关的成员变量 
      /** X轴的单位长度 */
@property (nonatomic, assign) CGFloat xAxisSpacing;
/** Y轴的单位长度 */
@property (nonatomic, assign) CGFloat yAxisSpacing;
/** X轴的信息 */
@property (nonatomic, strong) NSMutableArray<NSString *> *xAxisInformationArray;
/** Y轴的信息 */
@property (nonatomic, strong) NSMutableArray<NSString *> *yAxisInformationArray;
    • 与坐标轴绘制相关的成员变量的get方法 
      - (CGFloat)xAxisSpacing {
    if (_xAxisSpacing == 0) {
        _xAxisSpacing = (self.bounds.size.width - kPadding) / (float)self.xAxisInformationArray.count;
    }
    return _xAxisSpacing;
}
- (CGFloat)yAxisSpacing {
    if (_yAxisSpacing == 0) {
        _yAxisSpacing = (self.bounds.size.height - kPadding) / (float)self.yAxisInformationArray.count;
    }
    return _yAxisSpacing;
}
- (NSMutableArray<NSString *> *)xAxisInformationArray {
    if (_xAxisInformationArray == nil) {
        // 创建可变数组
        _xAxisInformationArray = [[NSMutableArray alloc] init];
        // 当前日期和日历
        NSDate *today = [NSDate date];
        NSCalendar *currentCalendar = [NSCalendar currentCalendar];
        // 设置日期格式
        NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
        dateFormatter.dateFormat = @"MM-dd";
        // 获取最近一周的日期
        NSDateComponents *components = [[NSDateComponents alloc] init];
        for (int i = -7; i<0; i++) {
            components.day = i;
            NSDate *dayOfLatestWeek = [currentCalendar dateByAddingComponents:components toDate:today options:0];
            NSString *dateString = [dateFormatter stringFromDate:dayOfLatestWeek];
            [_xAxisInformationArray addObject:dateString];
        }
    }
    return _xAxisInformationArray;
}
- (NSMutableArray<NSString *> *)yAxisInformationArray {
    if (_yAxisInformationArray == nil) {
        _yAxisInformationArray = [NSMutableArray arrayWithObjects:@"0", @"10", @"20", @"30", @"40", @"50", nil];
    }
    return _yAxisInformationArray;
}
// 折线图上的点（重写get方法，后期需要暴露接口）
- (NSMutableArray<IDLineChartPoint *> *)pointArray {
    if (_pointArray == nil) {
        _pointArray = [NSMutableArray arrayWithObjects:[IDLineChartPoint pointWithX:1 andY:1], [IDLineChartPoint pointWithX:2 andY:2], [IDLineChartPoint pointWithX:3 andY:1.5], [IDLineChartPoint pointWithX:4 andY:2], [IDLineChartPoint pointWithX:5 andY:4], [IDLineChartPoint pointWithX:6 andY:1], [IDLineChartPoint pointWithX:7 andY:2], nil];
    }
    return _pointArray;
}
    • 绘制坐标轴的相关信息 
      - (void)drawRect:(CGRect)rect {
    // 获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    // x轴信息
    [self.xAxisInformationArray enumerateObjectsUsingBlock:^(NSString * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        // 计算文字尺寸
        UIFont *informationFont = [UIFont systemFontOfSize:10];
        NSMutableDictionary *attributes = [NSMutableDictionary dictionary];
        attributes[NSForegroundColorAttributeName] = [UIColor colorWithRed:158/255.0 green:158/255.0 blue:158/255.0 alpha:1.0];
        attributes[NSFontAttributeName] = informationFont;
        CGSize informationSize = [obj sizeWithAttributes:attributes];
        // 计算绘制起点
        float drawStartPointX = kPadding + idx * self.xAxisSpacing + (self.xAxisSpacing - informationSize.width) * 0.5;
        float drawStartPointY = self.bounds.size.height - kPadding + (kPadding - informationSize.height) / 2.0;
        CGPoint drawStartPoint = CGPointMake(drawStartPointX, drawStartPointY);
        // 绘制文字信息
        [obj drawAtPoint:drawStartPoint withAttributes:attributes];
    }];
    // y轴
    [self.yAxisInformationArray enumerateObjectsUsingBlock:^(NSString * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        // 计算文字尺寸
        UIFont *informationFont = [UIFont systemFontOfSize:10];
        NSMutableDictionary *attributes = [NSMutableDictionary dictionary];
        attributes[NSForegroundColorAttributeName] = [UIColor colorWithRed:158/255.0 green:158/255.0 blue:158/255.0 alpha:1.0];
        attributes[NSFontAttributeName] = informationFont;
        CGSize informationSize = [obj sizeWithAttributes:attributes];
        // 计算绘制起点
        float drawStartPointX = (kPadding - informationSize.width) / 2.0;
        float drawStartPointY = self.bounds.size.height - kPadding - idx * self.yAxisSpacing - informationSize.height * 0.5;
        CGPoint drawStartPoint = CGPointMake(drawStartPointX, drawStartPointY);
        // 绘制文字信息
        [obj drawAtPoint:drawStartPoint withAttributes:attributes];
        // 横向标线
        CGContextSetRGBStrokeColor(context, 231 / 255.0, 231 / 255.0, 231 / 255.0, 1.0);
        CGContextSetLineWidth(context, kCoordinateLineWith);
        CGContextMoveToPoint(context, kPadding, self.bounds.size.height - kPadding - idx * self.yAxisSpacing);
        CGContextAddLineToPoint(context, self.bounds.size.width, self.bounds.size.height - kPadding - idx * self.yAxisSpacing);
        CGContextStrokePath(context);
    }];
}
    • 效果如图

  • 渐变背景视图
    • 在分类中添加与背景视图相关的常量

      /** 渐变背景视图 */
@property (nonatomic, strong) UIView *gradientBackgroundView;
/** 渐变图层 */
@property (nonatomic, strong) CAGradientLayer *gradientLayer;
/** 颜色数组 */
@property (nonatomic, strong) NSMutableArray *gradientLayerColors;
    • 在初始化方法中添加调用设置背景视图方法的代码 
      [self drawGradientBackgroundView];
    • 设置渐变视图方法的具体实现 
      - (void)drawGradientBackgroundView {
    // 渐变背景视图（不包含坐标轴）
    self.gradientBackgroundView = [[UIView alloc] initWithFrame:CGRectMake(kPadding, 0, self.bounds.size.width - kPadding, self.bounds.size.height - kPadding)];
    [self addSubview:self.gradientBackgroundView];
    /** 创建并设置渐变背景图层 */
    //初始化CAGradientlayer对象，使它的大小为渐变背景视图的大小
    self.gradientLayer = [CAGradientLayer layer];
    self.gradientLayer.frame = self.gradientBackgroundView.bounds;
    //设置渐变区域的起始和终止位置（范围为0-1），即渐变路径
    self.gradientLayer.startPoint = CGPointMake(0, 0.0);
    self.gradientLayer.endPoint = CGPointMake(1.0, 0.0);
    //设置颜色的渐变过程
    self.gradientLayerColors = [NSMutableArray arrayWithArray:@[(__bridge id)[UIColor colorWithRed:253 / 255.0 green:164 / 255.0 blue:8 / 255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:251 / 255.0 green:37 / 255.0 blue:45 / 255.0 alpha:1.0].CGColor]];
    self.gradientLayer.colors = self.gradientLayerColors;
    //将CAGradientlayer对象添加在我们要设置背景色的视图的layer层
    [self.gradientBackgroundView.layer addSublayer:self.gradientLayer];
}
    • 效果如图

  • 折线
    • 在分类中添加与折线绘制相关的成员变量

      /** 折线图层 */
@property (nonatomic, strong) CAShapeLayer *lineChartLayer;
/** 折线图终点处的标签 */
@property (nonatomic, strong) UIButton *tapButton;
    • 在初始化方法中添加调用设置折线图层方法的代码 
      [self setupLineChartLayerAppearance];
    • 设置折线图层方法的具体实现 
      - (void)setupLineChartLayerAppearance {
    /** 折线路径 */
    UIBezierPath *path = [UIBezierPath bezierPath];
    [self.pointArray enumerateObjectsUsingBlock:^(IDLineChartPoint * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        // 折线
        if (idx == 0) {
            [path moveToPoint:CGPointMake(self.xAxisSpacing * 0.5 + (obj.x - 1) * self.xAxisSpacing, self.bounds.size.height - kPadding - obj.y * self.yAxisSpacing)];
        } else {
            [path addLineToPoint:CGPointMake(self.xAxisSpacing * 0.5 + (obj.x - 1) * self.xAxisSpacing, self.bounds.size.height - kPadding - obj.y * self.yAxisSpacing)];
        }
        // 折线起点和终点位置的圆点
        if (idx == 0 || idx == self.pointArray.count - 1) {
            [path addArcWithCenter:CGPointMake(self.xAxisSpacing * 0.5 + (obj.x - 1) * self.xAxisSpacing, self.bounds.size.height - kPadding - obj.y * self.yAxisSpacing) radius:2.0 startAngle:0 endAngle:2 * M_PI clockwise:YES];
        }
    }];
    /** 将折线添加到折线图层上，并设置相关的属性 */
    self.lineChartLayer = [CAShapeLayer layer];
    self.lineChartLayer.path = path.CGPath;
    self.lineChartLayer.strokeColor = [UIColor whiteColor].CGColor;
    self.lineChartLayer.fillColor = [[UIColor clearColor] CGColor];
    // 默认设置路径宽度为0，使其在起始状态下不显示
    self.lineChartLayer.lineWidth = 0;
    self.lineChartLayer.lineCap = kCALineCapRound;
    self.lineChartLayer.lineJoin = kCALineJoinRound;
    // 设置折线图层为渐变图层的mask
    self.gradientBackgroundView.layer.mask = self.lineChartLayer;
}
    • 效果如图（初始状态不显示折线）

  • 动画的开始与结束
    • 动画开始

      /** 动画开始，绘制折线图 */
- (void)startDrawlineChart {
    // 设置路径宽度为4，使其能够显示出来
    self.lineChartLayer.lineWidth = 4;
    // 移除标签，
    if ([self.subviews containsObject:self.tapButton]) {
        [self.tapButton removeFromSuperview];
    }
    // 设置动画的相关属性
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 2.5;
    pathAnimation.repeatCount = 1;
    pathAnimation.removedOnCompletion = NO;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    // 设置动画代理，动画结束时添加一个标签，显示折线终点的信息
    pathAnimation.delegate = self;
    [self.lineChartLayer addAnimation:pathAnimation forKey:@"strokeEnd"];
}
    • 动画结束，添加标签 
      /** 动画结束时，添加一个标签 */
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    if (self.tapButton == nil) { // 首次添加标签（避免多次创建和计算）
        CGRect tapButtonFrame = CGRectMake(self.xAxisSpacing * 0.5 + ([self.pointArray[self.pointArray.count - 1] x] - 1) * self.xAxisSpacing + 8, self.bounds.size.height - kPadding - [self.pointArray[self.pointArray.count - 1] y] * self.yAxisSpacing - 34, 30, 30);

        self.tapButton = [[UIButton alloc] initWithFrame:tapButtonFrame];
        self.tapButton.enabled = NO;
        [self.tapButton setBackgroundImage:[UIImage imageNamed:@"bubble"] forState:UIControlStateDisabled];
        [self.tapButton.titleLabel setFont:[UIFont systemFontOfSize:10]];
        [self.tapButton setTitle:@"20" forState:UIControlStateDisabled];
    }
    [self addSubview:self.tapButton];
}
  • 集成折线图视图
    • 创建折线图视图

      • 添加成员变量

        /** 折线图 */
@property (nonatomic, strong) IDLineChartView *lineCharView;
      • 在viewDidLoad方法中创建折线图并添加到控制器的view上 
        self.lineCharView = [[IDLineChartView alloc] initWithFrame:CGRectMake(35, 164, 340, 170)];
[self.view addSubview:self.lineCharView];
    • 添加开始绘制折线图视图的按钮
      • 添加成员变量

        /** 开始绘制折线图按钮 */
@property (nonatomic, strong) UIButton *drawLineChartButton;
      • 在viewDidLoad方法中创建开始按钮并添加到控制器的view上 
        self.drawLineChartButton = [UIButton buttonWithType:UIButtonTypeSystem];
self.drawLineChartButton.frame = CGRectMake(180, 375, 50, 44);
[self.drawLineChartButton setTitle:@"开始" forState:UIControlStateNormal];
[self.drawLineChartButton addTarget:self action:@selector(drawLineChart) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:self.drawLineChartButton];
      • 开始按钮的点击事件 
        // 开始绘制折线图
- (void)drawLineChart {
    [self.lineCharView startDrawlineChart];
}
    • 效果如图

时间： 2024-10-21 07:10:08

iOS 动画绘制线条颜色渐变的折线图的相关文章

一张图绘制多组散点图和折线图

问题:如何在一张图上面绘制多组散点图和折线图?例如在下面的评分数据中,每轮数据绘制散点图,平均值绘制折线图. 数据(excel):营业厅评分数据 做法:R语言ggplot函数 1 library(readxl) 2 library(ggplot2) 3 data<-read_excel("C:\\...\\数据.xlsx",sheet = 2,col_names=T) 4 names(data)<-c("x","y1","y

如何绘制双轴柱状图和折线图？

如何绘制双轴柱状图和折线图? 答:第1步,先将数据作成如下表格. ××市2010--2014年农业灌溉用水有效利用系数 年份 灌溉亩数(万亩) 毛灌溉用水总量(万米3) 净灌溉用水总量(万米3) 灌溉水有效利用系数 考核标准 2010年 1.57 1440 691 0.48 0.55 2011年 1.57 1142 628 0.55 0.55 2012年 1.57 966 628 0.65 0.55 2013年 1.57 966 628 0.65 0.55 2014年 1.57 966 628

我的IOS库－任意颜色渐变的圆环

原创Blog,转载请注明出处 blog.csdn.net/hello_hwc 前言:想要丰富之前写的一个库,用到了颜色渐变,于是就写了这个简单的库. 效果 Github地址 https://github.com/wenchenhuang/WCGradientCircleLayer 于是,基于这个新写的库,对之前写的下拉刷新库进行了更新 支持了view载入自动刷新,和渐变Item Github地址 https://github.com/wenchenhuang/WCPullRefreshContr

Android自定义view之绘制实用型的柱形图和折线图

概述: 前几天突然需要做两种图表--柱形图.折线图,于是第一反应是先看看网上有没有现成的,结果有是有,但都不是我想要的,而且大多数不是用纯android代码完成,HTML5似乎完成这类工作要容易得多,但是我本人并不会HTML5,只能黯然神伤,掩面流泪,最终只能自己敲代码了. **知识点:**android自定义view.图形图像.Fragment.MVC模式. Demo 界面是模仿红圈营销搭建的 折线图: 代码,注释很详细,直接看代码就行了: public class LineChartView

Android自定义控件系列四：绘制实用型的柱形图和折线图

概述: 前几天突然需要做两种图表--柱形图.折线图,于是第一反应是先看看网上有没有现成的,结果有是有,但都不是想要的,而且大多数不是用纯android代码完成,不过HTML5似乎完成这类工作要容易得多,单是非我们所擅长. **知识点:**android自定义view.图形图像.Fragment.MVC模式. Demo 界面是模仿红圈营销搭建的 折线图:  代码,注释很详细,直接看代码就行了: 001.public class LineChartView extends View { 002. 0

ios显示艺术字字体颜色渐变

UIColor * myColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"123.jpg"]]; self.titleLab.textColor = myColor;//(XXXX.textColor = myColor) 只用这两句话,就可以将文字的颜色设置为图片的色彩了,图片可以选择渐变颜色的图片 ,就可以实现艺术字的效果了!

echart 折线图、柱状图、饼图、环形图颜色修改

之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain copy xAxis: { type: 'category', boundaryGap: false, data: ['年龄','20岁以下','30岁','40岁','50岁','60岁','60岁以上'] }, yAxis: { type: 'value' }, series: [ { name:'员工

第四篇：R语言数据可视化之折线图、堆积图、堆积面积图

前言 折线图通常用来对两个连续变量的依存关系进行可视化,其中横轴很多时候是时间轴. 但横轴也不一定是连续型变量,可以是有序的离散型变量. 绘制基本折线图 本例选用如下测试数据集: 绘制方法是首先调用ggplot函数选定数据集,并在aes参数中指明横轴纵轴.然后调用条形图函数geom_line()便可绘制出基本折线图.R语言示例代码如下: # 基函数 ggplot(BOD, aes(x = Time, y = demand)) + # 折线图函数 geom_line()     运行结果: 向折线

matplotlib学习---折线图（plot）

一: 什么是matplotlib? matplotlib:最流行的Python底层绘图库,主要做数据可视化图标,名字取材于MATLAB,模仿MATLAB构建. 二:matplotlib基本要点: 每个红色的点是坐标,把5个点的坐标连接成一条线,就组成了折线图 通过下面的小例子来看一下matplotlib该如何简单使用 假设一天中每隔两个小时(range(2,26,2))的气温(℃)分别是[15,13,14.5,17,20,25,26,26,27,22,18,15] from matplotlib