HQChart实战教程69-分时图主图如何设置指标

已于 2024-02-18 23:03:18 修改
阅读量649 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： hqchart高级应用教程2 文章标签： HQChart K线图 走势图
于 2024-02-18 22:55:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jones2000/article/details/136160187
本文介绍了如何在HQChart中实现分时图主图的指标设置，包括显示指标、设置指标标题及切换不同指标的方法。通过叠加指标功能，可以在主图上展示多种技术指标，并在需要时进行切换。详细步骤包括调整主图标题栏高度以及在OnCreatedCallback回调事件中管理指标的添加与删除。

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

HQChart实战教程69-分时图主图如何设置指标

效果图

在主图窗口，显示指标，并显示指标标题。效果入下图

在这里插入图片描述
H5，小程序, uniapp 都支持。插件最新版本才支持此功能。

插件地址

https://www.npmjs.com/package/hqchart

uniapp插件地址

https://ext.dcloud.net.cn/plugin?id=4591

HQChart插件源码地址

https://github.com/jones2000/HQChart

实现步骤

1. 分时图主图指标

分时图主图默认只有价格线， 没有主图指标。如果需要在主图上显示指标，可以使用叠加指标的方式来实现。

了解本专栏 订阅专栏 解锁全文
HQChart实战教程19 - PC端分时图定制tooltip
小银
09-17 1903
HQChart实战教程19 - PC端分时图定制tooltip序效果步骤1. 创建一个外部tooltip的div2. 注册标题绘制事件3. 标题绘制回调函数格式说明eventdataobjtooltip显示函数HQChart代码地址 序 hqchart分时图是不带tooltip， 如果我们需要在PC端页面显示tooltip，我们可以通过注册绘制标题事件，来自己做一个div显示数据。 参考教程HQChart实战教程7-自定义显示手势点击K线显示信息 效果 步骤 1. 创建一个外部tooltip的div 在外
HQChart实战教程75-分时图回放
小银
07-25 378
HQChart通过把所有分时图数据下载到本地以后，使用定时器根据一定的步长进行回放。在加载分时图数据的时候，把数据在本地保存一份。函数，把分时数据设置到图形里面。， 定时把分时图数据给图形。
HQChart分时图(Vue)
09-13
股票实时分时图对接样例, VUE2版本. npm run dev 启动
HQChart5日分时图(Vue)
09-14
股票实时5日分时图对接样例, VUE2版本 npm run dev 启动
分时参考通达信公式 源码 K线图
最新发布
gupengzhibiao的博客
05-27 616
红灯亮买: STICKLINE(CROSS(VARC,VARD) AND VARC>VARD AND VARC<18,36,0,1,0), COLORRED;见红:IF(VARC>18,0,IF(CROSS(VARC,VARD) AND VARC>VARD AND VARC<18,37,0)),COLOR3355FF;浪尖: STICKLINE(CROSS(VARD,VARC) AND VARC<VARD AND VARC>60,90,100,12,1),COLORBLUE;
HQChart实战教程6-自定义分时图
小银
02-04 4277
HQChart实战教程6-自定义分时图分时图要求具体步骤步骤1(自定义品种后缀)步骤2(定义交易区间段）步骤3(定义X轴分割线)步骤4 （替换自定义品种接口函数）步骤5 （接口数据）完整代码 分时图 hqchart分时图是根据不品种，内置定义不同的交易时间段。 对于hqchart不包含的品种需要自己定义它的交易时间段和X轴刻度显示 要求 假设 XXYY品种交易时间段如下 8:00 -10:00 ,...
HQChart实战教程1-外汇分时图
小银
11-26 3254
HQChart实战教程1-外汇分时图需求HQChart需要的数据品种代码网络协议名字网络协议回调分时数据下载当天全量数据下载全量数据转hqchart格式增量数据更新下载增量数据更新到hqchart自动更新频率控制 需求 对接第3方外汇数据， 显示外汇分时图, 注意这种分时图是固定时间段的， 是不能左右拖动的。如果要左右拖动的使用K线面积图来做。 第3方数据，接触下来， 一般好像没有当日分时的API...
HQChart实战教程57-远程指标提示信息
小银
01-11 392
远程指标提示信息配置
HQChart实战教程64-自定义分时图标题栏
小银
06-21 621
分时图标题栏显示的是当前十字光标所在位置的分钟信息，显示在分时图窗口顶部。一般会显示品种的名称，日期，时间，价格，均价 涨幅，成交量，金额等等，hqchart内置会显示这些信息。如果要额外显示其他的字段，就需要通过替换格式化标题输出函数来是现实。我们在hqchart实例创建完成以后,通过OnCreatedCallback回调函数替换自己的格式化输出函数。返回 { AryText:[ { Text:文字, Color:颜色}，…入参 data={ Data: 当前十字光标所在位置的分钟线 }
HQChart实战教程5-http+ws对接单日分时图数据
小银
01-14 1999
HQChart实战教程5-http+ws对接单日分时图数据要求流程图数据格式样例 要求 http下载当天所有分时线数据 ws更新最新的分时数据 流程图 数据格式 分时数据使用 下面1个格式的数据 HQChart使用教程29-走势图如何对接第3方数据2-最新分时数据 样例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/...
HQChart使用教程78-分时图集合竞价
小银
05-08 2953
HQChart使用教程78-分时图集合竞价集合竞价集合竞价显示样式HQChart集合竞价集合竞价显示控制初始化控制BeforeOpenAfterClose接口控制ShowCallAuctionData参数说明UI说明双击放大/缩小集合竞价说明交流QQ群: 950092318HQChart代码地址 集合竞价 集合竞价是指对一段时间内接收的买卖申报一次性集中撮合的竞价方式. 2006年7月1日，深沪证券交易所实施开放式集合竞价。即：在集合竞价期间，即时行情实时揭示集合竞价参考价格。沪深开放式集合竞价时间为9点1
HQChart实战教程65-自定义手机端分时图tooltip显示数据
小银
06-21 764
hqchart手机端内置一个tooltip，显示手势所在K线的信息。默认显示 日期，时间，价格，均价，涨幅，成交量，成交金额。如果要额外显示其他的字段，就需要通过替换格式化标题输出函数来是现实。返回 { AryText:[ { Text:文字, Color:颜色， Title:标题, TitleColor:标题颜色 }，…我们在hqchart实例创建完成以后,通过OnCreatedCallback回调函数替换自己的格式化输出函数。入参 data={ Data: 当前十字光标所在位置的K线 }
HQChart使用教程7- 如何快速创建一个分时图页面
小银
05-18 6066
如何快速创建一个分时图页面demo页面代码Option的配置项说明HQChart代码地址 效果图 demo页面代码 git下载代码 在webhqchart.demo\demo 目录下创建一个test2.html文件，拷贝下面代码, 分时图就完成。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w...
HQChart小程序教程3-新版2D单画布如何切换K线图和分时图
小银
09-03 2319
HQChart小程序教程3-新版2D单画布如何切换K线图和分时图K线图和分时图图形切换流程图代码讲解K线周期切换创建K线图步骤配色修改HQChart代码地址完整示例代码wxmlwxssjs K线图和分时图 传统的一般会使用2个画布来显示，当一个画布显示的时候，另外一个画布就隐藏掉。 本教程是另外一个思路，使用一个画布来动态显示K线图和分时图，这样可以节省资源，但在切换的时候需要重新创建图形和下载数据，会慢一点。 如是使用2D画布详见教程HQChart小程序教程2-如何使用新版2D画布创建一个K线图 图形切换
HQChart实战教程73-仿tradingview指标MACD
小银
06-17 1053
把上面的指标添加到HQChart的系统指标里面，这样图形上就可以直接使用了。具体见教程HQChart使用教程28-如何创建系统指标。
HQChart使用教程25- 叠加多个品种设置
小银
08-08 2083
在K线图中我们需要通过叠加其他的股票或指数来比较2者在一段时间内的增长速度， 基于这个需求，如果只是把2个品种的K线数据展示出来不够的，需要把比较的品种在窗口显示的第1个数据需要重合，后续数据基于第1个数据的百分比来计算，这样就可以很容易的通过图形看出哪个品种走势更好。所以叠加品种了以后HQChart右边会自动调整为百分比刻度。叠加品种显示图形支持空心阳线实心阳线美国线收盘价线支持叠加数据tooltip显示（只有pc端支持)
HQChart使用教程49-指标配置项说明
小银
11-06 6657
HQChart使用教程49-指标配置项说明指标配置项1. 标题高度2. 标题输出格式3. 标题输出小数位数4. 空指标5 动态执行指标脚本6 系统指标带参数7 API 远程指标计算 简单的指标配置项请参看 HQChart使用教程1- 如何快速创建一个K线图页面 指标配置项 1. 标题高度 TitleHeight 当标题高度<5 就不会显示指标的标题 2. 标题输出格式 StringForm...
HQChart使用教程17- 多技术指标独立坐标叠加
小银
07-12 3427
多技术指标独立坐标叠加应用场景效果图部分页面代码配置参数说明动态添加和删除叠加接口HQChart代码地址 应用场景 有的时候我们需要在一个窗口里面显示多个指标，但每个指标的数值单位相差太大，这个时候我们就需要给每个指标分配一个独立的坐标 效果图 测试地址:https://opensource.zealink.com/hqweb/demo/phone22.html 部分页面代码 我们只需要在opt...
HQChart使用教程28-如何创建系统指标
小银
08-27 3009
如何创建系统指标什么是系统指标如何增加系统指标用例1 修改MA指标用例2 如何把pc端行情软件中的指标添加到系统指标 什么是系统指标 HQChart 内置100多个系统指标， 避免重复开发指标。常用MA,MACD,KDJ,KD, RSI 等都已经录入到系统指标中了，具体可以查看 umychart.index.data.js文件， 这个文件保存了HQChart所有系统指标. 如何增加系统指标 随者业...
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、付费专栏及课程。

余额充值