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

