iOS开发--简单折线图

作为一个iOS程序媛,还真是没有发文章的习惯,但是据说如果能够长期整理自己代码的心得,写成文章,那是可以证明实力的(额,算了吧,不写还没人知道很菜。。。)。

总结一下自己写过的代码小片段。

实现功能:在一个固定区域内,根据返回的几个数据做一个不带坐标的折线图,有拐点,有数据显示。

代码分两个地方写:1、自定义UIView类   2、需要显示折线图的控制器页面。

1、自定义UIView类

.h文件 其中beginX,beginY表示直线的起点,endX,endY表示直线的终点

#import

@interfaceLineRectView :UIView

@property(nonatomic,assign) int beginX;

@property(nonatomic,assign) int beginY;

@property(nonatomic,assign) int endX;

@property(nonatomic,assign) int endY;

@end

.m文件 在.m文件中需要重写drawRectangle方法

-(void)drawRect:(CGRect)rect{

//获取上下文

CGContextRefcontext =UIGraphicsGetCurrentContext();

//设置起点

CGContextMoveToPoint(context,_beginX,_beginY);

//画曲线

//第一个参数是上下文,直接穿上面获取到的。

//接下来两个参数cpx,cpy这两个是控制在哪一个点产生弧度(如果按下面那样写就没有弧度)

//最后两个参数x,y是终点的位置

CGContextAddQuadCurveToPoint(context, (_endX-_beginX)/2+_beginX, (_endY-_beginY)/2+_beginY,_endX,_endY);

//设置直线的颜色  要在获取上下文之后,否则没有效果

UIColor*color = [UIColorwhiteColor];

[colorset];

//渲染

CGContextStrokePath(context);

}

根据传入的参数,已经可以得到直线了,起点和终点坐标的参考系都是UIVIew本身。

2、显示这个折线图的页面代码

假设给出的坐标最大值为maxY,最小值为minY,因为横坐标固定大小所以不需要考虑.假设给定的高度和宽度是24 和 屛宽,给定的数据是6个

-(void)makeTheView{

int maxY =686;

int minY =600;

CGFloat unitY = (CGFloat)24/(maxY-minY);//单位高度

CGFloat unitX = (CGFloat)(kScreenWidth)/5;//单位宽度

NSArray*arr =@[@600,@600,@640,@650,@686,@665];//假设这是给出的值

for(int i =0; i<arr.count-1;i++){

LineRectView*lineV1 = [[LineRectView alloc] initWithFrame:CGRectMake(unitX*i,86, unitX,24)];

lineV1.beginX=0;

float a = [arr[i] floatValue];

lineV1.beginY=24-(a-minY)*unitY;

lineV1.endX= unitX;

float b = [arr[i+1] floatValue];

lineV1.endY=24-(b-minY)*unitY;

lineV1.backgroundColor= [UIColor clearColor];

[self.view addSubview:lineV1];

}

for(inti =1; i<arr.count-1;i++){

float a = [arr[i] floatValue];

//拐点

UIImageView*pointImgView = [[UIImageView alloc]initWithFrame:CGRectMake(unitX*i-2,24-(a-minY)*unitY+86-2,4,4)];

pointImgView.backgroundColor= [UIColor whiteColor];

pointImgView.layer.cornerRadius=2;

[pointImgView.layer masksToBounds];

[self.view addSubview:pointImgView];

//显示数据的lable

UILabel*pointLab = [[UILabel alloc]initWithFrame:CGRectMake(unitX*i-10,24-(a-minY)*unitY+86+2,20,12)];

pointLab.font= [UIFontsystem FontOfSize:10];

pointLab.backgroundColor= [UIColorclearColor];

pointLab.textColor=[UIColor blackColor];

pointLab.text= [NSString stringWithFormat:@"%@",arr[i]];

[self.view addSubview:pointLab];

}

}

效果如下图


适当修改坐标后可以是这样


嗯,就是这样啦~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.NSTimer //暂停if ([timer isValid]) {[timer setFireDate:[N...
    俊月阅读 1,363评论 0 0
  • 1.badgeVaule气泡提示 2.git终端命令方法> pwd查看全部 >cd>ls >之后桌面找到文件夹内容...
    i得深刻方得S阅读 4,721评论 1 9
  • 初秋至黄鹤楼,已有泠泠之感,古木仙藤却愈冷愈苍翠。迤逦前行,翘角翼舒凌空,烟雾袅袅,宛若仙境。极目楚天舒的辽阔、盈...
    菡萏Sweety阅读 355评论 2 1
  • 大家好,我校初中招生报名工作,明天(6月23号)上午8点开始,采用网上报名方式,请大家关注稼轩学校网站!
    稼轩李德智阅读 2,651评论 0 0
  • 想念,从来都是一个人的事情。 如果刚好她也在想着你,那就是两个人的事情。这是奇妙的状态,如六月的木槿花。安静而激烈...
    麦小田阅读 142评论 0 0