HQChart使用教程51-指標切換按鈕事件說明-h5版本

需求

通過點擊指標窗口上的指標名稱，彈出選擇指標彈框。具體操作邏輯見下圖。

步驟

1. 給指標名字增加背景色

通過給指標名字增加背景色，可以讓指標名字看起來像一個按鈕
IsDrawTitleBG 給窗口指標名字是否顯示背景色，默認是false, 每個指標窗口單獨設置

var option=
 {
     Type:'歷史K線圖',
     Windows:aryIndex, //窗口指標
     
     Windows: 
     [
         { Index: 'MA', IsDrawTitleBG: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-如何動態修改指標參數

修改指標名稱背景色

如果嫌默認的顏色難看， 你可以通過修改資源配置文件來修改
對應字段IndexTitleBGColor

var resource=JSChart.GetResource(); //獲取hqchart資源配置
resource.IndexTitleBGColor='rgb(255,0,0)'; //修改指標標題背景色 注：修改顏色配置必須在初始化前
var chart=JSChart.Init(document.getElementById('kline')); //初始化

如果還有問題可以加交流QQ羣: 950092318

HQChart代碼地址
地址：github.com/jones2000/HQChart