讲师中心 微信公众号
AI工具推荐 视频效率加速

Highcharts 中为多维数据系列自定义 Tooltip 标签的正确用法

轻强大大_9276

轻强大大_9276

发布时间:2026-01-30 15:09:12

|

751人浏览过

|

来源于php中文网

原创

Highcharts 中为多维数据系列自定义 Tooltip 标签的正确用法

本文详解如何在 highcharts/highstock 中为包含时间、数值及附加差值(如 `value2`)的三维数据点(`[x, y, value2]`)在 tooltip 中准确显示 `value2`,关键在于理解 `pointformatter` 中 `this` 的上下文并正确索引原始数据。

在使用 Highcharts 或 Highstock 绘制多指标金融图表(如股价 + EMA)时,常需在 tooltip 中同时展示主值、计算值(如百分比变化)以及数据库中预存的辅助字段(例如 value2,代表与前一周期的差值)。你提供的数据格式为 [timestamp, value, value2],但原代码中 this.series.userOptions.data[this.point.index][1] 报错或取值异常,根本原因在于:在 pointFormatter 回调函数中,this 指向的是当前数据点(Point 对象),而非事件对象——因此 this.point 是无效属性,应直接使用 this.index 访问其在系列中的位置。

✅ 正确写法如下(已适配你的双系列结构):

tooltip: {
  style: { fontSize: '18px' },
  pointFormatter: function() {
    const series = this.series.chart.series;
    const emaPoint = series[1].points[this.index]; // 获取同时间点的EMA值(假设EMA是series[1])
    const percentage = Highcharts.numberFormat(
      (this.y / emaPoint.y) * 100,
      2
    );

    // ✅ 正确提取原始三维数据中的 value2(即第2个索引项,数组下标为2)
    const value2 = this.series.userOptions.data[this.index][2];

    return `<span style="color:${this.color}">●</span> ` +
           `${this.series.name}: <b>${Highcharts.numberFormat(this.y, 2)}</b><br/>` +
           `vs EMA: ${percentage}%<br/>` +
           `Δ from prev: ${Highcharts.numberFormat(value2, 3)}`;
  }
}

? 关键要点说明:

  • this.index 是当前点在其所属系列中的数组索引(从 0 开始),可安全用于访问 userOptions.data;
  • this.series.userOptions.data 是你传入的原始 JavaScript 数组(如 [[1609459200000, 123.45, -0.72], ...]),因此 data[i][2] 即为 value2;
  • 若需跨系列读取 value2(例如两个系列共享同一 value2),建议确保两数组中相同 index 位置的 value2 值一致(如你示例中 $dadesborsa 和 $dadesema 均含 $diferencia);
  • 避免在 pointFormatter 中执行复杂计算或异步操作,保持轻量以保障 tooltip 响应性能。

? 进阶建议:
若后续需更灵活地绑定元数据(如 value2、单位、状态标识等),推荐改用 data 的对象格式(而非数组):

// PHP 端生成(注意 JSON 编码防 XSS)
$dadesborsa[] = json_encode([
  'x' => $databorsa,
  'y' => $valorborsa,
  'value2' => $diferencia,
  'customLabel' => "Diff: {$diferencia}"
]);

前端则可直接访问 this.value2 或 this.options.customLabel,语义更清晰、容错性更强。

通过修正 this.index 的使用并明确数据维度含义,即可稳定、精准地在 tooltip 中呈现业务所需的全部维度信息。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

相关专题

更多
数据库三范式
数据库三范式

数据库三范式是一种设计规范,用于规范化关系型数据库中的数据结构,它通过消除冗余数据、提高数据库性能和数据一致性,提供了一种有效的数据库设计方法。本专题提供数据库三范式相关的文章、下载和课程。

2805

2023.06.29

如何删除数据库
如何删除数据库

删除数据库是指在MySQL中完全移除一个数据库及其所包含的所有数据和结构,作用包括:1、释放存储空间;2、确保数据的安全性;3、提高数据库的整体性能,加速查询和操作的执行速度。尽管删除数据库具有一些好处,但在执行任何删除操作之前,务必谨慎操作,并备份重要的数据。删除数据库将永久性地删除所有相关数据和结构,无法回滚。

4001

2023.08.14

vb怎么连接数据库
vb怎么连接数据库

在VB中,连接数据库通常使用ADO(ActiveX 数据对象)或 DAO(Data Access Objects)这两个技术来实现:1、引入ADO库;2、创建ADO连接对象;3、配置连接字符串;4、打开连接;5、执行SQL语句;6、处理查询结果;7、关闭连接即可。

3111

2023.08.31

MySQL恢复数据库
MySQL恢复数据库

MySQL恢复数据库的方法有使用物理备份恢复、使用逻辑备份恢复、使用二进制日志恢复和使用数据库复制进行恢复等。本专题为大家提供MySQL数据库相关的文章、下载、课程内容,供大家免费下载体验。

987

2023.09.05

vb中怎么连接access数据库
vb中怎么连接access数据库

vb中连接access数据库的步骤包括引用必要的命名空间、创建连接字符串、创建连接对象、打开连接、执行SQL语句和关闭连接。本专题为大家提供连接access数据库相关的文章、下载、课程内容,供大家免费下载体验。

2727

2023.10.09

数据库对象名无效怎么解决
数据库对象名无效怎么解决

数据库对象名无效解决办法:1、检查使用的对象名是否正确,确保没有拼写错误;2、检查数据库中是否已存在具有相同名称的对象,如果是,请更改对象名为一个不同的名称,然后重新创建;3、确保在连接数据库时使用了正确的用户名、密码和数据库名称;4、尝试重启数据库服务,然后再次尝试创建或使用对象;5、尝试更新驱动程序,然后再次尝试创建或使用对象。

2727

2023.10.16

vb连接access数据库的方法
vb连接access数据库的方法

vb连接access数据库方法:1、使用ADO连接,首先导入System.Data.OleDb模块,然后定义一个连接字符串,接着创建一个OleDbConnection对象并使用Open() 方法打开连接;2、使用DAO连接,首先导入 Microsoft.Jet.OLEDB模块,然后定义一个连接字符串,接着创建一个JetConnection对象并使用Open()方法打开连接即可。

2913

2023.10.16

vb连接数据库的方法
vb连接数据库的方法

vb连接数据库的方法有使用ADO对象库、使用OLEDB数据提供程序、使用ODBC数据源等。详细介绍:1、使用ADO对象库方法,ADO是一种用于访问数据库的COM组件,可以通过ADO连接数据库并执行SQL语句。可以使用ADODB.Connection对象来建立与数据库的连接,然后使用ADODB.Recordset对象来执行查询和操作数据;2、使用OLEDB数据提供程序方法等等。

2541

2023.10.19

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

20

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
墨刀帮助中心
墨刀帮助中心

共0课时 | 0人学习

MyEclipse学习中心
MyEclipse学习中心

共0课时 | 0人学习

Apache Subversion 官方手册
Apache Subversion 官方手册

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn