自己画的折线图（可伸展）

最新推荐文章于 2017-03-09 10:38:48 发布
最新推荐文章于 2017-03-09 10:38:48 发布
阅读量235 收藏
点赞数 1
分类专栏： iOS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35996263/article/details/53638789
版权

封装的部分


#import <UIKit/UIKit.h>


@interface CharLineView : UIView

//y坐标轴数组

@property (nonatomic,strong)NSArray *arrY;

//x坐标轴数组

@property (nonatomic,strong)NSArray *arrX;

//折线点数组

@property (nonatomic,strong)NSArray *pointY;

//折线的颜色

@property (nonatomic,strong)UIColor *color;

@end

#import "CharLineView.h"

#define LineWidth 20

#define startWidth 40

#define startHeight 270

#define EndY 60

#define magin 10

#define StartPoint CGPointMake(startWidth, startHeight)

#define WZPBgColor(r,g,b) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:1.00]

#define COLOR_BACK_3 WZPBgColor(236,240,243)

#define COLOR_BACK_4 WZPBgColor(204,222,251)

@interface CharLineView ()

@property (nonatomic,assign)CGPoint start;


@property (nonatomic,strong)NSMutableArray *pointArray;

@end

@implementation CharLineView


- (instancetype)initWithFrame:(CGRect)frame{

    if (self = [super initWithFrame:frame]) {

        //   self.my

        

        self.backgroundColor=[UIColor whiteColor];

//

      

//        [self createLabelY];

//        [self drawGradientBackgroundView];

//         [self setLineDash];

    }

    return self;

}


- (void)drawRect:(CGRect)rect {

    

    UIColor *color = COLOR_BACK_3;

    [color set];  //设置线条颜色

    UIBezierPath* aPath = [UIBezierPath bezierPath];

    aPath.lineWidth = 2.0;

    

    aPath.lineCapStyle = kCGLineCapRound;  //线条拐角

    aPath.lineJoinStyle = kCGLineCapRound;  //终点处理


    [aPath moveToPoint:StartPoint];

    [aPath addLineToPoint:CGPointMake(StartPoint.x, EndY)];

    [aPath moveToPoint:StartPoint];

    [aPath addLineToPoint:CGPointMake(StartPoint.x+self.arrX.count*LineWidth+LineWidth, StartPoint.y)];

//    [aPath closePath]; //第五条线通过调用closePath方法得到的

    [aPath stroke]; //Draws line 根据坐标点连线

   

  [self createLabelX];

  [self createLabelY];

  [self setLineDash];

//    aPath=[UIBezierPath bezierPathWithArcCenter:CGPointMake(20, 20) radius:5 startAngle:0 endAngle:M_PI*2 clockwise:NO];

//    [[UIColor redColor]setFill];

//    [aPath fill];

//    [aPath stroke];

}

-(void)createLabelY{

    for (int i=0; i<self.arrY.count; i++) {

        UILabel *label=[[UILabel alloc]init];

        label.frame=CGRectMake(StartPoint.x, StartPoint.y-LineWidth*i, StartPoint.x, LineWidth);

        label.center=CGPointMake(StartPoint.x-magin, StartPoint.y-LineWidth*i);

        label.font=[UIFont systemFontOfSize:12];

        label.text=self.arrY[i];

        label.textColor=[UIColor grayColor];

        [self addSubview:label];

    }

}

-(void)createLabelX{

  

    for (int i = 0; i < self.arrX.count; i++) {

        UILabel *label=[[UILabel alloc]init];

        label.frame=CGRectMake(StartPoint.x+LineWidth*(i+1), StartPoint.y+LineWidth+magin, EndY, LineWidth);

        label.center=CGPointMake(StartPoint.x+LineWidth*(i+1), StartPoint.y+LineWidth+magin);

        label.font = [UIFont systemFontOfSize:12];

        label.text=self.arrX[i];

        label.textColor=[UIColor grayColor];

        label.transform = CGAffineTransformMakeRotation(M_PI * 0.5);

        [self addSubview:label];

    }

   

}

