HQChart实战教程65-自定义手机端分时图tooltip显示数据

最新推荐文章于 2024-02-18 22:55:38 发布
最新推荐文章于 2024-02-18 22:55:38 发布
阅读量730 收藏 1
点赞数
分类专栏： hqchart高级应用教程2 文章标签： HQChart 股票 KLine 分时图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jones2000/article/details/131325837
版权
本文档介绍了如何在HQChart手机端分时图中自定义tooltip显示内容，包括配置手机端tooltip、替换k线tooltip的格式化输出函数，并提供了格式化输出函数的说明和示例效果。

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

HQChart实战教程65-自定义手机端分时图tooltip显示数据

手机端分时图tooltip

在这里插入图片描述
hqchart手机端内置一个tooltip，显示手势所在K线的信息。默认显示 日期，时间，价格，均价，涨幅，成交量，成交金额。如果要额外显示其他的字段，就需要通过替换格式化标题输出函数来是现实。
下图是一个自定义格式输出tooltip的效果图
在这里插入图片描述

步骤

1. 配置手机端tooltip

在setoption配置手机端tooltip.

//分时图配置信息
this.Option
了解本专栏 订阅专栏 解锁全文
HQChart实战教程19 - PC端分时图定制tooltip
小银
09-17 1847
HQChart实战教程19 - PC端分时图定制tooltip序效果步骤1. 创建一个外部tooltip的div2. 注册标题绘制事件3. 标题绘制回调函数格式说明eventdataobjtooltip显示函数HQChart代码地址 序 hqchart分时图是不带tooltip， 如果我们需要在PC端页面显示tooltip，我们可以通过注册绘制标题事件，来自己做一个div显示数据。 参考教程HQChart实战教程7-自定义显示手势点击K线显示信息 效果 步骤 1. 创建一个外部tooltip的div 在外
HQChart实战教程64-自定义分时图标题栏
小银
06-21 593
分时图标题栏显示的是当前十字光标所在位置的分钟信息，显示在分时图窗口顶部。一般会显示品种的名称，日期，时间，价格，均价 涨幅，成交量，金额等等，hqchart内置会显示这些信息。如果要额外显示其他的字段，就需要通过替换格式化标题输出函数来是现实。我们在hqchart实例创建完成以后,通过OnCreatedCallback回调函数替换自己的格式化输出函数。返回 { AryText:[ { Text:文字, Color:颜色}，…入参 data={ Data: 当前十字光标所在位置的分钟线 }
HQChart实战教程6-自定义分时图
小银
02-04 4152
HQChart实战教程6-自定义分时图分时图要求具体步骤步骤1(自定义品种后缀)步骤2(定义交易区间段）步骤3(定义X轴分割线)步骤4 （替换自定义品种接口函数）步骤5 （接口数据）完整代码 分时图 hqchart分时图是根据不品种，内置定义不同的交易时间段。 对于hqchart不包含的品种需要自己定义它的交易时间段和X轴刻度显示 要求 假设 XXYY品种交易时间段如下 8:00 -10:00 ,...
HQChart分时图(Vue)
09-13
股票实时分时图对接样例, VUE2版本. npm run dev 启动
HQChart5日分时图(Vue)
09-14
股票实时5日分时图对接样例, VUE2版本 npm run dev 启动
HQChart实战教程1-外汇分时图
小银
11-26 3150
HQChart实战教程1-外汇分时图需求HQChart需要的数据品种代码网络协议名字网络协议回调分时数据下载当天全量数据下载全量数据转hqchart格式增量数据更新下载增量数据更新到hqchart自动更新频率控制 需求 对接第3方外汇数据， 显示外汇分时图, 注意这种分时图是固定时间段的， 是不能左右拖动的。如果要左右拖动的使用K线面积图来做。 第3方数据，接触下来， 一般好像没有当日分时的API...
HQChart实战教程61-自定义十字星K线颜色
小银
05-08 794
十字星是一种K线基本型态。十字星，是一种只有上下影线，没有实体的K线图。开盘价即是收盘价，表示在交易中，股价出现高于或低于开盘价成交，但收盘价与开盘价相等。其中：上影线越长，表示卖压越重。下影线越长，表示买盘旺盛。通常在股价高位或低位出现十字线，可称为转机线，意味着出现反转。HQChart也支持自定义十字星颜色来满足其他需求。， 在绘制十字星前会触发这个事件。如果还有问题可以加交流QQ群: 950092318。HQChart提供外部自定义十字星的监听事件。一般十字星K线是固定一个颜色的， 如下图。
HQChart实战教程21 - unapp app端分时图定制tooltip
小银
09-18 1111
HQChart实战教程21 - unapp app端分时图定制tooltip序效果步骤1. 创建一个外部tooltip的view2. 注册标题绘制事件3. 标题绘制回调函数格式说明eventdataobjtooltip显示函数完整代码HQChart代码地址 序 hqchart分时图是不带tooltip， 如果我们需要在app端显示tooltip，我们可以通过注册绘制标题事件，来自己做一个div显示数据。 参考教程HQChart实战教程7-自定义显示手势点击K线显示信息 效果 步骤 1. 创建一个外部too
HQChart实战教程69-分时图主图如何设置指标
最新发布
小银
02-18 568
分时图主图显示指标
HQChart实战教程5-http+ws对接单日分时图数据
小银
01-14 1949
HQChart实战教程5-http+ws对接单日分时图数据要求流程图数据格式样例 要求 http下载当天所有分时线数据 ws更新最新的分时数据 流程图 数据格式 分时数据使用 下面1个格式的数据 HQChart使用教程29-走势图如何对接第3方数据2-最新分时数据 样例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/...
HQChart日K线图(Vue)
10-02
股票K线图对接第3放数据样例, VUE2版本，使用东方财富网页数据 npm run dev 启动
HQChart使用教程78-分时图集合竞价
小银
05-08 2791
HQChart使用教程78-分时图集合竞价集合竞价集合竞价显示样式HQChart集合竞价集合竞价显示控制初始化控制BeforeOpenAfterClose接口控制ShowCallAuctionData参数说明UI说明双击放大/缩小集合竞价说明交流QQ群: 950092318HQChart代码地址 集合竞价 集合竞价是指对一段时间内接收的买卖申报一次性集中撮合的竞价方式. 2006年7月1日，深沪证券交易所实施开放式集合竞价。即：在集合竞价期间，即时行情实时揭示集合竞价参考价格。沪深开放式集合竞价时间为9点1
HQChart使用教程7- 如何快速创建一个分时图页面
小银
05-18 5872
如何快速创建一个分时图页面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 2235
HQChart小程序教程3-新版2D单画布如何切换K线图和分时图K线图和分时图图形切换流程图代码讲解K线周期切换创建K线图步骤配色修改HQChart代码地址完整示例代码wxmlwxssjs K线图和分时图 传统的一般会使用2个画布来显示，当一个画布显示的时候，另外一个画布就隐藏掉。 本教程是另外一个思路，使用一个画布来动态显示K线图和分时图，这样可以节省资源，但在切换的时候需要重新创建图形和下载数据，会慢一点。 如是使用2D画布详见教程HQChart小程序教程2-如何使用新版2D画布创建一个K线图 图形切换
HQChart使用教程5- K线图控件操作函数说明
热门推荐
小银
05-17 1万+
HQChart图形操作接口API说明
关于Echarts的一些理解
m0_62883848的博客
04-20 2709
ECharts，缩写来自Enterprise Charts，一个纯JavaScript图表库。兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。支持你能见到的几乎所有图表类型。 Echarts的安装 1.如果你不会webpack/parcel，你可以直接在html引入cdn便可使用。 cdn查询网站链接 2.如果你会wevpack/parcel，你可以直接在项目中安装依赖包。具体步骤如下 yarn add echa
HQChart使用教程10- 手机端页面设置的几个特殊属性
小银
06-01 3436
在pc端页面tooltip我们使用div来实现的，显示在鼠标的位置上，手机端由于没有鼠标，我们采用统一显示在最左边的固定位置上，实现方式采用canves直接画上去， 不采用div方式，（这么做是为了兼容小程序，目前几大小程序平台都是不能创建dom， 所有如果使用div需要预先在外部把div创建好，这样会破坏我们的整个HQChart的独立性）, 在SetOption里设置如下属性就可以。移动端上我们增加了只能在K线上移动， 不允许X轴竖线画在K线柱子外面，如果当前手势点的位置不在K线上，取最近的一个K线。
Echarts图表移动端手机横屏展示
weixin_46364487的博客
08-06 8722
Echarts手机端横屏展示原理（uni-app） 1、将控制X轴、Y轴的配置内容相互调换，并配置好相关的旋转、展示的角度。 2、将Y轴设置反向坐标轴，图表的提示信息也进线相应角度的旋转。 废弃方案 直接将原来的图表组件外层套一层div，利用css的transform: rotate(90deg);进行一个旋转，达到横屏展示的目的。 不足情况：数据量少时可以进行正常展示，如果X轴数据量多时，echarts的滚动条生效位置会改变，影响用户使用。 实际案例需求： 在手机端图表需要点击横屏展示； X轴的数据刻度
Chart.js绘图，折线图、柱状图
weixin_34391854的博客
06-17 568
出处：http://jingyan.baidu.com/article/5d368d1ef536d43f60c0579f.html?st=2&os=0&bd_page_type=1&net_type=2 中文手册：http://www.bootcss.com/p/chart.js/docs/Chart.js绘图，折线图、柱状图先来看看我们即将要做的折线...
django-vue-admin 学习笔记 自定义插槽tooltip字符数据显示
02-02
最近我在学习django-vue-admin时遇到了一个问题，就是关于自定义插槽tooltip字符数据显示的。在默认情况下，tooltip只能显示简单的数据，无法满足我对复杂数据的显示需求。经过查阅文档和实践，我成功解决了这个问题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

HQChart

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

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

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

打赏作者

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

抵扣说明：

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

余额充值