amcharts 4 interactive content in tooltips on worldmap, not working

半腔热情 提交于 2019-12-23 01:14:10

问题


Here is my javascript for a world map. The idea is for the tooltip pop-up to contain a link to a url, allow the user to click on it and have the url open in another tab/window. tooltip just moves away from pointer, no way to click on embedded tag with url. How to stop the tooltip from moving away from pointer? (tooltipPosition: fixed or pointer did not change anything)

// 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();

// Disable Zoom and Pan
chart.seriesContainer.draggable = false;
chart.seriesContainer.resizable = false;
chart.maxZoomLevel = 1;

// Series for gray background map
var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
worldSeries.exclude = ["AQ"];
worldSeries.useGeodata = true;
var polygonTemplate = worldSeries.mapPolygons.template;
polygonTemplate.fill = am4core.color("#ebebeb");

// 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.tooltipHTML = "{name}<br/><a style=\"color:white; text-decoration: underline;\" href=\"{site}\" target=\"_blank\">{site}</a><br/>{email}<br/>{phone}";
polygonTemplate.adapter.add("tooltipHTML", function (html, ev) {
    if (!ev.dataItem.dataContext.site) {
        return "{name}";
    }
    return html;
})

polygonTemplate.fill = am4core.color("#6f52a8");


polygonSeries.tooltip.interactionsEnabled = true;  // allow interaction
polygonSeries.tooltip.pointerOrientation = "vertical";

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


// Include
polygonSeries.include = ["AD", "AR", "AM" , "AU", "AT", "BS" , "BB", "BZ", "BM", "BO", "BR",, "BG", "KH", "CM", "CA", "CL", "CN", "CO" , "HR", "DO", "AE", "EC", "EG", "DE", "GT", "HN", "HK", "IN", "ID", "IR", "IQ", "IL", "IT", "JP", "JO", "KW", "LB", "LY",  "MK", "MX", "MM", "NL", "NG", "PK", "PA", "PY", "PE", "PH", "PR", "RU" , "SA", "RS", "SG", "SR", "CH", "TW", "TT", "TR", "UA", "GB", "US", "VE", "VN"
];

来源:https://stackoverflow.com/questions/54819873/amcharts-4-interactive-content-in-tooltips-on-worldmap-not-working

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!