-(void)setLineDash{

    for (int i=1; i<self.arrY.count; i++) {

        CAShapeLayer * dashLayer = [CAShapeLayer layer];

        dashLayer.strokeColor =COLOR_BACK_3.CGColor;

        dashLayer.fillColor = [[UIColor clearColor] CGColor];

        // 默认设置路径宽度为0，使其在起始状态下不显示

        dashLayer.lineWidth = 2.0;

        

        int y=StartPoint.y-LineWidth*i;

        UIBezierPath* aPath = [[UIBezierPath alloc]init];

//        aPath.lineWidth = 2.0;

        [aPath moveToPoint:CGPointMake(StartPoint.x, y)];

        [aPath addLineToPoint:CGPointMake(self.arrX.count*LineWidth+StartPoint.x, y)];

//        [aPath stroke];

        dashLayer.path = aPath.CGPath;

        [self.layer insertSublayer:dashLayer atIndex:1];

    }

    for (int i=0; i<self.arrX.count; i++) {

        CAShapeLayer * dashLayer = [CAShapeLayer layer];

        dashLayer.strokeColor =COLOR_BACK_3.CGColor;

        dashLayer.fillColor = [[UIColor clearColor] CGColor];

        // 默认设置路径宽度为0，使其在起始状态下不显示

        dashLayer.lineWidth = 1.0;

        

        int x=StartPoint.x+LineWidth*(i+1);

        UIBezierPath* aPath = [[UIBezierPath alloc]init];

//        aPath.lineWidth = 2.0;

        [aPath moveToPoint:CGPointMake(x, StartPoint.y)];

        [aPath addLineToPoint:CGPointMake(x, EndY)];

//        [aPath stroke];

        dashLayer.path = aPath.CGPath;

        [self.layer insertSublayer:dashLayer atIndex:1];

    }

}

//先描点

-(void)setPointY:(NSArray *)pointY{

    _pointY=pointY;

    [self dashLayerView];

}

-(void)dashLayerView{

    self.pointArray=[NSMutableArray array];

    for (int i=0; i<self.pointY.count; i++) {

        NSString *str=self.pointY[i];

        CGFloat x=StartPoint.x+LineWidth*(i+1);

        CGFloat y=[str floatValue];

        CGFloat oy=StartPoint.y-(y-[self.arrY[0] floatValue])*StartPoint.x;

        CAShapeLayer * dashLayer = [CAShapeLayer layer];

        dashLayer.fillColor = self.color.CGColor;

        dashLayer.strokeColor =[[UIColor clearColor] CGColor];

        // 默认设置路径宽度为0，使其在起始状态下不显示

        dashLayer.lineWidth = 2.0;

        UIBezierPath* aPath=[UIBezierPath bezierPathWithArcCenter:CGPointMake(x, oy) radius:4 startAngle:0 endAngle:M_PI*2 clockwise:NO];

        dashLayer.path = aPath.CGPath;

         [self.layer insertSublayer:dashLayer atIndex:2];

        if (i==0) {

            self.start=CGPointMake(x, oy);

        }

    }

    

    CAShapeLayer * dashLayer = [CAShapeLayer layer];

    dashLayer.strokeColor = self.color.CGColor;

    dashLayer.fillColor =[[UIColor clearColor] CGColor];

    UIBezierPath* aPath = [[UIBezierPath alloc]init];

    aPath.lineWidth = 2.0;

    [aPath moveToPoint:self.start];

    for (int i=1; i<self.pointY.count; i++) {

        NSString *str=self.pointY[i];

        CGFloat x=StartPoint.x+LineWidth*(i+1);

        CGFloat y=[str floatValue];

        NSString *str0=self.arrY[0];

        CGFloat oy=StartPoint.y-(y-[str0 floatValue])*StartPoint.x;

        [aPath addLineToPoint:CGPointMake(x, oy)];

        dashLayer.path = aPath.CGPath;

      

        [self.layer insertSublayer:dashLayer atIndex:2];

    }

}
简单的使用方法

