0
点赞
收藏
分享

微信扫一扫

如何(c++,js)写一个传统的K线图和走势图3-多指标窗口模式如何实现的

妖妖妈 2022-03-12 阅读 49


如何(c++,js)写一个传统的K线图和走势图3-多指标窗口模式如何实现的_K线图

上图我们可以看到K线图是由1个主图指标窗口和N个副图窗口组成。副图窗口是可以动态创建。

一般常用的设计是 

js: 在一个canves里根据窗口个数切分成多个假的窗口.

c++:在一个窗口(HWND)里面根据窗口个数切分成多个假的窗口.

这样的好处是在处理十字光标的时候,不需要对多个(canves或窗口)进行联动。十字光标的Y轴是横跨所有的指标窗口, 每个窗口的指标标题也是跟十字光标联动。

一下我们多指标窗口的简单的设计图

如何(c++,js)写一个传统的K线图和走势图3-多指标窗口模式如何实现的_K线图_02

首先我们定义一个指标窗口基类 IFrame, 所有的窗口指标都是继承这个IFrame基类的. 然后我们定义一个指标窗口容器类FrameContainer,里面定义一个动态IFrame的数组.下面的图就是IFrame和各个指标窗口的继承关系

如何(c++,js)写一个传统的K线图和走势图3-多指标窗口模式如何实现的_JavaScript_03

下面是容器窗口的简单的伪代码

c++ 

class FrameContainer,

{

  private:

     list<IFrame> m_aryFrame;    //所有的指标窗口存放在这里


  public:

      void OnSize(long lWidth,lHeight);

      void OnDraw(HDC hDC);

}

js

function FrameContainer()

{

   this.Frame=[];   //所有的指标窗口存放在这里

   this.OnSize=function(width,height){ ..... }

   this.OnDraw(canves);

}

里面有2个函数

OnSize: 是当窗口/canves大小变动的时候,给每个指标窗口划定可以画图的区域 

OnDraw: 是绘制所有的指标窗口伪代码如下

c++ 

void OnDraw(HDC hDC)

{

   for(int i=0;i<m_aryFrame.size();++i)

       m_aryFrame[i].Draw(hDC);

   //绘制十字光标

}

js

this.OnDraw=function(context)

{

  for(let i in this.Frame)

     this.Frame[i].Draw(context);

  //绘制十字光标

}

这样一个简单的指标窗口容器就完成了,可以动态的增加/删除窗口。容器再和画布或HDC绑定一下就可以绘制出来 。 十字光标在画完所有的指标窗口绘制,这样就解决了十字光标绘制的时候跨多个指标窗口的问题了。

下一章 十字光标的绘制

实例代码:https://github.com/jones2000/HQChart


举报

相关推荐

0 条评论