You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Highcharts/Stock 设置tooltip fontSize时时间戳字号不生效

问题现象

Highcharts/Stock 中给 tooltip 配置更大的 fontSize 属性时,仅提示框内数值部分字号会变更,头部时间戳文本字号始终保持默认值,查阅公开API文档未找到直接对应配置项。
tooltip字号不生效效果截图

问题根因

这是Highcharts Stock默认模板机制导致的:tooltip头部的时间戳通过tooltip.headerFormat配置渲染,默认模板给时间戳文本写死了font-size: 10px的内联样式,内联样式优先级高于tooltip根节点配置的通用字号样式,因此根节点设置的fontSize无法被时间戳部分继承,仅后面没有固定内联样式的数值区域会生效。

解决方法

可任选以下一种方案实现全提示框字号统一:

  • 方案1:重写headerFormat配置,移除默认模板里的固定字号,或直接在模板里指定和全局一致的字号,改造成本最低,示例代码:
tooltip: {
  fontSize: '16px', // 替换为你需要的目标字号
  // 覆盖默认headerFormat,去掉原有固定10px字号的配置
  headerFormat: '<span style="font-size: 16px; font-weight: 600">{point.key}</span><br/>'
}
  • 方案2:通过CSS全局覆盖tooltip头部的字号样式,无需修改JS配置,适合多实例统一修改的场景,示例代码:
.highcharts-tooltip .highcharts-header span {
  font-size: 16px !important; /* 替换为你需要的目标字号 */
}
  • 方案3:使用tooltip.formatter回调完全自定义tooltip的渲染内容,这种方式不会加载默认的头部模板,所有文本都会自动继承你在tooltip上配置的fontSize属性,适合高度自定义提示框内容的场景。

内容的提问来源于stack exchange,提问作者Bernardo Marques

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.29 00:57:27