上次寫的直線圖 寫了一部分 今天補充一下子
iOS 折線圖(一) :http://www.reibang.com/p/067825bb104f
這是上一次的git地址(https://git.oschina.net/GAOZEJIAN/zhexiantu_one.git)
一, 今天主要是把上一次的折線圖完善了一下子.其中包括:
1. 可以同時畫出多條折線
2.修改背景顏色
3.y軸數(shù)值可以 有正數(shù)和負數(shù)
4.直接可以調(diào)用(但是搞得比較差勁 ,看看了解一下還好,如果真的想要在自己的項目里面用,建議自己修改一下).
二 ,接下來呢還是先看效果
7月-01-2016 16-54-13.gif
從效果圖可以看到,三條折線可以同時畫出來,并且在折點出顯示數(shù)值,當點擊右下角的和折線相應顏色的正方形時,相應的曲線和文字 就會消失,再點擊就會出現(xiàn).(這個功能主要是為了方面在多條折線是比較和查看任意曲線)
三,用法
這次修改以后和上次的代碼變化不是很大,先看怎么用吧
ZXView * zx = [[ZXView alloc]initWithFrame:CGRectMake(10, 100, [UIScreen mainScreen].bounds.size.width - 20, 250)];//創(chuàng)建折線圖控件
//橫縱坐標賦值
zx.horizontalDateArray = @[@"1H",@"2H",@"3H",@"4H",@"5H",@"6H",@"7H",@"8H",@"9H"];//給橫坐標數(shù)據(jù)
zx.verticalDateArray = @[@"300",@"200",@"100",@"0",@"-100"];//縱坐標數(shù)據(jù)
//背景顏色
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]];//這里是修改背景顏色(因為顏色可以支持漸變顏色,所以是個數(shù)組,格式呢就是這么輸入)
// zx.gradientLayerColors = [NSMutableArray arrayWithArray:@[(__bridge id)[UIColor blueColor].CGColor,(__bridge id)[UIColor whiteColor].CGColor]];
//設置折線顏色
zx.lineColorArray = @[ [UIColor greenColor],[UIColor blueColor],[UIColor purpleColor]];//同樣應為是支持多條曲線 所以顏色也是數(shù)組
//設置折線的數(shù)據(jù)源 (二維數(shù)組 每一條這顯得點是一個數(shù)組)
zx.dataArray = @[@[@(arc4random()%300),@(arc4random()%300),@(arc4random()%300),@(arc4random()%300),@(arc4random()%300),@(arc4random()%300),@(-50),@(0),@(arc4random()%300)],
@[@(-36),@(arc4random()%300),@(arc4random()%300),@(arc4random()%300),@(-54),@(arc4random()%300),@(arc4random()%300),@(arc4random()%300),@(arc4random()%300)],@[@(arc4random()%300),@(arc4random()%300),@(arc4random()%300),@(-20),@(arc4random()%300),@(-79),@(arc4random()%300),@(arc4random()%300),@(arc4random()%300)]];
//設置line名稱
zx.lineNameArray = @[@"第一",@"第二",@"第三"];
[self.view addSubview:zx];
從這里看應該很簡單的,那么具體的代碼和上一次都是哪了變化了呢
首先添加了一系列的set方法 這樣可以很好地傳數(shù)據(jù)
主要的變化還在畫折線是 各個點的坐標 因為涉及到了負數(shù)
#pragma mark 畫折線圖
- (void)dravLine{
CGFloat MaxY ;
CGFloat firstdate = [[NSString stringWithFormat:@"%@",self.verticalDateArray[0]] floatValue] ;
CGFloat lastdate = [[NSString stringWithFormat:@"%@",[self.verticalDateArray lastObject]] floatValue];
MaxY = firstdate - lastdate;//獲取數(shù)值范圍
for(NSInteger LineNumber = 0; LineNumber < 3; LineNumber++){
UILabel * label = (UILabel*)[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 ) )];
//創(chuàng)建折現(xiàn)點標記
for (NSInteger i = 1; i< self.horizontalDateArray.count; i++) {
UILabel * label1 = (UILabel*)[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 = (UIColor*)self.lineColorArray[LineNumber];
lineChartLayer.strokeColor = linecolors.CGColor;
lineChartLayer.fillColor = [[UIColor clearColor] CGColor];
// 默認設置路徑寬度為0觉增，使其在起始狀態(tài)下不顯示
lineChartLayer.lineWidth = 0;
lineChartLayer.lineCap = kCALineCapRound;
lineChartLayer.lineJoin = kCALineJoinRound;
[self.lineChartLayerArray addObject:lineChartLayer];
[self.gradientBackgroundView.layer addSublayer:lineChartLayer];//直接添加導視圖上
// self.gradientBackgroundView.layer.mask = self.lineChartLayer;//添加到漸變圖層
}
}
還有就是 點擊色塊 曲線消失 其實激怒是隱藏
- (void)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];
}
}
- (void)btnClict:(UIButton*)btn{
for (NSInteger lineNumber = 0; lineNumber< self.lineChartLayerArray.count; lineNumber++) {
//self.lineChartLayerArray數(shù)組里面是相應的折現(xiàn)對象
for (NSInteger i = 0; i < self.horizontalDateArray.count; i++) {
UILabel * label = (UILabel*)[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;
}
}
}
變化大概就是這些. git的代碼是(https://git.oschina.net/GAOZEJIAN/zhexiantufengzhuang_two.git);
