0

0

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

心靈之曲

心靈之曲

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

|

731人浏览过

|

来源于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 ` ` +
           `${this.series.name}: ${Highcharts.numberFormat(this.y, 2)}
` + `vs EMA: ${percentage}%
` + `Δ from prev: ${Highcharts.numberFormat(value2, 3)}`; } }

? 关键要点说明:

腾讯云AI代码助手
腾讯云AI代码助手

基于混元代码大模型的AI辅助编码工具

下载
  • 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助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

359

2023.06.29

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

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

2082

2023.08.14

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

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

349

2023.08.31

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

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

256

2023.09.05

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

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

326

2023.10.09

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

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

412

2023.10.16

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

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

411

2023.10.16

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

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

223

2023.10.19

C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

9

2026.01.30

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP课程
PHP课程

共137课时 | 10.3万人学习

JavaScript ES5基础线上课程教学
JavaScript ES5基础线上课程教学

共6课时 | 11.2万人学习

PHP新手语法线上课程教学
PHP新手语法线上课程教学

共13课时 | 0.9万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号