HQChart使用教程51-指标切换按钮事件说明

需求

通过点击指标窗口上的指标名称，弹出选择指标弹框。具体操作逻辑见下图。
最新版本增加了下拉箭头和边框， h5和小程序, app全部支持

步骤

1. 给指标名字增加背景色

通过给指标名字增加背景色，可以让指标名字看起来像一个按钮
IsDrawTitleBG 给窗口指标名字是否显示背景色，默认是false, 每个指标窗口单独设置
IsShowNameArrow 指标名称后面是否添加下拉箭头.(缺省false)

var option=
 {
     Type:'历史K线图',
     Windows:aryIndex, //窗口指标
     
     Windows: 
     [
         { Index: 'MA', IsDrawTitleBG:true, IsShowNameArrow:true}，
        .....
     ]
    ........

2. 增加指标名字点击事件通知

事件ID: JSCHART_EVENT_ID.ON_CLICK_INDEXTITLE

chart.SetOption(option); //设置配置
chart.AddEventCallback({event:JSCHART_EVENT_ID.ON_CLICK_INDEXTITLE, callback:OnClickIndexTitle});//点击事件通知回调

3. 增加函数处理点击事件

回调函数格式 function(event, data, obj)
event 注册的事件信息
data 点击事件信息
Point={X, Y} 点击的坐标， FrameID=窗口索引 ， Title:指标名称
obj 图形实例变量

 function OnClickIndexTitle(event, data, obj)
{
     console.log('[OnClickIndexTitle] data', data);
 }

日志截图

4. 弹出选择指标切换框

div做一个弹出框这个就不用多说了吧。
切换指标使用接口函数就可以。 HQChart使用教程5- K线图控件操作函数说明

//切换指标
Chart.ChangeIndex(windowIndex,indexName,option)

如果是要修改指标参数，看教程 HQChart使用教程45-如何动态修改指标参数

5. 修改指标名称背景色

如果嫌默认的颜色难看， 你可以通过修改资源配置文件来修改
IndexTitleBGColor 背景颜色
IndexTitleBorderColor 边框颜色
IndexTitleBorderStyle 指标按钮边框类型 0=直角边框 1=圆角边框 h5才有
IndexTitleBorderMoveOnColor 指标名字边框颜色(鼠标在上面), h5才有

var resource=JSChart.GetResource(); //获取hqchart资源配置
resource.IndexTitleBGColor='rgb(255,0,0)'; //修改指标标题背景色 注：修改颜色配置必须在初始化前
var chart=JSChart.Init(document.getElementById('kline')); //初始化

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

HQChart代码地址

github.com/jones2000/HQChart