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代码地址
地址:github.com/jones2000/HQChart
个人爱好摄影/模型