上次寫的直線圖 寫了一部分 今天補充一下子
iOS 折線圖(一) :http://www.lxweimin.com/p/067825bb104f
這是上一次的git地址(https://git.oschina.net/GAOZEJIAN/zhexiantu_one.git)

一, 今天主要是把上一次的折線圖完善了一下子.其中包括:
1. 可以同時畫出多條折線
2.修改背景顏色
3.y軸數值可以 有正數和負數
4.直接可以調用(但是搞得比較差勁 ,看看了解一下還好,如果真的想要在自己的項目里面用,建議自己修改一下).

二 ,接下來呢還是先看效果

7月-01-2016 16-54-13.gif

從效果圖可以看到,三條折線可以同時畫出來,并且在折點出顯示數值,當點擊右下角的和折線相應顏色的正方形時,相應的曲線和文字 就會消失,再點擊就會出現.(這個功能主要是為了方面在多條折線是比較和查看任意曲線)

三,用法
這次修改以后和上次的代碼變化不是很大,先看怎么用吧

 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()%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方法 這樣可以很好地傳數據
主要的變化還在畫折線是 各個點的坐標 因為涉及到了負數

#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;//獲取數值范圍

       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 )  )];
        
        //創建折現點標記
        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，使其在起始狀態下不顯示
        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數組里面是相應的折現對象
                      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);