本文是銜接上篇關(guān)于繪制分時(shí)圖框的內(nèi)容，如果你還不了解關(guān)于K線圖、分時(shí)圖的相關(guān)知識(shí)，可以點(diǎn)擊這兒。

需求確定

在上篇文章中，我們已經(jīng)把分時(shí)圖的框和坐標(biāo)文字全部畫好，如下：

分時(shí)圖邊框

那現(xiàn)在就需要把分時(shí)線和背景繪制上去，效果如下：

分時(shí)線

開始搞起

需求既然已經(jīng)確定，那我們就來分解需求。其實(shí)仔細(xì)觀察效果圖，就可以發(fā)現(xiàn)分時(shí)線只是一條由多個(gè)點(diǎn)連成的線，而下面的背景區(qū)域是一個(gè)封閉區(qū)間，封閉區(qū)間是由上方的線、起始兩個(gè)坐標(biāo)點(diǎn)、X軸上與起始坐標(biāo)點(diǎn)相同X值的兩個(gè)坐標(biāo)點(diǎn)組成，為了方便理解，直接上圖：

分時(shí)線Demo

在上圖中，分時(shí)線為從起點(diǎn)（startPoint）到終點(diǎn)（endPoint）連接的一條線，而封閉區(qū)間為startPoint至endPoint、xEndPoint、xStartPoint所形成的閉合區(qū)間。

有了思路，我們就開始敲代碼了，如下：

    //分時(shí)線圖層
    CAShapeLayer tLineLayer = [CAShapeLayer layer];
    //背景區(qū)域圖層
    CAShapeLayer fillColorLayer = [CAShapeLayer layer];
    //用于模擬的坐標(biāo)點(diǎn)數(shù)組
    NSArray *pointArr = [NSArray array];
    //描述分時(shí)圖的路徑
    UIBezierPath *timeLinePath = [UIBezierPath bezierPath];
    CGPoint startPoint = [[pointArr firstObject] CGPointValue];
    //向路徑中添加分時(shí)線
    [timeLinePath moveToPoint:startPoint];
    for (int idx=1; idx<pointArr.count; idx++)
    {
        CGPoint point = [pointArr[idx] CGPointValue];
        [timeLinePath addLineToPoint:point];
    }
    //設(shè)置分時(shí)線圖層的各種屬性
    tLineLayer.path = timeLinePath.CGPath;
    tLineLayer.lineWidth = 0.5f;
    tLineLayer.strokeColor = [UIColor blueColor].CGColor;
    tLineLayer.fillColor = [UIColor clearColor].CGColor;
    
    //繼續(xù)向路徑中添加下面兩個(gè)點(diǎn) 形成閉合區(qū)間
    [timeLinePath addLineToPoint:xEndPoint];
    [timeLinePath addLineToPoint:xStartPoint];
    //設(shè)置背景區(qū)域圖層的各種屬性
    fillColorLayer.path = timeLinePath.CGPath;
    //這里注意，填充顏色要有一定的透明度
    fillColorLayer.fillColor = [UIColor blueColor].CGColor;
    fillColorLayer.strokeColor = [UIColor clearColor].CGColor;
    //設(shè)置圖層的位置，防止覆蓋
    fillColorLayer.zPosition -= 1;

ok，到這里，我們已經(jīng)把分時(shí)圖大部分元素繪制完成，現(xiàn)在還差的就是把左側(cè)的價(jià)格和右側(cè)的百分比繪制上去。那繼續(xù)搞！

繪制價(jià)格和百分比其實(shí)和繪制x軸的時(shí)間坐標(biāo)文字一致，再次把繪制文字的工具類貼上：

/**
 繪制文字
 
 @param text 字符串
 @param textColor 文字顏色
 @param bgColor 背景顏色
 @param frame 文字frame
 @return 返回textLayer
 */
- (CATextLayer *)getTextLayerWithString:(NSString *)text
                              textColor:(UIColor *)textColor
                               fontSize:(NSInteger)fontSize
                        backgroundColor:(UIColor *)bgColor
                                  frame:(CGRect)frame
{
    //初始化一個(gè)CATextLayer
    CATextLayer *textLayer = [CATextLayer layer];
    //設(shè)置文字frame
    textLayer.frame = frame;
    //設(shè)置文字
    textLayer.string = text;
    //設(shè)置文字大小
    textLayer.fontSize = fontSize;
    //設(shè)置文字顏色
    textLayer.foregroundColor = textColor.CGColor;
    //設(shè)置背景顏色
    textLayer.backgroundColor = bgColor.CGColor;
    //設(shè)置對(duì)齊方式
    textLayer.alignmentMode = kCAAlignmentCenter;
    //設(shè)置分辨率
    textLayer.contentsScale = [UIScreen mainScreen].scale;
    
    return textLayer;
}

這里注意，左側(cè)價(jià)格最中間的價(jià)格為當(dāng)前交易品的昨日收盤價(jià)，所以兩側(cè)的價(jià)格都是按照中間的價(jià)格相對(duì)求出來的，具體規(guī)則為：

if(ABS(當(dāng)前分時(shí)線中最大值 - 昨日收盤價(jià))) >= (ABS(昨日收盤價(jià)-當(dāng)前分時(shí)線中最小值))
{
    最上側(cè)價(jià)格 = 當(dāng)前分時(shí)線中最大值；
    最下側(cè)價(jià)格 = 昨日收盤價(jià) - ABS(當(dāng)前分時(shí)線中最大值 - 昨日收盤價(jià));
}else
{
    最上側(cè)價(jià)格 = 昨日收盤價(jià) + ABS(昨日收盤價(jià)-當(dāng)前分時(shí)線中最小值);
    最下側(cè)價(jià)格 = 當(dāng)前分時(shí)線中最小值；
}

上方的最大值、最小值都是遍歷當(dāng)前要展示的分時(shí)線價(jià)格得出來的，也就是求所有價(jià)格的max、min。

如果不懂上方說的昨日收盤價(jià)之類的，可以在開發(fā)中向后臺(tái)要這樣的字段。

ok，至此我們已經(jīng)把分時(shí)圖畫好，效果如下：

現(xiàn)貨分時(shí)圖

上圖是現(xiàn)貨類的效果，股票類的效果如下（注意不包含那條黃色的線）：

股票分時(shí)圖

如果遇到各種坑，或者覺得有一定難度，其實(shí)也沒關(guān)系，后面我會(huì)把demo上傳以供大家參考。