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
相关产品推荐
相关产品推荐

