HQChart实战教程19 - PC端分时图定制tooltip

已于 2023-05-09 12:32:41 修改
阅读量1.6k 收藏 2
点赞数
分类专栏： hqchart高级应用教程 文章标签： hqchart 分时图 量化
于 2020-09-17 01:41:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jones2000/article/details/108633991
版权
hqchart高级应用教程 专栏收录该内容
27 篇文章 166 订阅 ¥299.90 ¥399.90
订阅专栏
本文介绍了如何在HQChart的PC端分时图中实现自定义Tooltip，通过创建外部div并注册标题绘制事件，实现实时显示股票的详细信息。详细步骤包括创建Tooltip div、注册和处理标题绘制事件，以及键盘事件处理。同时提供了示例代码和HQChart的代码地址。
摘要由CSDN通过智能技术生成

HQChart实战教程19 - PC端分时图定制tooltip

序

hqchart分时图是不带tooltip， 如果我们需要在PC端页面显示tooltip，我们可以通过注册绘制标题事件，来自己做一个div显示数据。
参考教程HQChart实战教程7-自定义显示手势点击K线显示信息

效果

在这里插入图片描述

demo地址：https://opensource2.zealink.com/jones/minute_tooltip_demo/index.html#/

PC端键盘功能说明

键盘ESC隐藏十字线和tooltip,
键盘Left/Right显示十字线和tooltip

步骤

1. 创建一个外部tooltip的

