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

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

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

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

区间选择

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

开启/禁用区间选择功能

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

区间选择启动变量

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

EnableSelectRect(bEnalbe)
{
   
      if (bEnalbe) this.Chart
了解本专栏 订阅专栏 解锁全文
HQChart实战教程20 - PC端K线图定制tooltip
小银
09-17 1150
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 1844
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 1381
HQChart使用教程47-如何自定义右键菜单步骤1. 注册事件2. 回调函数3.关闭HQChart右键菜单4. 右键操作 HQChart h5版本提供一个简陋的右键菜单， 主要是用来测试用的。 如果需要替换成自己的菜单，可以通过事件回调来截获右键菜单事件，然后弹出自己的菜单 步骤 1. 注册事件 通过AddEventCallback， 我们可以注册一个事件回调， chart.AddEventCa...
HQChart使用教程55- 自定义PC端K线图Tooltip
小银
02-22 2098
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 2114
HQChart实战教程7-自定义显示手势点击K线显示信息标题绘制事件接收绘制标题事件完整实例代码 标题绘制事件 AddEventCallback() 注册K线图事件监听事件 （HQChart使用教程5- K线图控件操作函数说明） 监听一下事件就可以。 JSCHART_EVENT_ID.ON_TITLE_DRAW 标题绘制事件 this.Chart.AddEventCallback({event:...
HQChart实战教程18 - 多股同列
小银
07-08 2270
在一屏中显示多个K线图，使用统一的周期和指标， 下面是传统PC终端的多股同列截图。目前就计算了 9图，6图，4图分布， 如果要更多的图的分布，可以在这里加。如果当前是K线图，直接调用ChangePeriod切换周期。如果还有问题可以加交流QQ群: 950092318。如果是分时图，直接删除所有的分时图，创建线的K图。直接调用ChangeIndex切换对应的指标。根据当前的周期类型， 创建分时图或K线图。键盘上下是统一缩放所有的K线图。鼠标滚轴上下是用来翻页。
HQChart实战教程23 - 点击K线显示历史分钟走势图
小银
10-17 1702
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 1409
HQChart实战教程26 - 自定义K线画图工具设置框 文本类画图工具图标类添加画图工具图标接口参数创建画图工具图标参数说明属性设置图标大小图标颜色其他属性交流QQ群: 950092318HQChart代码地址教程demo完整代码 画图工具图标类 通过在K线上标记图标, 来突出这个数据.如下图是tradvingview的图标的画图工具. hqchart内置了4个图标, 上下箭头,左右箭头,其他图标需要通过外部设置. 添加画图工具图标接口 //注册一个新图标 {Name:, Text: , Color:,
HQChart实战教程24 - 自定义K线画图工具设置框（线段类）
小银
10-22 1603
HQChart实战教程24 - 自定义K线画图工具设置框画图工具 画图工具 K线上可以通过画图工具在屏幕中进行线段的绘制， 点击已绘制的线段，可以修改线段的颜色，宽度等属性。
HQChart实战教程49-点击修改K线颜色及背景色
小银
12-14 2321
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 2067
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 2055
HQChart实战教程21 - uniapp app端K线图定制tooltip序效果步骤2. 注册标题绘制事件3. 标题绘制回调函数格式说明eventdataobjtooltip显示函数完整代码HQChart代码地址 序 hqchartK线图内置一个tooltip， 如果需要定制一个tooltip, 我们可以通过注册绘制标题事件，来自己做一个div显示数据。 参考教程HQChart实战教程7-自定义显示手势点击K线显示信息 效果 步骤 在外部创建一个view，并在view里创建需要显示的信息字段. 例子里
HQChart实战教程51-自定义指标列表
小银
03-16 1295
HQChart实战教程51-自定义指标列表效果图步骤1. 注册初始化完成事件2. 重载内置的指标窗口高度分配计算函数3.绘制自定义指标tab交流QQ群: 950092318HQChart代码地址完整实例代码 效果图 在特定的指标窗口下增加一栏指标列表的tab列表 步骤 1. 注册初始化完成事件 在setoption里面设置图形创建完成回调（OnCreatedCallback）详见教程 HQChart使用教程1- 如何快速创建一个K线图页面 this.Create=function() //创建图形 {
HQChart实战教程50-自定义指标栏工具按钮
小银
02-15 1181
HQChart实战教程50-自定义指标栏工具按钮指标栏工具按钮自定义按钮步骤自定义按钮结构添加按钮清空自定义按钮交流QQ群: 950092318HQChart代码地址完整例子 指标栏工具按钮 每个指标窗口上面的右边部分是用来放按钮的， 只能是有切换指标，关闭窗口，修改参数，叠加指标4个按钮，如下图。 也可以增加自己的自定义按钮. 自定义按钮步骤 每个指标窗口都有一个自定义按钮数组CustomToolbar[]. 往里添加按钮项就可以。 自定义按钮结构 [ { ID:按钮id （注意H
HQChart实战教程21 - unapp app端分时图定制tooltip
小银
09-18 1110
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 1064
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实战教程53-动态指定标识K线区间段背景颜色
小银
05-03 1052
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实战教程28-动态切换颜色风格
小银
01-13 1027
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
为了确保可以自由定制区间的选取行为而不受内置组件干扰，在初始化 K 线图之后应当立即将其自带的选择区域右侧弹出菜单设为空： ```javascript this.Chart.JSChartContainer.SelectRectRightMenu = null; ``` 这段...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

HQChart

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

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

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

打赏作者

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

抵扣说明：

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

余额充值