如何在新行上分别显示来自一组对象的链接？

Question

在我的 JavaScript 对象数组中，我无法显示多个 link 来自对应于每个国家/地区的对象，每个对象单独一行。

当前循环取国家对应的所有link并显示国家名称。

links 的问题在于，如果一个国家/地区有多个 links，我无法将它们单独显示。

例如，这三个 DE link 在工具提示中显示为一个 link： https%3A%2F%2Fwwww.example1.com%2Chttps%3A%2F%2Fwwww.example2.com%2Chttps%3A%2F%2Fwwww.example3.com 并且我希望每个 link 单独一行。

如何更好地编写循环以实现我想要的？

循环目前看起来像这样：

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

这就是它的解决方案的样子。我没有在 fiddle 上尝试过，但我很确定流程。查看是否可以在调用 setToolTip() 时设置 toolTipHtml。

还有一件事，如果您可以将悬停的多边形与您的 JSON 数据相关联，那么您就不需要循环遍历“group.data”，但是从数组中获取对象并将 link 附加到 toolTipHtml.

如何在新行上分别显示来自一组对象的链接？

How to display links from an array of objects separately on a new line?

javascript

arrays

object

amcharts

amcharts4