HQChart实战教程64-自定义分时图标题栏

最新推荐文章于 2024-02-18 22:55:38 发布
最新推荐文章于 2024-02-18 22:55:38 发布
阅读量623 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： hqchart高级应用教程2 文章标签： HQChart 走势图 股票 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jones2000/article/details/131319341
本文介绍了如何在HQChart中自定义分时图标题栏，包括替换默认格式化输出函数，展示自定义内容。教程详细解释了步骤，包括设置自定义格式的函数GetFormatTitle()，该函数接收当前十字光标位置的分钟线数据，并返回包含文字和颜色的数组。注意，标题栏只支持一行显示，超出部分将被截断。提供了HQChart插件源码地址及交流方式。

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

HQChart实战教程64-自定义分时图标题栏

分时图标题栏

在这里插入图片描述
分时图标题栏显示的是当前十字光标所在位置的分钟信息，显示在分时图窗口顶部。一般会显示品种的名称，日期，时间，价格，均价 涨幅，成交量，金额等等，hqchart内置会显示这些信息。如果要额外显示其他的字段，就需要通过替换格式化标题输出函数来是现实。
下图是一个自定义格式输出标题栏的效果图

在这里插入图片描述

注意：标题栏只支持1行，如果长度超过分时图窗口的宽度，超过的字段就不显示了。

步骤

1. 替换分时图标题格式化输出函数

我们在hqchart实例创建完成以后,通过OnCreatedCallback回调函数替换自己的格式化输出函数

