HQChart使用教程3- 如何把指标上锁显示在K线图页面

HQChart

已于 2025-08-19 14:07:16 修改

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript HQChart 文章标签： K线图指标 canvas h5 javascript

于 2019-05-17 02:11:28 首次发布

本文链接：https://blog.csdn.net/jones2000/article/details/90285723

HQChart 同时被 2 个专栏收录

169 篇文章

订阅专栏

JavaScript

151 篇文章

订阅专栏

博客介绍了HQChart指标上锁相关内容，包括Windows字段下的Lock指标上锁字段，点击锁区域回调函数入参说明，以及指标解锁/上锁函数。还给出了demo页面代码，并提供了HQChart代码地址https://github.com/jones2000/HQChart 。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们需要对上一章写的BS指标进行上锁
效果图
在这里插入图片描述

指标上锁字段

Windows 字段下Lock 是指标上锁字段

Lock:
    {
          IsLocked: true,             //是否上锁
          BG: 'rgb(245,245,220)',     //锁区域背景色
          TextColor: 'rgb(255,165,79)',   //锁区域输出文字默认颜色
          Text:  //显示内容， 支持多行显示
          [
           //{ Text:"付费指标", TextMargin:{ Top:2, Bottom:2 }, YOffset:-2, Font:`25px 微软雅黑` },
            { Image:{ Data:image1, Width:50, Height:50 }, TextMargin:{ Top:2, Bottom:2 }, YOffset:-2, Align:1, },
          //{ Text:"\ue611", TextMargin:{ Top:2, Bottom:2 }, YOffset:-2, Align:1, Font:`40px iconfont`, Color:"rgb(100,100,100)" },
            { Text:"描述信息:XX", TextMargin:{ Top:2, Bottom:2 }, YOffset:-2},
           { Text:"\ue611", TextMargin:{ Top:2, Bottom:2 }, YOffset:-2, Align:1, Font:`40px iconfont`, Color:"rgb(100,0,100)" },
          ],                  //锁区域输出文字内容
          Font: '15px 微软雅黑',           //锁区域输出文字字体 
          Count: 12,                      //上锁主右边几条数据      
      }

点击锁事件

JSCHART_EVENT_ID.ON_CLICK_INDEX_LOCK

this.Option.EventCallback=
 [ .....
       {
               event:JSCHART_EVENT_ID.ON_CLICK_INDEX_LOCK,
                callback:(event, data, obj)=>{ this.OnClickIndexLock(event, data, obj); }
        },
 ];
 .....
 this.Chart.SetOption(this.Option);  //设置K线配置

this.OnClickIndexLock=function(event, data, obj)
{
      console.log("[KLineChart::OnClickIndexLock] data=", data);

      var aryIndex=[];
      for(var i=0; i<data.Data.Data.Data.length; ++i)
      {
          var item=data.Data.Data.Data[i];
          var indexID=item.Data.IndexID;
          aryIndex.push({ IndexID:indexID, IsOverlay:item.IsOverlay, LockData:{ IsLocked:false }});
      }
 
      //解锁指标
      obj.EnableLockIndex(aryIndex);
  }