了解本专栏 订阅专栏 解锁全文
HQChart
关注
专栏目录
订阅专栏
HQChart实战教程59-深度图定制Tooltip输出内容
小银
04-04 271
自定义深度图tooltip内容
HQChart实战教程20 - PC端K线图定制tooltip
小银
09-17 1025
HQChart实战教程20 - PC端K线图定制tooltip序效果PC端键盘功能说明步骤2. 注册标题绘制事件3. 标题绘制回调函数格式说明eventdataobjtooltip显示函数键盘事件处理完整代码HQChart代码地址 序 hqchartK线图内置一个tooltip， 如果需要定制一个tooltip, 我们可以通过注册绘制标题事件，来自己做一个div显示数据。 参考教程HQChart实战教程7-自定义显示手势点击K线显示信息 效果 PC端键盘功能说明 键盘ESC隐藏十字线和tooltip, 键
HQChart实战教程6-自定义分时图
小银
02-04 3683
HQChart实战教程6-自定义分时图分时图要求具体步骤步骤1(自定义品种后缀)步骤2(定义交易区间段）步骤3(定义X轴分割线)步骤4 （替换自定义品种接口函数）步骤5 （接口数据）完整代码 分时图 hqchart分时图是根据不品种，内置定义不同的交易时间段。 对于hqchart不包含的品种需要自己定义它的交易时间段和X轴刻度显示 要求 假设 XXYY品种交易时间段如下 8:00 -10:00 ,...
HQChart分时图(Vue)
09-13
股票实时分时图对接样例, VUE2版本. npm run dev 启动
HQChart使用教程52- 自定义手机端K线图Tooltip
小银
01-03 2466
HQChart使用教程52- 自定义手机端K线图Tooltip内置Tooltip类创建自定义tooltip类挂接自定义类到hqchart简单的实现下CustomTooltip 内置Tooltip类 hqchart 内置一个tooltip类KLineTooltipPaint， 如果不能满足你的输出格式要求，可以通过外部派生这个类，来改写 创建自定义tooltip类 function CustomTo...
HQChart5日分时图(Vue)
09-14
股票实时5日分时图对接样例, VUE2版本 npm run dev 启动
Highcharts翻译系列之十六：tooltip工具提示
Transform
03-27 8627
Highcharts翻译系列之十六：tooltip工具提示 tooltip工具提示   参数 描述 默认值 animation 启用或禁用提示的动画。这对大数据量的图表很有用 true backgroundColor 提示的背景色或者渐变色 rgba(255 255,  255,
HQChart实战教程21 - unapp app端分时图定制tooltip
小银
09-18 989
HQChart实战教程21 - unapp app端分时图定制tooltip序效果步骤1. 创建一个外部tooltip的view2. 注册标题绘制事件3. 标题绘制回调函数格式说明eventdataobjtooltip显示函数完整代码HQChart代码地址 序 hqchart分时图是不带tooltip， 如果我们需要在app端显示tooltip，我们可以通过注册绘制标题事件，来自己做一个div显示数据。 参考教程HQChart实战教程7-自定义显示手势点击K线显示信息 效果 步骤 1. 创建一个外部too
HQChart实战教程68-自定义分时图PC端tooltip显示数据
小银
11-02 397
hqchartPC端内置一个tooltip，显示十字光标所在分钟线的信息。默认显示 日期，时间，价格，均价，涨幅，成交量，成交金额。如果要额外显示其他的字段，就需要通过替换格式化标题输出函数来是现实。返回 AryText:[ { Text:文字, TextColor:颜色， Title:标题, TitleColor:标题颜色 }，…我们在hqchart实例创建完成以后,通过OnCreatedCallback回调函数替换自己的格式化输出函数。数据结构见 MinuteData()
HQChart实战教程65-自定义手机端分时图tooltip显示数据
小银
06-21 592
hqchart手机端内置一个tooltip，显示手势所在K线的信息。默认显示 日期，时间，价格，均价，涨幅，成交量，成交金额。如果要额外显示其他的字段，就需要通过替换格式化标题输出函数来是现实。返回 { AryText:[ { Text:文字, Color:颜色， Title:标题, TitleColor:标题颜色 }，…我们在hqchart实例创建完成以后,通过OnCreatedCallback回调函数替换自己的格式化输出函数。入参 data={ Data: 当前十字光标所在位置的K线 }
HQChart使用教程55- 自定义PC端K线图Tooltip
小银
02-22 1908
HQChart使用教程55- 自定义PC端K线图Tooltip效果图PC端Tooltiptooltip css数据输出格式化类类成员变量this.Valuethis.Textthis.Symbolthis.LineCountthis.Widththis.LanguageID成员函数this.Operator挂接自己的tooltip格式化类完整示例 效果图 在原来tooltip增加一列数据 PC端...
HQChart实战教程64-自定义分时图标题栏
小银
06-21 504
分时图标题栏显示的是当前十字光标所在位置的分钟信息，显示在分时图窗口顶部。一般会显示品种的名称，日期，时间，价格，均价 涨幅，成交量，金额等等，hqchart内置会显示这些信息。如果要额外显示其他的字段，就需要通过替换格式化标题输出函数来是现实。我们在hqchart实例创建完成以后,通过OnCreatedCallback回调函数替换自己的格式化输出函数。返回 { AryText:[ { Text:文字, Color:颜色}，…入参 data={ Data: 当前十字光标所在位置的分钟线 }
HQChart实战教程5-http+ws对接单日分时图数据
小银
01-14 1796
HQChart实战教程5-http+ws对接单日分时图数据要求流程图数据格式样例 要求 http下载当天所有分时线数据 ws更新最新的分时数据 流程图 数据格式 分时数据使用 下面1个格式的数据 HQChart使用教程29-走势图如何对接第3方数据2-最新分时数据 样例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/...
HQChart使用教程78-分时图集合竞价
小银
05-08 2438
HQChart使用教程78-分时图集合竞价集合竞价集合竞价显示样式HQChart集合竞价集合竞价显示控制初始化控制BeforeOpenAfterClose接口控制ShowCallAuctionData参数说明UI说明双击放大/缩小集合竞价说明交流QQ群: 950092318HQChart代码地址 集合竞价 集合竞价是指对一段时间内接收的买卖申报一次性集中撮合的竞价方式. 2006年7月1日，深沪证券交易所实施开放式集合竞价。即：在集合竞价期间，即时行情实时揭示集合竞价参考价格。沪深开放式集合竞价时间为9点1
HQChart使用教程7- 如何快速创建一个分时图页面
小银
05-18 5366
如何快速创建一个分时图页面demo页面代码Option的配置项说明HQChart代码地址 效果图 demo页面代码 git下载代码 在webhqchart.demo\demo 目录下创建一个test2.html文件，拷贝下面代码, 分时图就完成。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w...
HQChart实战教程22 - PC端定制区间选择菜单
小银
10-03 697
HQChart实战教程22 - PC端定制区间选择菜单区间选择开启/禁用区间选择功能区间选择启动变量注册区间选择事件注册事件触发的回调函数格式关闭内置区间选中菜单鼠标点击事件其他交流QQ群示例源码HQChart代码地址 区间选择 hqchart内置区间选择菜单，和区间统计框，如果需要定制可以通过外部事件接口替换。 开启/禁用区间选择功能 默认使用鼠标左右拖拽是用来拖拽数据， 开始区间选择功能以后，左右拖拽就变成区间选择。 区间选择启动变量 DragMode 拖拽模式 0 = 禁止拖拽 1 = 数据拖拽 2
HQChart小程序教程3-新版2D单画布如何切换K线图和分时图
小银
09-03 2011
HQChart小程序教程3-新版2D单画布如何切换K线图和分时图K线图和分时图图形切换流程图代码讲解K线周期切换创建K线图步骤配色修改HQChart代码地址完整示例代码wxmlwxssjs K线图和分时图 传统的一般会使用2个画布来显示，当一个画布显示的时候，另外一个画布就隐藏掉。 本教程是另外一个思路，使用一个画布来动态显示K线图和分时图，这样可以节省资源，但在切换的时候需要重新创建图形和下载数据，会慢一点。 如是使用2D画布详见教程HQChart小程序教程2-如何使用新版2D画布创建一个K线图 图形切换
HQChart使用教程25- 叠加多个品种设置
小银
08-08 1861
多语言设置效果图叠加品种功能介绍SetOption配置叠加品种动态设置叠加品种设置OverlaySymbol(symbol,option)DeleteOverlaySymbol(symbol)ClearOverlaySymbol() 效果图 K线图 走势图 多日走势图 叠加品种功能介绍 在K线图中我们需要通过叠加其他的股票或指数来比较2者在一段时间内的增长速度， 基于这个需求，如果只是把2个品...
show-overflow-tooltip和show-tooltip-when-overflow的区别
最新发布
12-13
根据提供的引用内容，show-overflow-tooltip和show-tooltip-when-overflow都是用于处理内容溢出的情况，但它们之间有一些区别。 show-overflow-tooltip是一个属性，用于在内容溢出时以tooltip的形式显示文本。它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

HQChart

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

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

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

打赏作者

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

抵扣说明：

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

余额充值