#import "ViewController.h"

#import "CharLineView.h"


#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width

@interface ViewController ()

{

     NSArray *arrY;

     NSArray *arrX;

     NSArray *pointY;

     NSArray *pointY0;

}


@end


@implementation ViewController


- (void)viewDidLoad {

    [super viewDidLoad];

    self.view.backgroundColor=[UIColor yellowColor];

    self.automaticallyAdjustsScrollViewInsets=NO;

    arrY=@[@"23.5",@"24",@"24.5",@"25",@"25.5",@"26",@"26.5",@"27",@"27.5",@"28"];

  arrX=@[@"00:05",@"00:10",@"00:15",@"00:20",@"00:25",@"00:30",@"00:35",@"00:40",@"00:45",@"00:50",@"00:55",@"01:00",@"01:05",@"01:10",@"01:15",@"01:20",@"01:25",@"02:30",@"00:50",@"00:55",@"01:00",@"01:05",@"01:10",@"01:15",@"01:20",@"00:25"];

  pointY=@[@"25.8",@"25",@"26.1",@"26.8",@"25.0",@"26.5",@"24.6",@"25.6",@"25",@"26",@"26.1",@"26.2",@"26.9",@"25",@"26",@"26",@"25.5",@"25.5",@"25.3",@"25",@"25.1",@"25.9",@"25",@"26",@"25",@"26.1"];

    

    pointY0=@[@"27",@"28",@"24.1",@"26.8",@"25",@"26.5",@"24.6",@"25.6",@"25",@"25",@"26.1",@"27.2",@"26.9",@"23.9",@"25",@"26",@"25.6",@"27.5",@"26.3",@"25",@"26.1",@"23.9",@"25",@"25.5",@"23.9",@"26.1"];

    UIScrollView *SCrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 100, SCREEN_WIDTH, 320)];

    CGFloat width;

    if (arrX.count*20+40>SCREEN_WIDTH) {

        width=arrX.count*20+40*2;

    }else{

        width=SCREEN_WIDTH;


    }

    SCrollView.contentSize=CGSizeMake(width, 0);

    CharLineView *view=[[CharLineView alloc]initWithFrame:CGRectMake(0, 0, width, 320)];

    view.arrX=arrX;

    view.arrY=arrY;

    view.color=[UIColor redColor];

    view.pointY=pointY;

    

    view.color=[UIColor blueColor];

    view.pointY=pointY0;

    [SCrollView addSubview:view];

    [self.view addSubview:SCrollView];  

}



