HQChart使用教程47-如何自定义右键菜单，已停用

此功能已停用

新的菜单详见

HQChart使用教程98-右键菜单2.0使用介绍

HQChart h5版本提供一个简陋的右键菜单， 主要是用来测试用的。 如果需要替换成自己的菜单，可以通过事件回调来截获右键菜单事件，然后弹出自己的菜单

步骤

1. 注册事件

通过AddEventCallback， 我们可以注册一个事件回调，

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

2. 回调函数

在回调里面实现自定义菜单

function testcallback(event,data,obj)
{
     console.log('[testcallback]', event, data, obj);
     //弹出你自己的菜单把
 }

event:注册的事件信息
data: 点击的信息 { Event:事件信息， X:X坐标 ,Y:Y坐标, FrameID:点击的指标窗口索引 }
obj:chart图形内部实例

注意!!! K线训练没有右键菜单，如果需要添加右键菜单只能通过注册上面的事件，自己做右键菜单

3.关闭HQChart右键菜单

var option=
{
     Type:'历史K线图',
     .....
     IsShowRightMenu:false,          //右键菜单
     ....
}

4. 右键操作

具体右键功能 可以参见 KLineRightMenu类(在umychart.js) 里面有获取状态和设置的方法

只修改显示菜单项

如果只是想修改菜单项,可以直接修改 this.Chart.JSChartContainer.RightMenu.DoModal

this.Create=function()  //创建图形
{
    ............................
    this.Chart.SetOption(this.Option);  //设置K线配置
	......................
	//菜单显示函数替换成自己的函数
    this.Chart.JSChartContainer.RightMenu.DoModal=(event)=> { this.RightMenu_DoModal(event); } 
    ......................
}

this.RightMenu_DoModal=function(event)
{
    var chart=event.data.Chart;
    var rightMenu=chart.RightMenu; //内置菜单实例, 如果要调用内置菜单方法可以用它(KLineRightMenu)
    //鼠标坐标
    var x = event.offsetX;
    var y = event.offsetY;

    //显示菜单
    var dataList=
    [
        {
            text: "分析周期",
            children: rightMenu.GetPeriod(chart)
        }, 
        {
            text: "复权处理",
            children: rightMenu.GetRight(chart)
        }, 
        {
            text: "指标切换",
            children: rightMenu.GetIndex(chart)
        }
    ];

    var identify=event.data.FrameID;
    //弹出菜单
    rightMenu.Show({
        windowIndex :identify,
        x:x+chart.UIElement.offsetLeft,
        y:y+chart.UIElement.offsetTop,
        position:chart.Frame.Position,
        data:dataList
    })

    //点击隐藏菜单
    $(document).click(function () {
        rightMenu.Hide();
    });
}
     

修改2级菜单

修改周期菜单列表

//右键周期菜单
this.GetPeriodMenu=function(chart)
{
    //Value: 周期ID, 
    var data=
    [
        {
            text: "日线", Value:0,
            click: function () { chart.ChangePeriod(0); }
        }, 
        {
            text: "周线",Value:1,
            click: function () { chart.ChangePeriod(1); }
        }, 
        {
            text: "1分",Value:4,
            click: function () { chart.ChangePeriod(4); }
        },
        {
            text: "5分",Value:5,
            click: function () { chart.ChangePeriod(5); }
        }
    ];

    //当前选中的周期
    for(var i in data)
    {
        var item=data[i];
        if (item.Value==chart.Period)
        {
            item.selected=true;
            break;
        }
    }

    return data; 	//返回菜单列表
}

this.RightMenu_DoModal=function(event)
{
    var chart=event.data.Chart;
    var rightMenu=chart.RightMenu;
    var x = event.offsetX;
    var y = event.offsetY;

    var dataList=
    [
        {
            text: "分析周期",
            children: this.GetPeriodMenu(chart)	//使用新的周期菜单
        }, 
        {
            text: "复权处理",
            children: rightMenu.GetRight(chart)
        }, 
        {
            text: "指标切换",
            children: rightMenu.GetIndex(chart)
        }
    ];

    var identify=event.data.FrameID;
    rightMenu.Show({
        windowIndex :identify,
        x:x+chart.UIElement.offsetLeft,
        y:y+chart.UIElement.offsetTop,
        position:chart.Frame.Position,
        data:dataList
    })

    $(document).click(function () {
        rightMenu.Hide();
    });
}

修改指标列表

//指标
this.GetIndex=function (chart) 
 {
     return [{
         text: "均线",
         click: function (windowIndex) {
             chart.ChangeIndex(windowIndex, '均线')
         }
     }, {
         text: "BOLL",
         click: function (windowIndex) {
             chart.ChangeIndex(windowIndex, 'BOLL')
         },
         isBorder:true
     }, {
         text: "MACD",
         click: function (windowIndex) {
             chart.ChangeIndex(windowIndex, 'MACD')
         }
     }];
 }

this.RightMenu_DoModal=function(event)
{
  .........................
  {
            text: "指标切换",
            children: this.GetIndex(chart)
  }
..............
}

HQChart代码地址

地址：github.com/jones2000/HQChart

交流QQ群

见git项目首页

个人爱好(模型/摄影)