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

-(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

在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