iOS 实现折线图(二)

上次写的直线图 写了一部分 今天补充一下子
iOS 折线图(一) :http://www.jianshu.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);