内置右键菜单

HQChart h5版本内置提供一个仿通达信的右键菜单。效果如下图

内置菜单源码
https://github.com/jones2000/HQChart/blob/master/webhqchart.demo/jscommon/umychart.popMenu.js

启用右键菜单

在SetOption 开启右键菜单
EnablePopMenuV2 启动内置菜单2.0版本，(内置菜单也可以用在其它如下拉菜单等地方)
IsShowRightMenu 是否显示右键菜单

this.Option= 
{Type:'历史K线图',   //创建图形类型..............EnablePopMenuV2:true, //默认falseIsShowRightMenu:true...................}

定制右键菜单内容

1. 注册内置右键菜单创建回调事件

JSCHART_EVENT_ID.ON_CREATE_RIGHT_MENU

 {event:JSCHART_EVENT_ID.ON_CREATE_RIGHT_MENU,callback:(event, data, obj)=>{ this.OnCreateRightMenu(event, data, obj); }},

2. 修改内置菜单的显示内容

在创建右键菜单回调事件我们可以手动修改菜单显示的内容

回调函数格式

function(event, data, obj)
event 事件信息
data 菜单数据

	回调数据格式：data={MenuData:菜单数据FrameID:窗口索引 , 0开始}

obj 插件实例

菜单数据结构

var aryMenu=
[{ Name:"叠加品种", //菜单项Data:	//菜单项数据 菜单点击以后可以接收到这些数据{ ID:菜单ID 菜单ID可以使用内置预定义好的，也可以自己定义, Args:[参数数组]}, Checked:是否选中打勾 (true|false)SubMenu:	//子菜单[]},

//下面是一个简单的菜单 包含叠加品种(有子菜单)和区间选择这2个菜单选项var aryMenu=[{ Name:"叠加品种", SubMenu:[{ Name:"上证指数", Data:{ ID: JSCHART_MENU_ID.CMD_OVERLAY_SYMBOL_ID, Args:["000001.sh", !aryOverlaySymbol.includes("000001.sh")]}, Checked:aryOverlaySymbol.includes("000001.sh") },{ Name:"深证成指", Data:{ ID: JSCHART_MENU_ID.CMD_OVERLAY_SYMBOL_ID, Args:["399001.sz", !aryOverlaySymbol.includes("399001.sz")]}, Checked:aryOverlaySymbol.includes("399001.sz") },{ Name:"中小板指", Data:{ ID: JSCHART_MENU_ID.CMD_OVERLAY_SYMBOL_ID, Args:["399005.sz", !aryOverlaySymbol.includes("399005.sz")]}, Checked:aryOverlaySymbol.includes("399005.sz") },{ Name:"创业板指", Data:{ ID: JSCHART_MENU_ID.CMD_OVERLAY_SYMBOL_ID, Args:["399006.sz", !aryOverlaySymbol.includes("399006.sz")]}, Checked:aryOverlaySymbol.includes("399006.sz") },{ Name:"沪深300", Data:{ ID: JSCHART_MENU_ID.CMD_OVERLAY_SYMBOL_ID, Args:["000300.sh", !aryOverlaySymbol.includes("000300.sh")]}, Checked:aryOverlaySymbol.includes("000300.sh")},]},{Name:"区间选择",Data:{ ID: JSCHART_MENU_ID.CMD_ENABLE_SELECT_RECT_ID, Args:[!this.EnableSelectRect]}, Checked:this.EnableSelectRect},
】

示例

下面的例子就是在内置的菜单里面增加一项“自定义菜单项"菜单

this.OnCreateRightMenu=function(event, data, obj)
{console.log("[KLineChart::OnCreateRightMenu] data=", data);var item={ Name:"自定义菜单项", Data:{ ID:"CUSTOM_MENU_1_ID", Args:[1] } };}

3. 注册菜单项点击事件回调

JSCHART_EVENT_ID.ON_MENU_COMMAND 所有菜单事件都会触发这个回调

{event:JSCHART_EVENT_ID.ON_MENU_COMMAND,callback:(event, data, obj)=>{ this.OnMenuCommand(event, data, obj); }
},

回调函数格式
function(event, data, obj)
data={ CommandID:菜单ID, Args:参数，SrcData：原始数据, PreventDefault:是否阻止默认事件 }
下面是一个简单的菜单事件处理

this.OnMenuCommand=function(event, data, obj)
{console.log("[KLineChart::OnMenuCommand] data=", data);if (data.CommandID=="CUSTOM_MENU_1_ID"){data.PreventDefault=true;var text="外部自定义菜单按钮";alert(text);}
}

右键事件

如果不希望使用内置菜单，可以通过关闭内置右键菜单，然后注册右键事件直接在外部自己做

chart.AddEventCallback({event:JSCHART_EVENT_ID.ON_CONTEXT_MENU, callback:testcallback});

完整示例

完整示例可以参见 https://github.com/jones2000/HQChart/blob/master/webhqchart.demo/samples/kline_index_edit.html

HQChart代码地址

github.com/jones2000/HQChart