HQChart实战教程21 - uniapp app端K线图定制tooltip

最新推荐文章于 2025-03-26 15:50:54 发布
最新推荐文章于 2025-03-26 15:50:54 发布
阅读量2k 收藏 1
点赞数
分类专栏： hqchart高级应用教程 文章标签： hqchart kline K线图 量化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jones2000/article/details/108674679
版权
本教程介绍了如何在uniapp应用中使用HQChart自定义K线图的tooltip。通过注册标题绘制事件并在回调函数中更新数据，动态调整tooltip的位置和内容，展示股票的名称、时间、价格、成交量等信息。教程还提供了完整代码示例和相关注意事项。

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

HQChart实战教程21 - uniapp app端K线图定制tooltip

序

hqchartK线图内置一个tooltip， 如果需要定制一个tooltip, 我们可以通过注册绘制标题事件，来自己做一个div显示数据。
参考教程HQChart实战教程7-自定义显示手势点击K线显示信息

效果

在这里插入图片描述

步骤

在外部创建一个view，并在view里创建需要显示的信息字段. 例子里面显示 股票名字,时间，价格，成交量，关闭按钮，如果需要其他字段自己往里面加就可以了

<div>
    <div id=&
了解本专栏 订阅专栏 解锁全文
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实战教程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使用教程35 - 如何在uni-app创建K线图(h5)
小银
09-19 1万+
HQChart使用教程35 - 如何使用uni-app创建K线图插件目录创建步骤1. 创建一个空的uni-app 工程， 把umychart_uniapp_h5 目录拷贝到工程中。2. 创建一个page页 在page页中 import umychart.uniapp.h5.js3.在浏览器里运行效果图 插件目录 创建步骤 1. 创建一个空的uni-app 工程， 把umychart_uniapp...
uniapp：K线图，支持H5，APP
sunluyi的博客
04-28 3512
K线，1分钟搞定。备注详细，无需理解，直接复制即可。
【uniapp开发微信小程序，实现ECharts k线图右滑无感刷新】
最新发布
qq_40040585的博客
03-26 910
uniapp开发微信小程序 实现右滑无感刷新echarts的k线数据
Uniapp小程序集成ECharts的K线图并实现动态无感加载
weixin_40520455的博客
07-13 3203
Uniapp小程序集成ECharts的K线图并实现动态无感加载
uni-app(vue3.x版本) 实现k线图(kline) 支持h5/安卓/ios
qq_31432773的博客
02-15 227
注:因为uni-app 的app端是没有document的对象,且 <template>标签下 需要一个最大的标签包裹起来 不然会出现问题。(H5端着没有问题 可以参考:https://www.jianshu.com/p/869684c81e89 实现)config也配置好了,所有就没有使用插件市场的kline,接着使用klineChart。因为我之前用的kline是使用klineChart。所以绘制 uni-app 采用的是 renderjs。uni-app 的插件市场有。第三步 将容器变canvas。
HQChart使用教程37 - 如何在uni-app创建k线图(app)
热门推荐
小银
09-20 1万+
HQChart使用教程37 - 如何在uni-app创建k线图 app插件目录创建步骤1. 拷贝插件到工程中2. 创建一个page页 在page页中3.运行到模拟器注意事项 插件目录 创建步骤 1. 拷贝插件到工程中 创建一个空的uni-app 工程， 把wechathqchart 目录拷贝到工程中。 例子里 我建了一个hqchart.uniapp的目录， 把插件的文件拷贝到这个目录里 2. ...
uniapp使用HQChart的k线，用webSocket更新数据
空&白的博客
07-24 1541
项目：不借用HQChart的各种接口数据，即数据后端返回，但是数据格式要和原数据格式一样。
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实战教程30-A股日K线数据对接-uniapp版本
小银
01-25 1649
HQChart实战教程30-A股日K线数据对接-uniapp版本日线数据对接预备知识创建K线图教程步骤1. HQChart数据回调函数部分代码2. 全量数据对接部分代码3. 增量数据更新部分代码4. 流通股本数据部分代码交流QQ群: 950092318HQChart代码地址完整demo代码1. index.vue2. 600000_day.js 日线数据对接预备知识 HQChart使用教程30-K线图如何对接第3方数据1 HQChart使用教程30-K线图如何对接第3方数据2-日K数据 HQChart使用
uniapp-echarts.rar
07-02
uni-app使用echarts--h5端--可以实现地图下钻
uniapp-vue2微信小程序使用echarts图表
weixin_52830464的博客
05-28 665
【代码】uniapp微信小程序引入echartsK线图。
uniapp-vue2使用echarts图表-兼容H5和App
weixin_52830464的博客
05-28 830
【代码】uniapp在H5和App引入echarts。
HQChart--uniApp v3 中使用 render.js
qq_20964509的博客
06-15 1997
HQChart--uniApp v3 中使用 render.js前言代码使用 前言 由于uniApp 官方升级了v3编译器，升级后不知道为什么会导致官方提供的画图工具变得特别慢~也就是卡，导致之前写的 HQChart用的页面打开特别卡，所有使用render.js可以大幅度提升流畅度。 使用前要看看这个：renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。 uniapp插件市场hqchart地址 要用到里面的 umychart.uniapp.h5.js 文件 将其放在
uniapp中使用ucharts进行自定义tooltip（实现换行，改变字体颜色）
2301_76742166的博客
02-05 3385
uniapp中使用ucharts进行自定义tooltip（实现换行，改变字体颜色）
Uni-app小程序里使用echarts
weixin_59306092的博客
05-11 2535
继上次的文章,微信小程序中使用echarts,这次我要来分享一下(业务需求,不得不在uni小程序上写echarts)
HQChart使用教程52- 自定义手机端K线图Tooltip
小银
01-03 2662
/派生再setoption里面我可以配置一个外部tooltip创建方法，来替换内置的tooltip.//K线配置信息Type:'历史K线图', //创建图形类型.......ExtendChart: //扩展图形} } //手机端tooltip],这样创建tooltip的时候，就会创建外部的CustomTooltip类了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

HQChart

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

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

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

打赏作者

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

抵扣说明：

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

余额充值