编程

当前位置:澳门新莆京娱乐官网 > 编程 > 实现折线图

实现折线图

来源:http://www.drgigabytes.com 作者:澳门新莆京娱乐官网 时间:2020-04-15 13:47

图片 17月-01-2016 16-54-13.gif

一, 前几天重视是把上一遍的折线图完备了须臾间子.此中饱含:1. 足以并且画出多条折线2.改换背景颜色3.y轴数值能够有正数和负数4.直接能够调用(可是搞得比较倒霉劲 ,看看领悟一下幸亏,若是的确想要在温馨的类型里面用,提议和谐改过一下卡塔尔国.

再有正是 点击色块 曲线消失 其实激怒是掩盖

从效果与利益图能够观望,三条折线可以何况画出来,何况在折点出展现数值,当点击右下角的和折线相应颜色的星型时,相应的曲线和文字 就能够荡然无遗,再点击就能够现身.(这些效果首倘若为着方面在多条折线是比较和查阅任性曲线State of Qatar

 ZXView * zx = [[ZXView alloc]initWithFrame:CGRectMake(10, 100, [UIScreen mainScreen].bounds.size.width - 20, 250)];//创建折线图控件 //横纵坐标赋值 zx.horizontalDateArray = @[@"1H",@"2H",@"3H",@"4H",@"5H",@"6H",@"7H",@"8H",@"9H"];//给横坐标数据 zx.verticalDateArray = @[@"300",@"200",@"100",@"0",@"-100"];//纵坐标数据 //背景颜色 zx.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]];//这里是修改背景颜色(因为颜色可以支持渐变颜色,所以是个数组,格式呢就是这么输入)// zx.gradientLayerColors = [NSMutableArray arrayWithArray:@[(__bridge id)[UIColor blueColor].CGColor,(__bridge id)[UIColor whiteColor].CGColor]]; //设置折线颜色 zx.lineColorArray = @[ [UIColor greenColor],[UIColor blueColor],[UIColor purpleColor]];//同样应为是支持多条曲线 所以颜色也是数组 //设置折线的数据源 (二维数组 每一条这显得点是一个数组) zx.dataArray = @[@[@(arc4random,@(arc4random,@(arc4random,@(arc4random,@(arc4random,@(arc4random,@,@(arc4random], @[@,@(arc4random,@(arc4random,@(arc4random,@,@(arc4random,@(arc4random,@(arc4random,@(arc4random],@[@(arc4random,@(arc4random,@(arc4random,@,@(arc4random,@,@(arc4random,@(arc4random,@(arc4random]]; //设置line名称 zx.lineNameArray = @[@"第一",@"第二",@"第三"]; [self.view addSubview:zx];

二 ,接下去吗仍然先看功能

上次写的直线图 写了一有的 今天补充一下子iOS 折线图 :)

调换大约正是那些. git的代码是();

- setLineNameArray:(NSArray *)lineNameArray{ _lineNameArray = lineNameArray; for (NSInteger i = 0; i < lineNameArray.count; i++) { UIButton * btn = (UIButton*)[self viewWithTag:666 + i]; UILabel * nameLabel = [[UILabel alloc]initWithFrame:CGRectMake(CGRectGetMaxX(btn.frame)+2, self.frame.size.height - 15, 1.5*bounceX, 13)]; nameLabel.text = self.lineNameArray[i]; nameLabel.font = [UIFont systemFontOfSize:10.0]; [self addSubview:nameLabel]; }}- btnClict:(UIButton*)btn{ for (NSInteger lineNumber = 0; lineNumber< self.lineChartLayerArray.count; lineNumber++) { //self.lineChartLayerArray数组里面是相应的折现对象 for (NSInteger i = 0; i < self.horizontalDateArray.count; i++) { UILabel * label = [self viewWithTag:3000*(lineNumber + 1) + i]; if (lineNumber == btn.tag - 666) { label.hidden = !label.hidden; } } CAShapeLayer *lineChartLayer = self.lineChartLayerArray[lineNumber]; if (lineNumber == btn.tag - 666) { lineChartLayer.hidden = !lineChartLayer.hidden; } }}

三,用法这一次改进之后和上次的代码变化不是比非常的大,先看怎么用吧

#pragma mark 画折线图- dravLine{ CGFloat MaxY ; CGFloat firstdate = [[NSString stringWithFormat:@"%@",self.verticalDateArray[0]] floatValue] ; CGFloat lastdate = [[NSString stringWithFormat:@"%@",[self.verticalDateArray lastObject]] floatValue]; MaxY = firstdate - lastdate;//获取数值范围 for(NSInteger LineNumber = 0; LineNumber < 3; LineNumber++){ UILabel * label = [self viewWithTag:1000]; UIBezierPath * path = [[UIBezierPath alloc]init]; path.lineWidth = 1.0; UIColor * color = [UIColor greenColor]; [color set]; NSArray *array = self.dataArray[LineNumber]; CGFloat arc1 = [[NSString stringWithFormat:@"%@",array[0]] floatValue]; [path moveToPoint:CGPointMake( label.frame.origin.x - bounceX + 3, (MaxY -arc1 + lastdate) /MaxY * (self.frame.size.height - bounceY ) )]; //创建折现点标记 for (NSInteger i = 1; i< self.horizontalDateArray.count; i++) { UILabel * label1 = [self viewWithTag:1000 + i]; NSArray *array = self.dataArray[LineNumber]; CGFloat arc =[[NSString stringWithFormat:@"%@",array[i]] floatValue]; [path addLineToPoint:CGPointMake(label1.frame.origin.x - bounceX, (MaxY -arc + lastdate) /MaxY * (self.frame.size.height - bounceY ) )]; UILabel * falglabel = [[UILabel alloc]initWithFrame:CGRectMake(label1.frame.origin.x , (MaxY -arc +lastdate) /MaxY * (self.frame.size.height - bounceY ) , 30, 15)]; falglabel.tag = 3000 * (LineNumber + 1)+ i; falglabel.text = [NSString stringWithFormat:@"%.1f",arc]; falglabel.font = [UIFont systemFontOfSize:8.0]; falglabel.textColor = self.lineColorArray[LineNumber]; [self addSubview:falglabel]; } CAShapeLayer *lineChartLayer = [CAShapeLayer layer]; lineChartLayer.path = path.CGPath; UIColor * linecolors = self.lineColorArray[LineNumber]; lineChartLayer.strokeColor = linecolors.CGColor; lineChartLayer.fillColor = [[UIColor clearColor] CGColor]; // 默认设置路径宽度为0,使其在起始状态下不显示 lineChartLayer.lineWidth = 0; lineChartLayer.lineCap = kCALineCapRound; lineChartLayer.lineJoin = kCALineJoinRound; [self.lineChartLayerArray addObject:lineChartLayer]; [self.gradientBackgroundView.layer addSublayer:lineChartLayer];//直接添加导视图上 // self.gradientBackgroundView.layer.mask = self.lineChartLayer;//添加到渐变图层 } }

自此处看应该很简短的,那么具体的代码和上一遍都以哪了变化了呢首先增加了一层层的set方法 那样可以很好地传数据重要的改换还在画折线是 各种点的坐标 因为涉及到了负数

本文由澳门新莆京娱乐官网发布于编程,转载请注明出处:实现折线图

关键词:

上一篇:没有了

下一篇:没有了