You need to enable JavaScript to run this app. amcharts4地图点击后动态修改tooltip值不生效如何解决?
优惠活动
大模型
产品
解决方案
定价
更多

amcharts4地图点击后动态修改tooltip值不生效如何解决?

问题原因

你修改的是worldSeries.mapPolygons.template的tooltipText属性,该属性是多边形的模板配置,仅对后续新生成的多边形实例生效,已经渲染完成的单个多边形不会同步模板的修改。且你需要修改的是被点击的单个区域的tooltip,而非全局所有区域的配置,因此需要操作当前点击的多边形实例而非模板。

修正代码
let chart = am4core.create("chartdiv", am4maps.MapChart);
chart.projection = new am4maps.projections.Miller();
let worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
// ... 其他初始化代码
let worldPolygon = worldSeries.mapPolygons.template;
worldPolygon.tooltipText = '{name}';
worldPolygon.events.on("hit", async function(ev) {
  // 从当前点击的多边形数据中获取国家code,根据你实际的字段名调整
  let code = ev.target.dataItem.dataContext.code;
  let destination_actif = await context.$get_destination_actif_by_country_code(code);
  // 直接修改当前点击的多边形实例的tooltipText,而非模板
  if(!destination_actif.data){
     ev.target.tooltipText = 'No result';
  }else{
     ev.target.tooltipText = 'With result';
  }
  // 可选:点击后直接弹出tooltip,无需再次hover
  // ev.target.showTooltip();
})
可选优化方案

如果需要统一管理提示文本逻辑,也可以通过绑定自定义数据字段实现:

  • 初始化时将tooltipText设置为自定义字段占位符:worldPolygon.tooltipText = '{customTooltip}'
  • 接口返回结果后直接给当前多边形的数据源赋值:ev.target.dataItem.dataContext.customTooltip = destination_actif.data ? 'With result' : 'No result'
  • amcharts会自动监听数据变化更新tooltip内容,无需手动修改tooltipText属性。

内容的提问来源于stack exchange,提问作者Michel Gisenaël

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.10.10 18:18:03