HQChart使用教程84-十字光标右侧按钮事件


十字光标右侧按钮

HQChart十字光标提供一个内置的十字光标按钮，可以通过这个按钮增加对应的功能，如在十字光标位置的价格位置点击卖出或买入股票， 或弹菜单等等。

按钮效果图

HQChart使用教程84-十字光标右侧按钮事件_十字光标

开启十字光标右侧按钮

在setoption里面设置

CorssCursorInfo.RightButton.Enable=true

详见教程​​HQChart使用教程21-十字光标设置说明​​

this.Option= 
{
    Type:'历史K线图',   //创建图形类型
    ..................

    CorssCursorInfo: { DateFormatType:3, HPenType:1, VPenType:1 ,VLineType:0,RightButton:{ Enable:true } },
    .........
}

注册监听按钮点击事件

事件IDJSCHART_EVENT_ID.ON_CLICK_CROSSCURSOR_RIGHT

注册事件详见教程​​HQChart使用教程5- K线图控件操作函数说明​​

......
this.Chart.SetOption(this.Option);  //设置K线配置
.......
this.Chart.AddEventCallback(
  {
        event:JSCHART_EVENT_ID.ON_CLICK_CROSSCURSOR_RIGHT, 
        callback:(event, data, obj)=>{ this.ClickCrossCursor(event, data, obj); }
    }
)

回调函数参数说明

回调函数

回调函数定义 function(event, data, obj)

event

事件注册信息

data

点击数据信息

data数据结构如下：

{
    "Button": {
        "Data": {
            "Y": 246,
            "YValue": 18.438317757009347,
            "FrameID": 0
        },
        "Rect": {
            "Left": 1845.3701171875,
            "Top": 236,
            "Width": 20,
            "Height": 20
        }
    },
    "e": {
        "isTrusted": true
    }
}

Button

Button.Data

按钮信息：Y:Y轴的坐标， YValue:Y轴的数值， FrameID:指标窗口索引ID

Button.Rect

整个hqchart图形坐标和大小信息

e

点击事件的信息

obj

hqchart内部实例

实战教程

​​HQChart实战教程46-十字光标右侧按钮点击增加刻度线​​

交流QQ群: 950092318

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

HQChart代码地址

地址：​​github.com/jones2000/HQChart​​