qq_35996263
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jfreechart画折线图的方法
08-27
jfreechart画折线图的方法 jfreechart是一款开放源代码的Java项目，提供了多种类型的图表，包括饼图、柱状图、线图、区域图、分布图、混合图、甘特图等等。应用jfreechart来画图需要两个jar包：jfreechart.jar和...
＜微信小程序＞调用echarts库，接口拿取数据库数据，实现折线图，横坐标可拉伸
qq_42853710的博客
03-05 2525
首先下载echarts官方库 [https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts] 其中有详细讲解如何导入，个人简单总结一下 1、ec-canvas文件夹复制粘贴在自己项目文件中。 2、在页面中调用 import * as echarts from '../../ec-canvas/ech
可缩放、滑动显示的折线图
jie863230900的专栏
06-17 6341
最近，遇到这样一个问题，将一组日期和数字为数据源的数据画成折线图。 折线图可以左右滑动，可以缩放，同时点击视图的时候可以定位到最近的一个数据点 具体结果如图 代码demo 处理这个我觉得有如下三个难点 一、数据源数据不连续，需要自己计算生成连续数据源 二、如何实现可缩放的折线图 三、如
折线图(六)绘制真正可用的折线图
YoYo_Newbie的专栏
11-26 1858
之前那几遍都是为了展示实现思路的，并不是真正的图实现。看过的人大致都知道接下来怎么做了，只不过是测量下折线图然后设置合理的大小。 这个下面本人实现的折线图是测试数据的图，随机点测试 package sam.android.utils.widget; import java.util.List; /** * 折线信息 */ public class LineCha
echart.js绘制可缩放折线图
Jinx
03-09 4868
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echart.js绘制可缩放折线图</title> <script src="../js/esl.js"></script> <script> var json = [["2000-06-05", 116], ["
JFreeChart动态画折线图的方法
08-27
JFreeChart动态画折线图的方法 JFreeChart是Java语言中一个流行的图表组件库，能够生成各种类型的图表，如折线图、柱状图、饼图等。在实际项目中，我们经常需要使用JFreeChart来生成动态的图表，以便更好地展示数据...
利用python画出折线图
09-20
主要为大家详细介绍了利用python画出折线图的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Winform画折线图.rar
05-04
在这个"Winform画折线图.rar"压缩包中，包含了一个使用C#语言和Visual Studio 2008编写的示例代码，该代码展示了如何在Winform应用中绘制折线图。这个实例对于那些想要在自己的应用程序中添加数据可视化功能的开发者...
折线图_折线图_
10-01
在数据分析和可视化领域，折线图是一种非常常见且强大的工具，尤其在展示数据随时间变化的趋势时尤为适用。本文将针对R语言的新手和小白，详细介绍如何使用R语言绘制出美观且具有信息量的折线图。 首先，我们需要...
vue实现折线图 可按时间查询
10-14
在本文中，我们将探讨如何使用Vue.js框架实现一个动态的、可以根据时间查询的折线图。这个功能对于数据分析和展示非常有用，特别是当需要展示随时间变化的趋势数据时。我们将从以下几个方面详细介绍实现过程： 1. *...
易语言画板画折线
07-17
在这个主题中，“易语言画板画折线”是指利用易语言进行图形绘制，特别是在画板上绘制折线图的技术。折线图是一种常见的数据可视化方式，用于显示随时间变化的数据趋势。 在易语言中，实现画板画折线可能涉及到以下...
画折线图软件
09-13
在IT领域，画折线图是一种常见的数据可视化方式，它能有效地展示数据的变化趋势和模式。VB.NET（Visual Basic .NET）是微软开发的一种面向对象的编程语言，它提供了丰富的库和工具，使得开发者能够方便地创建图形...
delphi 读取文本文件画折线图
02-21
在Delphi编程环境中，开发人员经常需要处理各种数据可视化任务，其中包括画折线图。本篇文章将详细讲解如何使用Delphi来读取文本文件中的数据，并利用这些数据绘制出折线图。 首先，我们需要理解Delphi中用于绘图的...
python画折线图的程序
09-20
主要为大家详细介绍了python画折线图的方法，一个画折线图的程序具有一定的参考价值，感兴趣的小伙伴们可以参考一下
可滑动折线图功能实现
u010067452的博客
12-30 3163
前段日子做一个医疗的项目，需要用到可滑动刷新监测点位置，折线图，柱状图功能看了下网上的demo也没有找到特别理想的demo，便自己写了下，下面趁着午休给大家分享下可滑动的折线图实现。 1，折线功能实现，利用贝塞尔曲线连接两点之间位置实现- (void)updatePathsArray:(NSArray *)array { if ([array count] >= 2) {
使用Canvas和Paint自己绘制一个折线图
zhaoyingkun的专栏
03-17 3025
使用Canvas和Paint自己绘制一个折线图
折线图的绘制
a865074284的博客
04-09 586
最近在做股票相关的项目，避免不了折线图，在这里温习一下写法，都是很简单的东西。 先看一下效果图 然后贴代码： package com.znz.goldfinger.views.stock; import android.content.Context; import android.graphics.Canvas; import android.graphics.P
qgraphicsscene画折线图
最新发布
01-16
QGraphicsScene是Qt框架中用于管理2D图形项的类，可以用来创建折线图。首先，我们需要创建一个QGraphicsView来显示QGraphicsScene中的图形项。然后，我们可以在QGraphicsScene中添加QGraphicsLineItem来绘制折线图的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值