HQChart实战教程20 - PC端K线图定制tooltip

已于 2024-07-16 14:08:24 修改
阅读量863 收藏
点赞数
分类专栏： hqchart高级应用教程 文章标签： hqchart kline K线图 量化
于 2020-09-17 12:41:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jones2000/article/details/108639960
版权
hqchart高级应用教程 专栏收录该内容
27 篇文章 166 订阅 ¥299.90 ¥99.00
订阅专栏

HQChart实战教程20 - PC端K线图定制tooltip

序

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

效果

在这里插入图片描述

PC端键盘功能说明

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

步骤

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

<div>
    <div id="kline" ref='kline'
了解本专栏 订阅专栏 解锁全文
HQChart
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
HQChart实战教程19 - PC端分时图定制tooltip
小银
09-17 1497
HQChart实战教程19 - PC端分时图定制tooltip序效果步骤1. 创建一个外部tooltip的div2. 注册标题绘制事件3. 标题绘制回调函数格式说明eventdataobjtooltip显示函数HQChart代码地址 序 hqchart分时图是不带tooltip， 如果我们需要在PC端页面显示tooltip，我们可以通过注册绘制标题事件，来自己做一个div显示数据。 参考教程HQChart实战教程7-自定义显示手势点击K线显示信息 效果 步骤 1. 创建一个外部tooltip的div 在外
HQChart实战教程22 - PC端定制区间选择菜单
小银
10-03 665
HQChart实战教程22 - PC端定制区间选择菜单区间选择开启/禁用区间选择功能区间选择启动变量注册区间选择事件注册事件触发的回调函数格式关闭内置区间选中菜单鼠标点击事件其他交流QQ群示例源码HQChart代码地址 区间选择 hqchart内置区间选择菜单，和区间统计框，如果需要定制可以通过外部事件接口替换。 开启/禁用区间选择功能 默认使用鼠标左右拖拽是用来拖拽数据， 开始区间选择功能以后，左右拖拽就变成区间选择。 区间选择启动变量 DragMode 拖拽模式 0 = 禁止拖拽 1 = 数据拖拽 2
HQChart使用教程55- 自定义PC端K线图Tooltip
小银
02-22 1834
HQChart使用教程55- 自定义PC端K线图Tooltip效果图PC端Tooltiptooltip css数据输出格式化类类成员变量this.Valuethis.Textthis.Symbolthis.LineCountthis.Widththis.LanguageID成员函数this.Operator挂接自己的tooltip格式化类完整示例 效果图 在原来tooltip增加一列数据 PC端...
HQChart使用教程52- 自定义手机端K线图Tooltip
小银
01-03 2391
HQChart使用教程52- 自定义手机端K线图Tooltip内置Tooltip类创建自定义tooltip类挂接自定义类到hqchart简单的实现下CustomTooltip 内置Tooltip类 hqchart 内置一个tooltip类KLineTooltipPaint， 如果不能满足你的输出格式要求，可以通过外部派生这个类，来改写 创建自定义tooltip类 function CustomTo...
HQChart使用教程25- 叠加多个品种设置
小银
08-08 1779
多语言设置效果图叠加品种功能介绍SetOption配置叠加品种动态设置叠加品种设置OverlaySymbol(symbol,option)DeleteOverlaySymbol(symbol)ClearOverlaySymbol() 效果图 K线图 走势图 多日走势图 叠加品种功能介绍 在K线图中我们需要通过叠加其他的股票或指数来比较2者在一段时间内的增长速度， 基于这个需求，如果只是把2个品...
demo-Highcharts-Gantt甘特图tooltip内容过长自动换行
05-06
Highcharts-Gantt甘特图tooltip内容过长自动换行
SVG绘制K线图
06-03
highstock实现K线图绘制，实现功能如下： 1.根据用户选择的时间区间，显示最高价和最低价。 2.点击最高价或最低价的flags会显示出相应的时间。 3.动态改变X轴时间显示格式（%Y %Y-%m %m-%d），防止样式重叠在一起...
C#MVC echart k线图实例
01-15
ECharts提供了丰富的自定义选项来定制K线图。在`option`对象中，我们可以定义`series`，并指定`type`为`candlestick`，然后配置`itemStyle`来改变颜色。以下是一个示例： ```javascript var option = { tooltip: {...
v-tooltip:Vue 3的工具提示
03-20
v工具提示 Vue 3工具提示自定义指令目录安装将tooltip.js粘贴到您的src文件夹中，为了清楚起见，我亲自在其中创建了文件夹directives 。下一步是将tooltip.css粘贴到assets文件夹中。拥有所有文件后，打开main.js...
利用ECharts.js画K线图的方法示例
10-18
ECharts.js是一款由百度开发的基于JavaScript的开源可视化图表库，它支持丰富的图表类型，包括折线图、柱状图、饼图、散点图、K线图等，且能够很好地适应PC和移动设备。在金融领域，K线图（也称为蜡烛图或阴阳线）是...
HQChart使用教程8- 如何快速创建一个横屏分时图页面
小银
05-22 1580
如何快速创建一个横屏分时图页面demo页面代码Option的配置项说明HQChart代码地址 效果图 这个页面是x,y 对调画在画布上，不依赖于手机是否横屏状态， 一般用在app中，需要app中禁止横屏。只支持手机端 demo页面代码 git下载代码 在webhqchart.demo\demo 目录下创建一个test2.html文件，拷贝下面代码, 分时图就完成。 <!DOCTYPE ht...
HQChart使用教程4- 如何自定义K线图颜色风格
小银
05-17 1万+
如何自定义K线图颜色风格切换整体风格函数 前几章教程 我们都使用了白色风格的K线图，可能有的小伙伴需要黑色风格或自定义颜色风格， 下面我以切换到黑色风格为例子。 效果图 切换整体风格函数 JSChart.SetStyle(blackStyle) 这个类静态函数是用来控制全局颜色配置 ......
HQChart使用教程10- 手机端页面设置的几个特殊属性
小银
06-01 3081
HQChart使用教程9- 手机端页面设置的几个特殊属性序手机端K线Tooltip显示十字光标移动只能在K线上移动手离开屏幕十字光标自动隐藏HQChart代码地址 序 HQChart刚开始是一个PC端（c++)行情终端移植到PC端(js)页面平台上， 所以对于手机端一些特殊的功能，刚开始是参照PC端做的。 在交流群里大家提了很多移动端的宝贵意见，我们针对这些意见 单独给移动端增加了一些属性设置。 ...
HQChart使用教程13-5分钟完成一个小程序K线图
小银
06-11 5973
HQChart使用教程13-5分钟完成一个小程序K线图效果图下载HQChart组件配置 WXML配置页面js文件HQChart代码地址 效果图 下载HQChart组件 https://github.com/jones2000/HQChart 把 \trunk\wechathqchart 目录拷贝到小程序项目的目录里面。 配置 WXML 新建一个小程序页面， 在WXML里面增加一个’canvas...
HQChart使用教程1- 如何快速创建一个K线图页面
热门推荐
小银
05-16 3万+
快速创建一个K线图页面HQChart介绍demo页面代码Option的配置项说明 效果图 HQChart介绍 功能: 提供K线，走势图， 支持通达信语法指标（麦语法), 画图工具，等等… 支持PC端页面， 小程序，手机端页面。 地址：https://github.com/jones2000/HQChart demo页面代码 git下载代码 在webhqchart.demo\demo 目录下创建一......
用mplfinance库定制A股常用的K线、均线图
zorchp
04-05 2万+
使用目前最新的mplfinance库定制股票的K线图及均线图，符合国人习惯（红涨绿跌），代码以及注释。
HQChart使用教程19-基于HQChart的后台单股票指标计算服务
小银
07-19 2324
基于HQChart的后台单股票指标计算服务应用场景改造HQChart后台请求出来类 （JSIndexController）使用restify建立一个apiweb服务制作docker镜像HQChart代码地址 应用场景 最近在提供数据api的时候，有客户提出需要k线指标， 如MA ,RSI 等，我给出的方案是前端本地计算。但这样会影响整个产品的开发进度，加重前端的开发量。于是我打算把HQChart部...
HQChart使用教程18- K线截图
小银
07-13 1451
K线截图应用场景demo导出图片函数说明导出图片格式部分样例代码HQChart代码地址 应用场景 用户分享或保存自己的技术指标图或使用画图工具绘制图。 一般可以使用第3放截图工具完成。HQChart自带导出功能， 直接可以把当前的K线图导出为base64的图片。 注：HQChart是绘制在一个画布上，所以截图功能很容易实现（调用toDataURL), 如果你的构架是基于多个画布渲染，就需要自己合并...
echarts k线图 tooltip内容更改
最新发布
01-20
在Echarts中，可以通过设置tooltip的formatter属性来更改K线图的tooltip内容。具体步骤如下： 1. 在Echarts的option配置中，找到tooltip属性。 2. 在tooltip属性中，设置formatter属性为一个函数，该函数接收参数params，表示当前的tooltip数据。 3. 在函数中，可以根据params中的数据自定义tooltip的内容，然后返回一个字符串作为tooltip的显示内容。 以下是一个示例代码，演示如何更改K线图的tooltip内容： ```javascript option = { // 其他配置项... tooltip: { formatter: function(params) { // 自定义tooltip的内容 var data = params[0].data; // 获取当前K线图的数据 var open = data[1]; // 开盘价 var close = data[2]; // 收盘价 var high = data[3]; // 最高价 var low = data[4]; // 最低价 return '开盘价：' + open + '<br>' + '收盘价：' + close + '<br>' + '最高价：' + high + '<br>' + '最低价：' + low; } }, // 其他配置项... }; ``` 在上述代码中，我们通过params参数获取了当前K线图的数据，然后根据需要自定义了tooltip的内容，最后将自定义的内容作为字符串返回。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

HQChart

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

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

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

打赏作者

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

抵扣说明：

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

余额充值