IOS端K线系列之K线-绘制OHLC图、线段、圆形

k线系列目录

查看目录请点击这儿

---

接着上篇文章继续说。在上文中我们把蜡烛绘制完，也讲到在K线中常见的几种图形：

1. 蜡烛
2. OHLC
3. 线段
4. 带状
5. 圆形

那在这篇文章里，我们把其余的也绘制一下，争取做一个基础的类库，这样在开发框架时就可以直接使用。

---

OHLC图

先上两张效果图：

如图所示，它是由4个数据生成：开盘、收盘、最高、最低。中间的线是最高点至最低点连接而成，两边的分别是开盘点和收盘点与中间线连接而成。

OK，知道思路以后，直接上代码：

/** 生成OHLC @param model 蜡烛坐标模型 @return 返回图层 */+ (CAShapeLayer *)getOHLCLayerWithPointModel:(YKCandlePointModel *)model{    //判断是否为涨跌    BOOL isRed = model.oPoint.y >= model.cPoint.y ? YES : NO;    UIBezierPath *path = [UIBezierPath bezierPath];    //绘制上下影线    [path moveToPoint:model.lPoint];    [path addLineToPoint:model.hPoint];    //开盘线    [path moveToPoint:model.oPoint];    [path addLineToPoint:CGPointMake(model.oPoint.x -6, model.oPoint.y)];    //开盘线    [path moveToPoint:model.cPoint];    [path addLineToPoint:CGPointMake(model.cPoint.x +6, model.cPoint.y)];    CAShapeLayer *layer = [CAShapeLayer layer];    layer.path = path.CGPath;    //判断涨跌来设置颜色    if (isRed)    {        //涨，设置红色        layer.strokeColor = [UIColor redColor].CGColor;    } else    {        //跌，设置绿色        layer.strokeColor = [UIColor greenColor].CGColor;    }    layer.fillColor = [UIColor clearColor].CGColor;    return layer;}

单、多条线

效果图：

上图中的淡绿色、粉色、黄色线就是我们所要绘制的，这里再解释一下为什么标题是单、多条线，因为在有的K线指标中规定某一个值是用一条连续的线段表示；但有的指标数值中间会有无效值，那无效值就不会连接，这样的话这条线段就是不连续的，形成多条线。

其实在分时线绘制的时候，也说过如何绘制一条线，这里就不再赘述了，直接上代码：

单条线工具类：

/** 生成单条线 @param pointArr 坐标点数组 @param lineColor 线颜色 @return 返回线段图层 */+ (CAShapeLayer *)getSingleLineLayerWithPointArray:(NSArray *)pointArr lineColor:(UIColor *)lineColor{    UIBezierPath *path = [UIBezierPath getBezierPathWithPointArr:pointArr];    CAShapeLayer *layer = [CAShapeLayer layer];    layer.path = path.CGPath;    layer.lineWidth = 1.f;    layer.strokeColor = lineColor.CGColor;    layer.fillColor = [UIColor clearColor].CGColor;    return layer;}

多条线工具类：

/** 生成包含多条线的线段 @param pointArr 坐标点数组 @param lineColor 线颜色 @return 返回线段图层 */+ (CAShapeLayer *)getMultipleLineLayerWithPointArray:(NSArray *)pointArr lineColor:(UIColor *)lineColor{    UIBezierPath *path = [UIBezierPath bezierPath];    for (int idxX=0; idxX<pointArr.count; idxX++)    {        NSArray *idxXArr = pointArr[idxX];        [path moveToPoint:[[idxXArr firstObject] CGPointValue]];        for (int idxY=1; idxY<idxXArr.count; idxY++)        {            [path addLineToPoint:[idxXArr[idxY] CGPointValue]];        }    }    CAShapeLayer *layer = [CAShapeLayer layer];    layer.path = path.CGPath;    layer.lineWidth = 1.f;    layer.strokeColor = lineColor.CGColor;    layer.fillColor = [UIColor clearColor].CGColor;    return layer;}

圆形

接下来是圆形，圆形就比较简单了，就是那么一个单纯的圆。只是在开发中，一般都是由多个圆形成一定的趋势。

这里直接上代码：

/** 生成圆 @param point 圆心坐标 @param color 圆颜色 @return 返回图层 */+ (CAShapeLayer *)getCircleLayerWithPoint:(CGPoint )point color:(UIColor *)color{    //直接用圆描述路径    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:point radius:3.f startAngle:0.f  endAngle:(CGFloat)M_PI * 2 clockwise:true];    //生成图层 并设置路径和属性    CAShapeLayer *layer = [CAShapeLayer layer];    layer.path = path.CGPath;    layer.fillColor = color.CGColor;    layer.strokeColor = color.CGColor;    return layer;}

带状

这里要说明一下，带状这种图形用文字叙述不清楚，需要结合实际的数据才能理解。所以这里就先不写Demo，等到后面我们在框架中接入实际数据了，再详述。

绘制效果

上面光发代码了，这里把最后的运行结果发上来：

需要源码的点击这里。