本文是衔接上篇关于绘制分时图框的内容，如果你还不了解关于K线图、分时图的相关知识，可以点击这儿。
需求确定
在上篇文章中，我们已经把分时图的框和坐标文字全部画好，如下：
分时图边框
那现在就需要把分时线和背景绘制上去，效果如下：
分时线
开始搞起
需求既然已经确定，那我们就来分解需求。其实仔细观察效果图，就可以发现分时线只是一条由多个点连成的线，而下面的背景区域是一个封闭区间，封闭区间是由上方的线、起始两个坐标点、X轴上与起始坐标点相同X值的两个坐标点组成，为了方便理解，直接上图：
分时线Demo
在上图中，分时线为从起点（startPoint）到终点（endPoint）连接的一条线，而封闭区间为startPoint至endPoint、xEndPoint、xStartPoint所形成的闭合区间。
有了思路，我们就开始敲代码了，如下：
//分时线图层
CAShapeLayer tLineLayer = [CAShapeLayer layer];
//背景区域图层
CAShapeLayer fillColorLayer = [CAShapeLayer layer];
//用于模拟的坐标点数组
NSArray *pointArr = [NSArray array];
//描述分时图的路径
UIBezierPath *timeLinePath = [UIBezierPath bezierPath];
CGPoint startPoint = [[pointArr firstObject] CGPointValue];
//向路径中添加分时线
[timeLinePath moveToPoint:startPoint];
for (int idx=1; idx<pointArr.count; idx++)
{
CGPoint point = [pointArr[idx] CGPointValue];
[timeLinePath addLineToPoint:point];
}
//设置分时线图层的各种属性
tLineLayer.path = timeLinePath.CGPath;
tLineLayer.lineWidth = 0.5f;
tLineLayer.strokeColor = [UIColor blueColor].CGColor;
tLineLayer.fillColor = [UIColor clearColor].CGColor;
//继续向路径中添加下面两个点 形成闭合区间
[timeLinePath addLineToPoint:xEndPoint];
[timeLinePath addLineToPoint:xStartPoint];
//设置背景区域图层的各种属性
fillColorLayer.path = timeLinePath.CGPath;
//这里注意，填充颜色要有一定的透明度
fillColorLayer.fillColor = [UIColor blueColor].CGColor;
fillColorLayer.strokeColor = [UIColor clearColor].CGColor;
//设置图层的位置，防止覆盖
fillColorLayer.zPosition -= 1;
ok，到这里，我们已经把分时图大部分元素绘制完成，现在还差的就是把左侧的价格和右侧的百分比绘制上去。那继续搞！
绘制价格和百分比其实和绘制x轴的时间坐标文字一致，再次把绘制文字的工具类贴上：
/**
绘制文字
@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
{
//初始化一个CATextLayer
CATextLayer *textLayer = [CATextLayer layer];
//设置文字frame
textLayer.frame = frame;
//设置文字
textLayer.string = text;
//设置文字大小
textLayer.fontSize = fontSize;
//设置文字颜色
textLayer.foregroundColor = textColor.CGColor;
//设置背景颜色
textLayer.backgroundColor = bgColor.CGColor;
//设置对齐方式
textLayer.alignmentMode = kCAAlignmentCenter;
//设置分辨率
textLayer.contentsScale = [UIScreen mainScreen].scale;
return textLayer;
}
这里注意，左侧价格最中间的价格为当前交易品的昨日收盘价，所以两侧的价格都是按照中间的价格相对求出来的，具体规则为：
if(ABS(当前分时线中最大值 - 昨日收盘价)) >= (ABS(昨日收盘价-当前分时线中最小值))
{
最上侧价格 = 当前分时线中最大值；
最下侧价格 = 昨日收盘价 - ABS(当前分时线中最大值 - 昨日收盘价);
}else
{
最上侧价格 = 昨日收盘价 + ABS(昨日收盘价-当前分时线中最小值);
最下侧价格 = 当前分时线中最小值；
}
上方的最大值、最小值都是遍历当前要展示的分时线价格得出来的，也就是求所有价格的max、min。
如果不懂上方说的昨日收盘价之类的，可以在开发中向后台要这样的字段。
ok，至此我们已经把分时图画好，效果如下：
现货分时图
上图是现货类的效果，股票类的效果如下（注意不包含那条黄色的线）：
股票分时图
如果遇到各种坑，或者觉得有一定难度，其实也没关系，后面我会把demo上传以供大家参考。
