如何在新行上单独显示来自对象数组的链接?

Question

在我的JavaScript对象数组中，我有一个问题，即在每个国家对应的对象的单独一行上显示多个链接。

当前循环获取与国家对应的所有链接，并显示国家名称。

链接的问题是，如果一个国家有多个链接，我不能让它们单独显示。

例如，这三个DE链接在工具提示中显示为一个链接:https%3A%2F%2Fwwww.example1.com%2Chttps%3A%2F%2Fwwww.example2.com%2Chttps%3A%2F%2Fwwww.example3.com和我希望每个链接在单独的行上。

我怎样才能更好地编写循环以达到我想要的效果?

当前循环是这样的:

//Loop for displaying links corresponding to each country
group.data.forEach(function(link){
let polygonTemplate = series.mapPolygons.template;
// Instead of our custom country, we could also use {name} which comes from geodata  
polygonTemplate.tooltipHTML = '<b>{country}</b><br><a href="{link.urlEncode()}">More info</a>';
polygonTemplate.fill = am4core.color("blue");
});

您还可以查看JSFiddle代码片段，以更清楚地了解我的意思。

任何帮助都将是非常感激的。

谢谢!

am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

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

// Set map definition
chart.geodata = am4geodata_worldHigh;

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

// Zoom control
chart.zoomControl = new am4maps.ZoomControl();

let homeButton = new am4core.Button();
homeButton.events.on("hit", function() {
chart.goHome();
});

homeButton.icon = new am4core.Sprite();
homeButton.padding(7, 5, 7, 5);
homeButton.width = 30;
homeButton.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
homeButton.marginBottom = 10;
homeButton.parent = chart.zoomControl;
homeButton.insertBefore(chart.zoomControl.plusButton);

// Center on the groups by default
chart.homeZoomLevel = 5;
chart.homeGeoPoint = { longitude: 10, latitude: 52 };

let groupData = [
{
"color": chart.colors.getIndex(0),
"data": [
{
"country": "Germany",
"id": "DE", // With MapPolygonSeries.useGeodata = true, it will try and match this id, then apply the other properties as custom data
"link": ["https://wwww.example1.com", "https://wwww.example2.com", "https://wwww.example3.com"],
}, {
"country": "France",
"id": "FR",
"link": ["https://wwww.example4.com"],
}, {
"country": "Belgium",
"id": "BE",
"link": ["https://wwww.example5.com", "https://wwww.example6.com"]

},
{
"country": "Netherlands",
"id": "NL",
"link": ["https://wwww.example7.com"]
}
]
}
];

// This array will be populated with country IDs to exclude from the world series
let excludedCountries = ["AQ"];

// Create a series for each group, and populate the above array
groupData.forEach(function(group) {
let series = chart.series.push(new am4maps.MapPolygonSeries());
series.name = group.name;
series.useGeodata = true;
let includedCountries = [];
// Make a loop to display a link for the group of countries
group.data.forEach(function(country) {
includedCountries.push(country.id);
excludedCountries.push(country.id);

//Loop for displaying links corresponding to each country
group.data.forEach(function(link){
let polygonTemplate = series.mapPolygons.template;
// Instead of our custom country, we could also use {name} which comes from geodata  
//polygonTemplate.tooltipHTML = '<b>{country}</b><br><a href="{link.urlEncode()}">More info</a>';
polygonTemplate.tooltipHTML = '<b>{country}</b>' + link.link.map(url =>
'<br><a href="{url.urlEncode()}">More info</a>').join("");
polygonTemplate.fill = am4core.color("blue");
});

});
series.include = includedCountries;

series.fill = am4core.color(group.color);
series.setStateOnChildren = true;
series.calculateVisualCenter = true;
series.tooltip.label.interactionsEnabled = true;
series.tooltip.keepTargetHover = true;

// Country shape properties & behaviors
let mapPolygonTemplate = series.mapPolygons.template;
mapPolygonTemplate.fill = am4core.color(group.color);
mapPolygonTemplate.fillOpacity = 0.8;
mapPolygonTemplate.nonScalingStroke = true;
mapPolygonTemplate.tooltipPosition = "fixed";


mapPolygonTemplate.events.on("over", function(event) {
series.mapPolygons.each(function(mapPolygon) {
mapPolygon.isHover = false;
})
event.target.isHover = false;
event.target.isHover = true;
})

mapPolygonTemplate.events.on("out", function(event) {
series.mapPolygons.each(function(mapPolygon) {
mapPolygon.isHover = false;
})

})

// States  
let hoverState = mapPolygonTemplate.states.create("hover");
hoverState.properties.fill = am4core.color("#9985e3");

series.data = JSON.parse(JSON.stringify(group.data));

});

// The rest of the world.
let worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
let worldSeriesName = "world";
worldSeries.name = worldSeriesName;
worldSeries.useGeodata = true;
worldSeries.exclude = excludedCountries;
worldSeries.fillOpacity = 0.5;
worldSeries.hiddenInLegend = true;
worldSeries.mapPolygons.template.nonScalingStroke = true;

});

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#map {
width: 100%;
height: 600px;
}
a {
cursor: pointer;
color: rgb(4, 7, 46);
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Some countries</title>
<link rel="stylesheet" href="css/site.css">
</head>
<!-- Scripts for loading AmCharts Map -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/worldHigh.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<script src="js/custom.js"></script>
<body>
<div id="map"></div>
</body>
</html>

Answer 1

使用map()来遍历link属性，并使每个URL在tooltipHTML属性中成为单独的一行。

polygonTemplate.tooltipHTML = '<b>{country.country}</b>' + country.link.map(url =>
'<br><a href="{url.urlEncode()}">More info</a>').join("");

Answer 2

mapPolygonTemplate.events.on("over", function(event) {
series.mapPolygons.each(function(mapPolygon) {
mapPolygon.isHover = false;
})
event.target.isHover = false;
group.data.forEach(function(country) {
event.target.tooltipHTML = '<b>{country}</b>' + country.link.map(url =>
'<br><a href="{link.urlEncode()}">More info</a>').join("");
polygonTemplate.fill = am4core.color("blue");
});
event.target.isHover = true;
});

它的解看起来是这样的。我还没有在小提琴上尝试过，但我很确定这种流动。当setToolTip()被调用时，看看你是否可以设置toolTipHtml。

还有一件事，如果你可以将悬停多边形与JSON数据关联起来，那么你就不需要循环">group.data"，但从数组中获取对象并将链接附加到toolTipHtml中。