是否可以在AmCharts地图上使用启用了交互功能的工具提示?

时间:2019-05-23 13:54:00

标签: javascript amcharts

在AmCharts地图上,我想在悬停的国家/地区显示工具提示,并在其中提供可点击的按钮。文档显示我们可以在图表上做到这一点,但在地图上也可以做到这一点吗?

在文档中给出了有关在图表(https://www.amcharts.com/docs/v4/tutorials/tooltips-with-rich-html-content/#Adding_interactive_elements)上创建交互式工具提示的示例,但是当我尝试在AmCharts地图上进行相同操作时,工具提示会在悬停时消失,从而无法单击按钮

我创建了一个CodePen来显示问题:https://codepen.io/henrid/pen/oREEwE

JS部分:

// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);

// Set map definition
chart.geodata = am4geodata_worldLow;

// Set projection
chart.projection = new am4maps.projections.Miller();

// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

// Make map load polygon (like country names) data from GeoJSON
polygonSeries.useGeodata = true;

// Configure series
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.fill = am4core.color("#74B266");

// Create tooltip
polygonTemplate.tooltipHTML = `<strong>{name}</strong>
<center><input type="button" value="More info" onclick="alert('You clicked on {name}')" /></center>`;
polygonTemplate.tooltipPosition = 'fixed';
polygonSeries.calculateVisualCenter = true;
polygonSeries.tooltip.label.interactionsEnabled = true;

// Create hover state and set alternative fill color
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");

我在哪里做错了什么?预先感谢您的回答!

0 个答案:

没有答案