this.
了解本专栏 订阅专栏 解锁全文
HQChart实战教程74-自定义指标标题栏
小银
07-17 782
指标标题栏显示的是当前十字光标所在位置的指标输出的线段或柱子的信息，显示在指标窗口顶上。一般显示一个图形一组数据，如果要自定义输出数据的格式，就需要通过替换格式化标题输出函数来是现实。Index:指标数据索引， 一个指标可以输出多条线段数据，这个索引是对应当前是输出条线段的。下图是一个自定义格式输出标题栏的效果图 (输出线段的名称和数据使用不同的颜色显示）DataIndex:十字光标对应的数据索引。Item: 当前输出线段的信息。，如何注册监听事件见教程。FrameID 窗口索引。
HQChart实战教程50-自定义指标栏工具按钮
小银
02-15 1234
HQChart实战教程50-自定义指标栏工具按钮指标栏工具按钮自定义按钮步骤自定义按钮结构添加按钮清空自定义按钮交流QQ群: 950092318HQChart代码地址完整例子 指标栏工具按钮 每个指标窗口上面的右边部分是用来放按钮的， 只能是有切换指标，关闭窗口，修改参数，叠加指标4个按钮，如下图。 也可以增加自己的自定义按钮. 自定义按钮步骤 每个指标窗口都有一个自定义按钮数组CustomToolbar[]. 往里添加按钮项就可以。 自定义按钮结构 [ { ID:按钮id （注意H
HQChart分时图(Vue)
09-13
股票实时分时图对接样例, VUE2版本. npm run dev 启动
HQChart5日分时图(Vue)
09-14
股票实时5日分时图对接样例, VUE2版本 npm run dev 启动
HQChart使用教程80-自定义指标标题信息
小银
06-11 2253
HQChart使用教程80-自定义指标标题信息指标标题demo地址自定义显示步骤关闭内置的指标标题显示注册指标信息回调事件回调事件参数说明eventdataobj完整demo代码交流QQ群: 950092318HQChart代码地址 指标标题 显示当前指标及十字光标所在位置的指标数据. 内置是使用画布画上去的. HQChart也支持外部自定义一个div来显示内容 demo地址 https://opensource2.zealink.com/hqweb/demo/demo_indextitle.html
HQChart实战教程6-自定义分时图
小银
02-04 4280
HQChart实战教程6-自定义分时图分时图要求具体步骤步骤1(自定义品种后缀)步骤2(定义交易区间段）步骤3(定义X轴分割线)步骤4 （替换自定义品种接口函数）步骤5 （接口数据）完整代码 分时图 hqchart分时图是根据不品种，内置定义不同的交易时间段。 对于hqchart不包含的品种需要自己定义它的交易时间段和X轴刻度显示 要求 假设 XXYY品种交易时间段如下 8:00 -10:00 ,...
HQChart实战教程1-外汇分时图
小银
11-26 3255
HQChart实战教程1-外汇分时图需求HQChart需要的数据品种代码网络协议名字网络协议回调分时数据下载当天全量数据下载全量数据转hqchart格式增量数据更新下载增量数据更新到hqchart自动更新频率控制 需求 对接第3方外汇数据， 显示外汇分时图, 注意这种分时图是固定时间段的， 是不能左右拖动的。如果要左右拖动的使用K线面积图来做。 第3方数据，接触下来， 一般好像没有当日分时的API...
HQChart实战教程69-分时图主图如何设置指标
最新发布
小银
02-18 650
分时图主图显示指标
HQChart使用教程78-分时图集合竞价
小银
05-08 2956
HQChart使用教程78-分时图集合竞价集合竞价集合竞价显示样式HQChart集合竞价集合竞价显示控制初始化控制BeforeOpenAfterClose接口控制ShowCallAuctionData参数说明UI说明双击放大/缩小集合竞价说明交流QQ群: 950092318HQChart代码地址 集合竞价 集合竞价是指对一段时间内接收的买卖申报一次性集中撮合的竞价方式. 2006年7月1日，深沪证券交易所实施开放式集合竞价。即：在集合竞价期间，即时行情实时揭示集合竞价参考价格。沪深开放式集合竞价时间为9点1
HQChart实战教程19 - PC端分时图定制tooltip
小银
09-17 1907
HQChart实战教程19 - PC端分时图定制tooltip序效果步骤1. 创建一个外部tooltip的div2. 注册标题绘制事件3. 标题绘制回调函数格式说明eventdataobjtooltip显示函数HQChart代码地址 序 hqchart分时图是不带tooltip， 如果我们需要在PC端页面显示tooltip，我们可以通过注册绘制标题事件，来自己做一个div显示数据。 参考教程HQChart实战教程7-自定义显示手势点击K线显示信息 效果 步骤 1. 创建一个外部tooltip的div 在外
QChart 自定义图例位置title前添加图片
07-13
Qt使用QChart制作统计图图例由setAlignment()设置位置，但是项目需求中title和在同一行title前添加图标，重写时使用了QGraphicsView，QGraphicsScene进行嵌套（博客中有部分内容，下载前先看看是否是自己需要）
KLineChartSample:KLineChart示例代码
05-13
KLineChart样本 KLineChart（ ）示例代码。 包含多个前端框架版本。 跑步 React cd react-sample && npm install && npm run start Vue cd vue-sample && npm install && npm run start 角度的 cd ng-sample && npm install && npm run start 单应用 cd uniapp-sample && npm install && npm run serve 执照
HQChart实战教程5-http+ws对接单日分时图数据
小银
01-14 2000
HQChart实战教程5-http+ws对接单日分时图数据要求流程图数据格式样例 要求 http下载当天所有分时线数据 ws更新最新的分时数据 流程图 数据格式 分时数据使用 下面1个格式的数据 HQChart使用教程29-走势图如何对接第3方数据2-最新分时数据 样例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/...
HQChart实战教程65-自定义手机端分时图tooltip显示数据
小银
06-21 765
hqchart手机端内置一个tooltip，显示手势所在K线的信息。默认显示 日期，时间，价格，均价，涨幅，成交量，成交金额。如果要额外显示其他的字段，就需要通过替换格式化标题输出函数来是现实。返回 { AryText:[ { Text:文字, Color:颜色， Title:标题, TitleColor:标题颜色 }，…我们在hqchart实例创建完成以后,通过OnCreatedCallback回调函数替换自己的格式化输出函数。入参 data={ Data: 当前十字光标所在位置的K线 }
HQChart使用教程7- 如何快速创建一个分时图页面
小银
05-18 6069
如何快速创建一个分时图页面demo页面代码Option的配置项说明HQChart代码地址 效果图 demo页面代码 git下载代码 在webhqchart.demo\demo 目录下创建一个test2.html文件，拷贝下面代码, 分时图就完成。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w...
QChart设置坐标标题位置，设置不了！
程序员的幸福生活的博客
09-06 1267
如题，查了好多资料网上也没有人要改这个问题。本人才疏学浅，也没找到如何设置坐标标题位置。没找到这个函数。PS：QT5.9.8 所以兄弟们我们就拿个label去写一个标题，不用他的标题就完事了。 有人知道怎么整欢迎讨论。 ...
HQChart小程序教程3-新版2D单画布如何切换K线图和分时图
小银
09-03 2321
HQChart小程序教程3-新版2D单画布如何切换K线图和分时图K线图和分时图图形切换流程图代码讲解K线周期切换创建K线图步骤配色修改HQChart代码地址完整示例代码wxmlwxssjs K线图和分时图 传统的一般会使用2个画布来显示，当一个画布显示的时候，另外一个画布就隐藏掉。 本教程是另外一个思路，使用一个画布来动态显示K线图和分时图，这样可以节省资源，但在切换的时候需要重新创建图形和下载数据，会慢一点。 如是使用2D画布详见教程HQChart小程序教程2-如何使用新版2D画布创建一个K线图 图形切换
HQChart使用教程47-如何自定义右键菜单，已停用
小银
10-24 1408
HQChart使用教程47-如何自定义右键菜单步骤1. 注册事件2. 回调函数3.关闭HQChart右键菜单4. 右键操作 HQChart h5版本提供一个简陋的右键菜单， 主要是用来测试用的。 如果需要替换成自己的菜单，可以通过事件回调来截获右键菜单事件，然后弹出自己的菜单 步骤 1. 注册事件 通过AddEventCallback， 我们可以注册一个事件回调， chart.AddEventCa...
HQChart实战教程9-自定义A股分时图
小银
04-17 1953
HQChart实战教程9-自定义A股分时图A股分时图交易时间段步骤1. 替换hqchart内置A股交易时间段2. 替换hqchart内置的A股X轴显示信息3. 注意完整例子代码 A股分时图交易时间段 hqchart内置的A股分时图交易时间段为： 9：25， 9：30 - 11：30 ， 13：00 - 15：00 如果你的数据不是这个时间段就需要在外部自己定义好你的交易时间段 样例页面地址：dem...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

HQChart

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

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

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

打赏作者

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

抵扣说明：

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

余额充值