HQChart使用教程81-自定义指标窗口高度

指标窗口高度

内置的指标窗口是使用窗口比例来动态调整每个窗口的高度。详见教程 HQChart使用教程1- 如何快速创建一个K线图页面 Frame.Height

自定义窗口高度

如果我们需要用指定某一个窗口高度为固定高度的， 那使用内置的窗口高度比是无法实现的， 我们就需要重载内置的窗口计算函数CalculateChartBorder(), 来自己分配高度给每个窗口。

步骤

1. 注册图形创建完成回调

在setoption里面设置图形创建完成回调（OnCreatedCallback）详见教程 HQChart使用教程1- 如何快速创建一个K线图页面

this.Create=function()  //创建图形
{
    ..........
    
    this.Option.OnCreatedCallback=(chart) => { this.OnCreatedHQChart(chart); }
    ..........
    
    this.Chart.SetOption(this.Option);  //设置K线配置
}

回调函数格式 function(chart) , chart为内置hqchart实例， 通过这个回调你就可以回去内置的hqchart实例，然后重载内置实例的函数就可以，实现自定义。

2. 重载内置的指标窗口计算函数

chart.Frame 是指标窗口的实例。

this.OnCreatedHQChart=function(chart)
{
     //计算每个子窗口大小高度
     var frame=chart.Frame;
     frame.CalculateChartBorder=()=> { this.CalculateChartBorder(frame); }
 }

3. 实现自己的窗口高度计算

主图指标固定350， 其他附图指标平分剩余高度

this.CalculateChartBorder=function(frame)
{
   if (frame.SubFrame.length<=0) return;   //0个窗口指标

   var bottom=frame.ChartBorder.GetChartHeight();  //底部
   var top=frame.ChartBorder.GetTop();             //顶部   
   var height=frame.ChartBorder.GetHeight(); //所有指标窗口的高度
   var mainHeight=this.MainWindowHeight; //主窗口350固定高
   var count=frame.SubFrame.length;
   
   var item=frame.SubFrame[0];
   item.Frame.ChartBorder.Top=top; //顶部间距
   item.Frame.ChartBorder.Left=frame.ChartBorder.Left;
   item.Frame.ChartBorder.Right=frame.ChartBorder.Right;
   item.Frame.ChartBorder.LeftExtendWidth=frame.ChartBorder.LeftExtendWidth;
   item.Frame.ChartBorder.RightExtendWidth=frame.ChartBorder.RightExtendWidth;
   item.Frame.ChartBorder.Bottom=bottom-mainHeight-top; //底部间距
   top+=mainHeight;

   if (count-1>0)
   {
       var frameHeight=(height-mainHeight)/(count-1); //附图窗口平分剩下的高度
       for(var i=1; i<frame.SubFrame.length; ++i)
       {
           var item=frame.SubFrame[i];
           item.Frame.ChartBorder.Top=top; //顶部间距
           item.Frame.ChartBorder.Left=frame.ChartBorder.Left;
           item.Frame.ChartBorder.Right=frame.ChartBorder.Right;
           item.Frame.ChartBorder.LeftExtendWidth=frame.ChartBorder.LeftExtendWidth;
           item.Frame.ChartBorder.RightExtendWidth=frame.ChartBorder.RightExtendWidth;
           item.Frame.ChartBorder.Bottom=bottom-top-frameHeight; //底部间距
           top+=frameHeight;
       }
   }
}

进阶教程

HQChart实战教程44-多指标窗口动态增长高度

交流QQ群: 950092318

如果还有问题可以加交流QQ群: 950092318

HQChart代码地址

地址：github.com/jones2000/HQChart

个人爱好摄影/模型