iOS 折线图（2）

上班时间没事做也是尴尬

修改了下上次XY轴及虚线，添加了箭头，成网格状

- (void)drawRect:(CGRect)rect {
    // Drawing code
//画XY轴
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 1.0);
    CGContextSetStrokeColorWithColor(context,[UIColor redColor].CGColor);
    CGContextMoveToPoint(context, defaultX, defalutY);
    CGContextAddLineToPoint(context, defaultX, rect.size.height - defalutY);
    CGContextAddLineToPoint(context,rect.size.width - defaultX, rect.size.height - defalutY);
    
    //X轴箭头
    CGContextMoveToPoint(context, rect.size.width - defaultX - defaulArrowW, rect.size.height - defalutY - defaulArrowW);
    CGContextAddLineToPoint(context,rect.size.width - defaultX, rect.size.height - defalutY);
    CGContextAddLineToPoint(context,rect.size.width - defaultX - defaulArrowW, rect.size.height - defalutY + defaulArrowW);
    
    //Y轴箭头
    CGContextMoveToPoint(context, defaultX - defaulArrowW, defalutY + defaulArrowW);
    CGContextAddLineToPoint(context,defaultX, defalutY);
    CGContextAddLineToPoint(context,defaultX + defaulArrowW, defalutY + defaulArrowW);
    CGContextStrokePath(context);
}

XY轴的单位及虚线根据传入数据来进行绘制

-(void)drawXYAndVirtualLine
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    for (int i = 0; i<self.XArray.count; i++) {
        CGFloat width = (self.frame.size.width - defaultX*2)/self.XArray.count;
        CGFloat Xnum = [self.XArray[i] floatValue];
        UILabel * xLab = [[UILabel alloc]initWithFrame:CGRectMake(width*i+defaultX,self.frame.size.height-defalutY,width,defalutY)];
        xLab.center = CGPointMake((Xnum/_MaxX)*(self.frame.size.width-2*defaultX), xLab.center.y);
        
        if (i != 0) {
            xLab.text = self.XArray[i];
        }
        xLab.textAlignment = NSTextAlignmentCenter;
        xLab.textColor = [UIColor blackColor];
        xLab.font = [UIFont systemFontOfSize:10];
        [self addSubview:xLab];
        
        NSLog(@"%lf",xLab.center.x);
        [self drawVirtualLine:xLab andStartPt:CGPointMake(xLab.center.x, self.frame.size.height-defalutY) andEndPt:CGPointMake(xLab.center.x,defalutY)];
    }
    
    //绘制Y轴
    for (int i = 0; i<self.YArray.count; i++) {
        CGFloat width = (self.frame.size.height - defalutY*2)/self.XArray.count;
         CGFloat Ynum = [self.YArray[i] floatValue];
        UILabel * xLab = [[UILabel alloc]initWithFrame:CGRectMake(0,(Ynum/_MaxY)*(self.frame.size.height-2*defalutY),width,defalutY)];
        
        if (i != 0) {
            xLab.text = self.YArray[i];
        }
        xLab.textAlignment = NSTextAlignmentCenter;
        xLab.textColor = [UIColor blackColor];
        xLab.font = [UIFont systemFontOfSize:10];
        xLab.center = CGPointMake(xLab.frame.origin.x, self.frame.size.height-defalutY-width*i);
        [self addSubview:xLab];
        [self drawVirtualLine:xLab andStartPt:CGPointMake(defaultX, xLab.center.y) andEndPt:CGPointMake(self.frame.size.width-defaultX,xLab.center.y)];
    }
}

-(void)drawVirtualLine:(UILabel*)lab andStartPt:(CGPoint)pStart andEndPt:(CGPoint)pEnd
{
     CGContextRef context = UIGraphicsGetCurrentContext();
    // 设置线条的样式
    CGContextSetLineCap(context, kCGLineCapRound);
    // 绘制线的宽度
    CGContextSetLineWidth(context, 0.2f);
    // 线的颜色
    CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor);
    // 开始绘制
    CGContextBeginPath(context);
    // 设置虚线绘制起点
    CGContextMoveToPoint(context, pStart.x, pStart.y);
    // lengths的值｛10,10｝表示先绘制10个点，再跳过10个点，如此反复
    CGFloat lengths[] = {5,5};
    // 虚线的起始点
    CGContextSetLineDash(context, 0, lengths,2);
    // 绘制虚线的终点
    NSLog(@"%lf",self.frame.size.height);
    CGContextAddLineToPoint(context, pEnd.x,pEnd.y);
    // 绘制
    CGContextStrokePath(context);
}

箭头虚线搞定，接下来，根据传入的MaxX，MaxY与XY轴的长度来做比例尺可以知道坐标系与数据的比例，也就是可以定下每个点的位置。获取点数据并连线可以画出折线图

-(void)drawLineAndPointToGraph
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    //创建贝塞尔曲线对象
    UIBezierPath *currenPath = [UIBezierPath bezierPath];
    currenPath.lineCapStyle = kCGLineCapRound;//拐弯处为弧线
    currenPath.lineJoinStyle = kCGLineCapRound;
    currenPath.lineWidth = 0.5f;
    UIColor *color = [UIColor blueColor];
    [color set];
    CGFloat lengths[] = {10,0};
    CGContextSetLineDash(context, 0, lengths,2);
    
    for (int i = 0; i<self.pointArray.count; i++) {
        NSValue* valueStart = self.pointArray[i];
        CGPoint pointStart = [valueStart CGPointValue];
        CGPoint p = CGPointMake((pointStart.x/_MaxX)*(self.frame.size.width-2*defaultX), (pointStart.y/_MaxY)*(self.frame.size.height-2*defalutY));
        if (i == 0) {
            [currenPath moveToPoint:CGPointMake(p.x+defaultX,self.frame.size.height-p.y-defalutY)];
        }
        else
        {
            //把点加入到路径里面
            [currenPath addLineToPoint:CGPointMake(p.x,self.frame.size.height-p.y-defalutY)];
        }
    }
    //画线
    [currenPath stroke];
}

在ViewContrller中传入数据

- (void)viewDidLoad {
    [super viewDidLoad];
    LineGraph* lineGraphView = [[LineGraph alloc]initWithFrame:CGRectMake(20, 100, 300, 200)];
    lineGraphView.XArray = @[@"0",@"1",@"2",@"3",@"4"];
    lineGraphView.YArray = @[@"0",@"0.2",@"0.4",@"0.6",@"0.8",@"1.0"];
    lineGraphView.MaxX = 4.0f;
    lineGraphView.MaxY = 1.0f;
    lineGraphView.lineColor = [UIColor redColor];
    lineGraphView.pointArray = @[[NSValue valueWithCGPoint:CGPointMake(0, 0.7)],[NSValue valueWithCGPoint:CGPointMake(1.3, 0.3)],[NSValue valueWithCGPoint:CGPointMake(1.7, 0.5)],[NSValue valueWithCGPoint:CGPointMake(1.9, 0.8)],[NSValue valueWithCGPoint:CGPointMake(2.4, 0.3)],[NSValue valueWithCGPoint:CGPointMake(3.3, 0.44)],[NSValue valueWithCGPoint:CGPointMake(3.9, 0.3)]];
    [self.view addSubview:lineGraphView];
    // Do any additional setup after loading the view, typically from a nib.
}

屏幕快照 2017-03-29 16.38.46.png

接下来提高下代码可读性与封装

To be continue