如何(c++,js)写一个传统的K线图和走势图4 - K线图

首先先讲下K线图的主图部分由哪些元素组成 看图

1.顶部指标信息区域

2.顶部信息地雷 （用来显示一些公告或新闻信息，财务等信息）

3.底部信息地雷 （用来显示一些公告或新闻信息，财务等信息）

   
  信息地雷是用来显示对应这个数据所在时间上发生的事件信息（如新闻，公告，龙虎榜，满足某一个策略等等）
一些特色的K线图会在这里显示一些特有的信息
4.K线和指标区域
 
5.当前屏最高价和最低价

6.K线和指标线

7.X，Y轴坐标信息

 

我们先说下K线的类型

1. K线空心阳线 

   

   开盘价<收盘价 称为阳线 (中间是空心的柱子)

   开盘价>收盘价 阴线 (中间是实心的柱子)

   开盘==收盘  平线

 

2. K线实心阳线

   开盘价<收盘价 称为阳线 (中间是实心的柱子)

   其他和K线空心阳线一样

3.收盘价线

  把收盘价连线就可以了。

4.美国线

    颜色和K线一样，开盘价在竖线的左边， 收盘价在竖线的右边

了解了K线的类型了， 用代码画出K线应该不是难事了，这里就不多讲了。

下面讲下K线的缩放,K线图是支持上下缩放K线的柱子宽度，那缩放的大小一般是怎么定义的呢？

上图标识了柱子宽度，柱子间距，这样我们就用一个固定的数组保存来柱子缩放的时候柱子宽度和间距的值，

var ZOOM_SEED=

[

[49,10],    [46,9],     [43,8],

..............

]

缩放的时候取对应索引下柱子的宽度和间距的值来画柱子就可以了。当索引==0 或最后一个， 就不能缩放了。

当柱子宽度很小的时候可以不用画柱子，直接画竖线就可以了，就算你画了柱子也看不出来的。如下图缩的很小的时候直接就画竖线