मेरे वर्तमान कोड में मेरे पास दो देश हैं जो क्लिक करने पर पॉपअप प्रदर्शित करते हैं और पॉपअप में आप कुछ लिंक देख सकते हैं। लिंक सही ढंग से मैप किए गए हैं लेकिन मेरी समस्या लिंक नाम के साथ है।

जिस तरह से मैंने अब तक कोड लिखा है, वह एक लिंक वाले देश के लिए लिंक का नाम प्रदर्शित करने के लिए अच्छा है। मैं नीचे दिए गए कोड में लिंक नाम को ev.target.dataItem.dataContext.linkName से कॉल कर रहा हूं:

chart.openPopup("<strong>" + ev.target.dataItem.dataContext.country + "</strong>" + ev.target.dataItem.dataContext.link.map(url => '<br><a href="' + encodeURI(url) + '">' + ev.target.dataItem.dataContext.linkName  + '</a>').join(""));

2 लिंक वाले देश के लिए दोनों नाम प्रदर्शित करने के लिए मैं ev.target.dataItem.dataContext.linkName कैसे लिख सकता हूं? मैं Name 2 को https://www.example2.com के लिए और Name 3 को https://www.example3.com के लिए असाइन करना चाहता हूं।

अगर कोई इस मुद्दे पर मेरी मदद कर सकता है तो मैं इसकी बहुत सराहना करूंगा।

am4core.ready(function () {

  // Themes begin
  am4core.useTheme(am4themes_animated);
  // Themes end

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

  // Responsiveness enabled
  chart.responsive.enabled = true;

  // Set map definition
  chart.geodata = am4geodata_worldHigh;

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

  // 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 = 3.5;
  chart.homeGeoPoint = {
    longitude: 10,
    latitude: 54
  };

  let groupData = [{
    "color": chart.colors.getIndex(0),
    "data": [{
      "country": "Germany",
      "id": "DE",
      "link": ["https://www.example1.com"],
      "linkName": ["Name 1"]
    }, {
      "country": "France",
      "id": "FR",
      "link": ["https://www.example2.com", "https://www.example3.com"],
      "linkName": ["Name 2", "Name 3"]
    }]
  }];

  // 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 = [];

    group.data.forEach(function (country) {
      includedCountries.push(country.id);
      excludedCountries.push(country.id);
    });

    let polygonTemplate = series.mapPolygons.template;
      polygonTemplate.tooltipHTML = '<b>{country}</b>';
      polygonTemplate.events.on("hit", function (ev) {
        chart.closeAllPopups();
        // Map countries and link encoding
        // How to write -> ev.target.dataItem.dataContext.linkName <- in order to display Name 2 and Name 3 separately ?
        chart.openPopup("<strong>" + ev.target.dataItem.dataContext.country + "</strong>" + ev.target.dataItem.dataContext.link.map(url => '<br><a href="' + encodeURI(url) + '">' + ev.target.dataItem.dataContext.linkName  + '</a>').join(""));
    });

    series.include = includedCountries;

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


    // Country shape properties & behaviors
    let mapPolygonTemplate = series.mapPolygons.template;
    mapPolygonTemplate.fill = am4core.color("#c4a5e8");
    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("#FFCC00");

    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;
    overflow: hidden;
  }

  #map a,
  b {
    cursor: pointer;
    color:  #003399;
    text-align: center;
  }

  #map a:hover {
    color: #023432;
  }

  .ampopup-content {
    /* width: 40%; */
    text-align: center;
  }

  .ampopup-header {
    background-color: #99000d !important;
  }

  .ampopup-close {
    filter: invert(1);
  }

  .ampopup-inside {
    background-color: rgb(255, 255, 255);
  }

  .ampopup-inside a {
    color: #28a86c !important;
  }

  .ampopup-inside a:hover {
    color: #023432 !important;
  }

  .ampopup-curtain {
    display: block !important;
    background-color: rgba(7, 22, 51, 0.7) !important;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countries popup with links</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div id="map"></div>
            </div>
        </div>
    </div>

    <!-- 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/custom2.js"></script>
    
    <!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
1
JustMe 4 फरवरी 2021, 15:12

1 उत्तर

सबसे बढ़िया उत्तर

में nवें तत्व तक पहुँचने के लिए आपको .map द्वारा प्रदत्त index का उपयोग करने की आवश्यकता है linkName सरणी।

let polygonTemplate = series.mapPolygons.template;
polygonTemplate.tooltipHTML = '<b>{country}</b>';
polygonTemplate.events.on("hit", function(ev) {
  chart.closeAllPopups();
  const {
    links,
    linkNames,
    country
  } = ev.target.dataItem.dataContext;

  // Map countries and link encoding
  const popupContent = `<strong>${country}</strong><br />
  ${
  links.map((url,urlIndex)=>`<a href="${encodeURI(url)}">${linkNames[urlIndex]}</a>`).join('')
  }`;
  chart.openPopup(popupContent);
});
1
Gabriele Petrioli 4 फरवरी 2021, 15:23
सख्ती से जावास्क्रिप्ट रखने के लिए आपके उदाहरण में jQuery कोड से बचने का कोई तरीका है?
 – 
JustMe
4 फरवरी 2021, 15:32
1
मेरे कोड में कोई jQuery नहीं है, $ टेम्पलेट शाब्दिक
 – 
Gabriele Petrioli
4 फरवरी 2021, 15:34
क्षमा करें, $ ने मुझे थोड़ा भ्रमित किया
 – 
JustMe
4 फरवरी 2021, 15:34
पिछली टिप्पणियों में टेम्पलेट शाब्दिक के बारे में बात करते हुए एक लिंक जोड़ा। यह स्ट्रिंग संयोजन से बचने और उद्धरणों के साथ खिलवाड़ करने में मदद करता है।
 – 
Gabriele Petrioli
4 फरवरी 2021, 15:34