HQChart实战教程22 - PC端定制区间选择菜单

最新推荐文章于 2022-05-03 17:52:33 发布
最新推荐文章于 2022-05-03 17:52:33 发布
阅读量815 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： hqchart高级应用教程 文章标签： hqchart kline K线 量化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jones2000/article/details/108907629
本文档介绍了如何在HQChart中开启和禁用区间选择功能，详细讲解了拖拽模式设置、注册区间选择事件及其回调函数格式，并提供关闭内置区间选中菜单的方法。此外，还讨论了鼠标点击事件处理和自定义区间统计框的可能性，以及提供了相关示例源码和HQChart代码仓库链接。

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

HQChart实战教程22 - PC端定制区间选择菜单

区间选择

hqchart内置区间选择菜单，和区间统计框，如果需要定制可以通过外部事件接口替换。

开启/禁用区间选择功能

默认使用鼠标左右拖拽是用来拖拽数据， 开始区间选择功能以后，左右拖拽就变成区间选择。

区间选择启动变量

DragMode 拖拽模式
0 = 禁止拖拽
1 = 数据拖拽
2 = 区间选择

EnableSelectRect(bEnalbe)
{
   
   
      if (bEnalbe) this.Chart.JSCha
了解本专栏 订阅专栏 解锁全文
HQChart实战教程20 - PC端K线图定制tooltip
小银
09-17 1211
HQChart实战教程20 - PC端K线图定制tooltip序效果PC端键盘功能说明步骤2. 注册标题绘制事件3. 标题绘制回调函数格式说明eventdataobjtooltip显示函数键盘事件处理完整代码HQChart代码地址 序 hqchartK线图内置一个tooltip， 如果需要定制一个tooltip, 我们可以通过注册绘制标题事件，来自己做一个div显示数据。 参考教程HQChart实战教程7-自定义显示手势点击K线显示信息 效果 PC端键盘功能说明 键盘ESC隐藏十字线和tooltip, 键
HQChart实战教程19 - PC端分时图定制tooltip
小银
09-17 1902
HQChart实战教程19 - PC端分时图定制tooltip序效果步骤1. 创建一个外部tooltip的div2. 注册标题绘制事件3. 标题绘制回调函数格式说明eventdataobjtooltip显示函数HQChart代码地址 序 hqchart分时图是不带tooltip， 如果我们需要在PC端页面显示tooltip，我们可以通过注册绘制标题事件，来自己做一个div显示数据。 参考教程HQChart实战教程7-自定义显示手势点击K线显示信息 效果 步骤 1. 创建一个外部tooltip的div 在外
HQChart使用教程47-如何自定义右键菜单，已停用
小银
10-24 1406
HQChart使用教程47-如何自定义右键菜单步骤1. 注册事件2. 回调函数3.关闭HQChart右键菜单4. 右键操作 HQChart h5版本提供一个简陋的右键菜单， 主要是用来测试用的。 如果需要替换成自己的菜单，可以通过事件回调来截获右键菜单事件，然后弹出自己的菜单 步骤 1. 注册事件 通过AddEventCallback， 我们可以注册一个事件回调， chart.AddEventCa...
HQChart使用教程55- 自定义PC端K线图Tooltip
小银
02-22 2156
HQChart使用教程55- 自定义PC端K线图Tooltip效果图PC端Tooltiptooltip css数据输出格式化类类成员变量this.Valuethis.Textthis.Symbolthis.LineCountthis.Widththis.LanguageID成员函数this.Operator挂接自己的tooltip格式化类完整示例 效果图 在原来tooltip增加一列数据 PC端...
HQChart使用教程1- 如何快速创建一个K线图页面
热门推荐
小银
05-16 3万+
快速创建一个K线图页面HQChart介绍demo页面代码Option的配置项说明 效果图 HQChart介绍 功能: 提供K线，走势图， 支持通达信语法指标（麦语法), 画图工具，等等… 支持PC端页面， 小程序，手机端页面。 地址：https://github.com/jones2000/HQChart demo页面代码 git下载代码 在webhqchart.demo\demo 目录下创建一......
HQChart实战教程7-自定义显示手势点击K线显示信息
小银
02-04 2187
HQChart实战教程7-自定义显示手势点击K线显示信息标题绘制事件接收绘制标题事件完整实例代码 标题绘制事件 AddEventCallback() 注册K线图事件监听事件 （HQChart使用教程5- K线图控件操作函数说明） 监听一下事件就可以。 JSCHART_EVENT_ID.ON_TITLE_DRAW 标题绘制事件 this.Chart.AddEventCallback({event:...
HQChart实战教程18 - 多股同列
小银
07-08 2369
在一屏中显示多个K线图，使用统一的周期和指标， 下面是传统PC终端的多股同列截图。目前就计算了 9图，6图，4图分布， 如果要更多的图的分布，可以在这里加。如果当前是K线图，直接调用ChangePeriod切换周期。如果还有问题可以加交流QQ群: 950092318。如果是分时图，直接删除所有的分时图，创建线的K图。直接调用ChangeIndex切换对应的指标。根据当前的周期类型， 创建分时图或K线图。键盘上下是统一缩放所有的K线图。鼠标滚轴上下是用来翻页。
HQChart实战教程23 - 点击K线显示历史分钟走势图
小银
10-17 1781
HQChart实战教程23 - 点击K线显示历史分钟走势图需求步骤1. 注册K线点击监听事件2. 点击监听函数使用网路回调函数请求历史分钟交流QQ群：950092318HQChart代码地址实例完整代码 需求 点击某一天的K线，弹框显示这一天的走势图，一般PC端的行情软件是这样显示的 hqchart也是可以实现这样的效果 预备知识： HQChart使用教程67 - 鼠标点击K线柱子监听事件 HQChart使用教程29-走势图如何对接第3方数据2-最新分时数据 步骤 1. 注册K线点击监听事件 注册K线点击
HQChart实战教程26 - K线画图工具增加自定义图标
小银
11-06 1463
HQChart实战教程26 - 自定义K线画图工具设置框 文本类画图工具图标类添加画图工具图标接口参数创建画图工具图标参数说明属性设置图标大小图标颜色其他属性交流QQ群: 950092318HQChart代码地址教程demo完整代码 画图工具图标类 通过在K线上标记图标, 来突出这个数据.如下图是tradvingview的图标的画图工具. hqchart内置了4个图标, 上下箭头,左右箭头,其他图标需要通过外部设置. 添加画图工具图标接口 //注册一个新图标 {Name:, Text: , Color:,
HQChart实战教程24 - 自定义K线画图工具设置框（线段类）
小银
10-22 1684
HQChart实战教程24 - 自定义K线画图工具设置框画图工具 画图工具 K线上可以通过画图工具在屏幕中进行线段的绘制， 点击已绘制的线段，可以修改线段的颜色，宽度等属性。
HQChart实战教程49-点击修改K线颜色及背景色
小银
12-14 2377
HQChart实战教程49-点击修改K线颜色及背景色需求效果图步骤1. 注册点击监听事件2. 修改K颜色添加一个自定义颜色的K线klineoption清空所有自定义颜色的K线option交流QQ群: 950092318HQChart代码地址完整例子 需求 对点击的K线修改颜色。 效果图 步骤 1. 注册点击监听事件 事件ID JSCHART_EVENT_ID.ON_CLICK_CHART_PAINT, 注册监听事件见教程 HQChart使用教程5- K线图控件操作函数说明 this.Create=func
HQChart实战教程40 - 如何制作hqchart组件(uniapp版本)
小银
04-22 2139
HQChart实战教程40 - 如何制作hqchart组件 uniapp版本hqchart组件预备知识样例效果图组件创建步骤1 创建组件模板元素注意点2. 创建hqchart实例容器注意点3. 创建hqchart配置数据图形大小idsymbolChartType配置3. 初始化传参4. hqchart全局实例管理5. app绑定画布手势6. 对外接口说明SetSizeClearChartChangeKLinePeriodChangeMinutePeriodChangeKLineIndexChangeSym
HQChart实战教程21 - uniapp app端K线图定制tooltip
小银
09-18 2100
HQChart实战教程21 - uniapp app端K线图定制tooltip序效果步骤2. 注册标题绘制事件3. 标题绘制回调函数格式说明eventdataobjtooltip显示函数完整代码HQChart代码地址 序 hqchartK线图内置一个tooltip， 如果需要定制一个tooltip, 我们可以通过注册绘制标题事件，来自己做一个div显示数据。 参考教程HQChart实战教程7-自定义显示手势点击K线显示信息 效果 步骤 在外部创建一个view，并在view里创建需要显示的信息字段. 例子里
HQChart实战教程51-自定义指标列表
小银
03-16 1347
HQChart实战教程51-自定义指标列表效果图步骤1. 注册初始化完成事件2. 重载内置的指标窗口高度分配计算函数3.绘制自定义指标tab交流QQ群: 950092318HQChart代码地址完整实例代码 效果图 在特定的指标窗口下增加一栏指标列表的tab列表 步骤 1. 注册初始化完成事件 在setoption里面设置图形创建完成回调（OnCreatedCallback）详见教程 HQChart使用教程1- 如何快速创建一个K线图页面 this.Create=function() //创建图形 {
HQChart实战教程50-自定义指标栏工具按钮
小银
02-15 1231
HQChart实战教程50-自定义指标栏工具按钮指标栏工具按钮自定义按钮步骤自定义按钮结构添加按钮清空自定义按钮交流QQ群: 950092318HQChart代码地址完整例子 指标栏工具按钮 每个指标窗口上面的右边部分是用来放按钮的， 只能是有切换指标，关闭窗口，修改参数，叠加指标4个按钮，如下图。 也可以增加自己的自定义按钮. 自定义按钮步骤 每个指标窗口都有一个自定义按钮数组CustomToolbar[]. 往里添加按钮项就可以。 自定义按钮结构 [ { ID:按钮id （注意H
HQChart实战教程53-动态指定标识K线区间段背景颜色
小银
05-03 1149
HQChart实战教程53-指定标识K线区间段背景颜色需求效果图步骤1. 创建K线背景色标识类ExtendChart获取K线背景色标识类实例设置K线背景色数据结构设置K线背景色数据交流QQ群: 950092318HQChart代码地址完整的示例代码 需求 动态标识某一个K线区间段的背景颜色（如标识2022-4-01到2022-5-01这个区间段的K线背景色为黄色）， 已达到醒目提示效果。 效果图 步骤 hqchart内置一个K线背景色标识的绘制类，我们可以用它来控制K线的背景颜色 1. 创建K线背景色标识
HQChart实战教程21 - unapp app端分时图定制tooltip
小银
09-18 1134
HQChart实战教程21 - unapp app端分时图定制tooltip序效果步骤1. 创建一个外部tooltip的view2. 注册标题绘制事件3. 标题绘制回调函数格式说明eventdataobjtooltip显示函数完整代码HQChart代码地址 序 hqchart分时图是不带tooltip， 如果我们需要在app端显示tooltip，我们可以通过注册绘制标题事件，来自己做一个div显示数据。 参考教程HQChart实战教程7-自定义显示手势点击K线显示信息 效果 步骤 1. 创建一个外部too
HQChart实战教程36-A股后台指标对接-uniapp版本
小银
03-18 1118
HQChart实战教程36-A股后台指标对接-uniapp版本预备知识步骤1. 配置远程指标2. NetworkFilter截获后台指标请求3. 对接自己的后台指标4. 指标数据更新交流QQ群: 950092318HQChart代码地址完整代码index.vue600000_index.js600000_day.js 预备知识 HQChart使用教程30-K线图如何对接第3方数据5-指标数据 HQChart使用教程30-K线图如何对接第3方数据9-BS指标数据 HQChart使用教程30-K线图如何对接第
HQChart实战教程28-动态切换颜色风格
小银
01-13 1066
HQChart实战教程28-动态切换颜色风格动态换肤步骤1. 准备多套配色方案2. 动态切换风格目前只支持h5， app，小程序不支持.交流QQ群: 950092318HQChart代码地址 动态换肤 通过按钮可以动态切换K线图风格。 步骤 1. 准备多套配色方案 这里我就使用HQChart内置的2套配色， 黑色和白色 import HQChart from 'hqchart' ............. var WHITE_STYLE=null; //白色风格 var BLOCK_STYLE=nul
hqchart区间选择
最新发布
01-01
### hqchart 区间选择功能详解 在 `hqchart` 中实现区间选择功能主要涉及配置图表选项以及处理特定的交互事件。下面详细介绍如何设置并使用这一特性。 #### 清除默认右键菜单以启用自定义操作 为了确保可以自由定制区间的选取行为而不受内置组件干扰，在初始化 K 线图之后应当立即将其自带的选择区域右侧弹出菜单设为空： ```javascript this.Chart.JSChartContainer.SelectRectRightMenu = null; ``` 这段代码的作用是在调用 `SetOption()` 方法设定绘图参数后立即执行，从而移除了原有的上下文菜单[^1]。 #### 实现鼠标点击触发区间选中逻辑 当用户希望利用鼠标的拖拽动作来标记感兴趣的交易时间段时，则需监听相应的输入设备活动，并据此更新视窗内的显示内容或发起进一步的数据请求。具体来说就是捕捉到按下与释放按键的位置坐标变化情况，进而划定目标片段边界。 对于上述过程中的细节控制部分，官方文档并未给出详尽说明；不过基于现有资料推测，这通常涉及到对底层 API 的深入理解及灵活运用——比如借助于画布工具接口完成更复杂的图形绘制任务，像这样创建成交量分布统计图表： ```javascript this.Chart.CreateChartDrawPicture("固定范围成交量分布图"); ``` 此命令允许开发者指定想要呈现的具体可视化样式名称作为参数传递给函数体内部去解析执行[^3]。 另外值得注意的是，如果计划在此基础上添加更多个性化元素（例如调整 Y 轴上的颜色渐变效果），则可能还需要额外注册一些回调机制用于响应数值变动事件的发生时刻，以便动态修改界面布局属性[^4]。 综上所述，虽然直接针对“区间选择”的描述较为有限，但从关联知识点出发依然能够构建起一套完整的解决方案框架供参考借鉴。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HQChart

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值