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