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

amcharts 5的tooltip提示框中是否支持插入HTML内容?

amCharts5 提示框添加跳转链接实现方案

amCharts 5 已废弃 v4 版本的 tooltipHTML 配置项,改为直接设置 tooltip 的 html 属性实现自定义 HTML 内容,按以下步骤操作即可实现需求:

  • 为需要添加提示框的图表元素(如系列、坐标轴标签、标记点等)创建 tooltip 实例,添加keepTargetHover: true配置,保证鼠标移到 tooltip 上时提示框不会自动关闭,才能正常点击内部链接
  • 直接给 tooltip 的 html 属性赋值自定义 HTML 字符串,在其中插入 <a> 标签即可实现跳转功能
  • 如果点击链接时触发了图表的默认交互,可给 <a> 标签绑定点击事件阻止事件冒泡即可

可参考如下示例代码:

// 折线图系列添加带跳转链接的tooltip示例
let lineSeries = chart.series.push(am5xy.LineSeries.new(root, {
  valueXField: "date",
  valueYField: "sales",
  xAxis: dateAxis,
  yAxis: valueAxis,
  // 配置自定义tooltip
  tooltip: am5.Tooltip.new(root, {
    keepTargetHover: true, // 必加,否则无法点击tooltip内部元素
    html: `
      <div class="tooltip-container">
        <p>日期:{date}</p>
        <p>销售额:{sales}元</p>
        <a href="你的跳转路径" target="_blank">查看销售明细</a>
      </div>
    `
  })
}))

提示:HTML字符串中可以直接使用{字段名}的语法引用当前数据项中对应的字段值,和 v4 版本的用法一致。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.09.24 23:06:07