大概需求：

兩條折線圖呈昔。
實線：數(shù)據(jù)是有值則畫線，值為0時則跳過友绝，直到下一個點有值堤尾；
虛線：間隔7天有值，值為0時則跳過迁客，直到下一個點有值郭宝。
日期：當(dāng)前日期居中，滑動折線圖時哲泊，日期跟著滑動剩蟀。
滑動效果：以實線中兩個有值點的距離作為一個pageSize催蝗，滑動回彈切威。

設(shè)計圖：

設(shè)計圖1.png

設(shè)計圖2.png

基礎(chǔ)知識：

1.實線的繪制方式：

    CGContextRef context = UIGraphicsGetCurrentContext(); // 獲取圖形上下文環(huán)境
    CGContextSetLineWidth(context, _reallineWidth);  // 設(shè)置線寬
    CGContextSetLineJoin(context, kCGLineJoinRound);// 設(shè)置線條的轉(zhuǎn)角的樣式
    CGContextSetLineCap(context, kCGLineCapRound);// 設(shè)置圖形環(huán)境中的畫線的端點樣式
    CGContextMoveToPoint(context, initialPoint.x, initialPoint.y); // 移動到初始點
    CGContextAddLineToPoint(context, obj.realline_x, obj.realline_y) 
    CGContextStrokePath(context); // 繪制

2.虛線的繪制方式

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, _dashlineWidth);
    [_dashlineColor set];
    CGFloat lengths[] = {4,4}; 
    CGContextSetLineDash(context, 0, lengths, 2); // 設(shè)置虛線模式
    CGPoint initialPoint = CGPointMake(firstPoint.dashline_x, firstPoint.dashline_y);
    CGContextMoveToPoint(context, initialPoint.x, initialPoint.y); 
    CGContextStrokePath(context);

3.日期(CATextLayer)

    CATextLayer *dateLayer = [CATextLayer layer];
    dateLayer.size = CGSizeMake(kLTLineViewDateWidth, kLTLineViewDateHeight);
    dateLayer.center = CGPointMake(obj.date_x, obj.date_y);
    dateLayer.alignmentMode = kCAAlignmentCenter;
    dateLayer.font = (__bridge CFTypeRef)(_dateFont);
    dateLayer.fontSize = -_dateFont.pointSize;
    dateLayer.string = obj.date;
    dateLayer.foregroundColor = _dateColor.CGColor;
    dateLayer.contentsScale = [UIScreen mainScreen].scale;
    [self.layer addSublayer:dateLayer];

4.Scrollview滑動回彈

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
    // scroll自定義page回彈size
    CGFloat kMaxIndex = (self.lineScollView.contentSize.width-kScreenWidth)/(kLTLineViewDateSpace+kLTLineViewDateWidth);
    CGFloat targetX = scrollView.contentOffset.x + velocity.x * (kLTLineViewDateSpace+kLTLineViewDateWidth);
    CGFloat targetIndex = round(targetX / (kLTLineViewDateSpace+kLTLineViewDateWidth));
    if (targetIndex < 0)
        targetIndex = 0;
    if (targetIndex > kMaxIndex)
        targetIndex = kMaxIndex;
    targetContentOffset->x = targetIndex * (kLTLineViewDateSpace+kLTLineViewDateWidth);
}

具體實現(xiàn)：

先看看結(jié)構(gòu)示例：

結(jié)構(gòu)示例.png