如何添加到各个国家的超链接？图表

时间：2019-03-05 23:59:14

标签： javascript http-status-code-404 amcharts

单击单个国家/地区时，我试图将链接附加到另一个页面。到目前为止，我已经向阿尔及利亚添加了一个URL链接（ID：DZ）：

{ "data": [{"id": "DZ"}], "url": "https://en.wikipedia.org/wiki/Algeria" }

但是，当我单击地图时，它返回404 not found错误，它还将地址转换为％7Burl％7D。我在本地主机上运行我的网站。我尝试添加实际的网站（https://en.wikipedia.org/wiki/Algeria）和本地html文件页面之一的路径，但是都返回完全相同的错误。是因为我正在运行localhost还是因为我的代码错误？

点击国家/地区时用于链接网址的功能：

mapPolygonTemplate.events.on("hit", function(ev) {
ev.target.series.chart.url = "{url}";
});

该链接也未本地化到地图上的一个国家/地区，点击地图上的任意位置都会发生错误。附加所有链接后，如何确保每个国家/地区都有自己的唯一链接？

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4maps.MapChart);

chart.geodata = am4geodata_worldUltra;


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

chart.zoomControl = new am4maps.ZoomControl();

var 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);

chart.homeZoomLevel = 4;
chart.homeGeoPoint = {
  longitude: 16.5,
  latitude: 3.8
};


var groupData = [{
    "data": [{
      "id": "DZ",
      "url": "https://en.wikipedia.org/wiki/Algeria"
    }]
  },
  {
    "data": [{
      "id": "AO"
    }]
  },
  {
    "data": [{
      "id": "BJ"
    }]
  },
  {
    "data": [{
      "id": "BW"
    }]
  },
  {
    "data": [{
      "id": "BF"
    }]
  },
  {
    "data": [{
      "id": "BI"
    }]
  },
  {
    "data": [{
      "id": "CM"
    }]
  },
  {
    "data": [{
      "id": "CV"
    }]
  },
  {
    "data": [{
      "id": "CF"
    }]
  },
  {
    "data": [{
      "id": "KM"
    }]
  },
  {
    "data": [{
      "id": "CD"
    }]
  },
  {
    "data": [{
      "id": "DJ"
    }]
  },
  {
    "data": [{
      "id": "EG"
    }]
  },
  {
    "data": [{
      "id": "GQ"
    }]
  },
  {
    "data": [{
      "id": "ER"
    }]
  },
  {
    "data": [{
      "id": "ET"
    }]
  },
  {
    "data": [{
      "id": "GA"
    }]
  },
  {
    "data": [{
      "id": "GM"
    }]
  },
  {
    "data": [{
      "id": "GH"
    }]
  },
  {
    "data": [{
      "id": "GN"
    }]
  },
  {
    "data": [{
      "id": "GW"
    }]
  },
  {
    "data": [{
      "id": "CI"
    }]
  },
  {
    "data": [{
      "id": "KE"
    }]
  },
  {
    "data": [{
      "id": "LS"
    }]
  },
  {
    "data": [{
      "id": "LR"
    }]
  },
  {
    "data": [{
      "id": "LY"
    }]
  },
  {
    "data": [{
      "id": "MG"
    }]
  },
  {
    "data": [{
      "id": "MW"
    }]
  },
  {
    "data": [{
      "id": "ML"
    }]
  },
  {
    "data": [{
      "id": "MR"
    }]
  },
  {
    "data": [{
      "id": "MU"
    }]
  },
  {
    "data": [{
      "id": "MA"
    }]
  },
  {
    "data": [{
      "id": "MZ"
    }]
  },
  {
    "data": [{
      "id": "NA"
    }]
  },
  {
    "data": [{
      "id": "NE"
    }]
  },
  {
    "data": [{
      "id": "NG"
    }]
  },
  {
    "data": [{
      "id": "CG"
    }]
  },
  {
    "data": [{
      "id": "RE"
    }]
  },
  {
    "data": [{
      "id": "RW"
    }]
  },
  {
    "data": [{
      "id": "SH"
    }]
  },
  {
    "data": [{
      "id": "ST"
    }]
  },
  {
    "data": [{
      "id": "SN"
    }]
  },
  {
    "data": [{
      "id": "SC"
    }]
  },
  {
    "data": [{
      "id": "SL"
    }]
  },
  {
    "data": [{
      "id": "SO"
    }]
  },
  {
    "data": [{
      "id": "ZA"
    }]
  },
  {
    "data": [{
      "id": "SS"
    }]
  },
  {
    "data": [{
      "id": "SD"
    }]
  },
  {
    "data": [{
      "id": "SZ"
    }]
  },
  {
    "data": [{
      "id": "TZ"
    }]
  },
  {
    "data": [{
      "id": "TG"
    }]
  },
  {
    "data": [{
      "id": "TN"
    }]
  },
  {
    "data": [{
      "id": "UG"
    }]
  },
  {
    "data": [{
      "id": "EH"
    }]
  },
  {
    "data": [{
      "id": "YT"
    }]
  },
  {
    "data": [{
      "id": "ZM"
    }]
  },
  {
    "data": [{
      "id": "ZW"
    }]
  },
  {
    "data": [{
      "id": "TD"
    }]
  }
];


var excludedCountries = ["AQ"];


groupData.forEach(function(group) {
  var series = chart.series.push(new am4maps.MapPolygonSeries());
  series.name = group.name;
  series.useGeodata = true;
  var includedCountries = [];
  group.data.forEach(function(country) {
    includedCountries.push(country.id);
    excludedCountries.push(country.id);
  });
  series.include = includedCountries;

  series.fill = am4core.color("#fff");


  series.setStateOnChildren = true;
  var seriesHoverState = series.states.create("hover");


  var mapPolygonTemplate = series.mapPolygons.template;
  mapPolygonTemplate.fill = am4core.color("#fff");
  mapPolygonTemplate.fillOpacity = 1;
  mapPolygonTemplate.nonScalingStroke = false;
  mapPolygonTemplate.stroke = am4core.color("#878787");
  mapPolygonTemplate.strokeWidth = 0.2;
  mapPolygonTemplate.strokeOpacity = 0.5;
  mapPolygonTemplate.tooltipText = "{name}";

  mapPolygonTemplate.events.on("hit", function(ev) {
    ev.target.series.chart.url = "{url}";
  });

  var hoverState = mapPolygonTemplate.states.create("hover");
  hoverState.properties.fill = am4core.color("#a3cc88");

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

});



var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
var worldSeriesName = "world";
worldSeries.name = worldSeriesName;
worldSeries.useGeodata = true;
worldSeries.exclude = excludedCountries;
worldSeries.fillOpacity = 0.3;
worldSeries.mapPolygons.template.nonScalingStroke = true;

worldSeries.mapPolygons.template.stroke = worldSeries.mapPolygons.template.fill;
worldSeries.mapPolygons.template.strokeWidth = 0;
html body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  height: 90vh;
  width: 100vh;
  border: solid #000 1px;
}
<div id="chartdiv"></div>

<script src="https://www.amcharts.com/lib/4/core.js"></script>

<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/worldUltra.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

1 个答案:

答案 0 :(得分：3)

您可以像在mapPolygonTemplate.propertyFields.url = "url";中一样，使用propertyFields来引用数据中的URL。

请检查以下工作示例：

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4maps.MapChart);

chart.geodata = am4geodata_worldUltra;


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

chart.zoomControl = new am4maps.ZoomControl();

var 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);

chart.homeZoomLevel = 4;
chart.homeGeoPoint = {
  longitude: 16.5,
  latitude: 3.8
};


var groupData = [{
    "data": [{
      "id": "DZ",
      "url": "https://en.wikipedia.org/wiki/Algeria"
    }]
  },
  {
    "data": [{
      "id": "AO"
    }]
  },
  {
    "data": [{
      "id": "BJ"
    }]
  },
  {
    "data": [{
      "id": "BW"
    }]
  },
  {
    "data": [{
      "id": "BF"
    }]
  },
  {
    "data": [{
      "id": "BI"
    }]
  },
  {
    "data": [{
      "id": "CM"
    }]
  },
  {
    "data": [{
      "id": "CV"
    }]
  },
  {
    "data": [{
      "id": "CF"
    }]
  },
  {
    "data": [{
      "id": "KM"
    }]
  },
  {
    "data": [{
      "id": "CD"
    }]
  },
  {
    "data": [{
      "id": "DJ"
    }]
  },
  {
    "data": [{
      "id": "EG"
    }]
  },
  {
    "data": [{
      "id": "GQ"
    }]
  },
  {
    "data": [{
      "id": "ER"
    }]
  },
  {
    "data": [{
      "id": "ET"
    }]
  },
  {
    "data": [{
      "id": "GA"
    }]
  },
  {
    "data": [{
      "id": "GM"
    }]
  },
  {
    "data": [{
      "id": "GH"
    }]
  },
  {
    "data": [{
      "id": "GN"
    }]
  },
  {
    "data": [{
      "id": "GW"
    }]
  },
  {
    "data": [{
      "id": "CI"
    }]
  },
  {
    "data": [{
      "id": "KE"
    }]
  },
  {
    "data": [{
      "id": "LS"
    }]
  },
  {
    "data": [{
      "id": "LR"
    }]
  },
  {
    "data": [{
      "id": "LY"
    }]
  },
  {
    "data": [{
      "id": "MG"
    }]
  },
  {
    "data": [{
      "id": "MW"
    }]
  },
  {
    "data": [{
      "id": "ML"
    }]
  },
  {
    "data": [{
      "id": "MR"
    }]
  },
  {
    "data": [{
      "id": "MU"
    }]
  },
  {
    "data": [{
      "id": "MA"
    }]
  },
  {
    "data": [{
      "id": "MZ"
    }]
  },
  {
    "data": [{
      "id": "NA"
    }]
  },
  {
    "data": [{
      "id": "NE"
    }]
  },
  {
    "data": [{
      "id": "NG"
    }]
  },
  {
    "data": [{
      "id": "CG"
    }]
  },
  {
    "data": [{
      "id": "RE"
    }]
  },
  {
    "data": [{
      "id": "RW"
    }]
  },
  {
    "data": [{
      "id": "SH"
    }]
  },
  {
    "data": [{
      "id": "ST"
    }]
  },
  {
    "data": [{
      "id": "SN"
    }]
  },
  {
    "data": [{
      "id": "SC"
    }]
  },
  {
    "data": [{
      "id": "SL"
    }]
  },
  {
    "data": [{
      "id": "SO"
    }]
  },
  {
    "data": [{
      "id": "ZA"
    }]
  },
  {
    "data": [{
      "id": "SS"
    }]
  },
  {
    "data": [{
      "id": "SD"
    }]
  },
  {
    "data": [{
      "id": "SZ"
    }]
  },
  {
    "data": [{
      "id": "TZ"
    }]
  },
  {
    "data": [{
      "id": "TG"
    }]
  },
  {
    "data": [{
      "id": "TN"
    }]
  },
  {
    "data": [{
      "id": "UG"
    }]
  },
  {
    "data": [{
      "id": "EH"
    }]
  },
  {
    "data": [{
      "id": "YT"
    }]
  },
  {
    "data": [{
      "id": "ZM"
    }]
  },
  {
    "data": [{
      "id": "ZW"
    }]
  },
  {
    "data": [{
      "id": "TD"
    }]
  }
];


var excludedCountries = ["AQ"];


groupData.forEach(function(group) {
  var series = chart.series.push(new am4maps.MapPolygonSeries());
  series.name = group.name;
  series.useGeodata = true;
  var includedCountries = [];
  group.data.forEach(function(country) {
    includedCountries.push(country.id);
    excludedCountries.push(country.id);
  });
  series.include = includedCountries;

  series.fill = am4core.color("#fff");


  series.setStateOnChildren = true;
  var seriesHoverState = series.states.create("hover");


  var mapPolygonTemplate = series.mapPolygons.template;
  mapPolygonTemplate.fill = am4core.color("#fff");
  mapPolygonTemplate.fillOpacity = 1;
  mapPolygonTemplate.nonScalingStroke = false;
  mapPolygonTemplate.stroke = am4core.color("#878787");
  mapPolygonTemplate.strokeWidth = 0.2;
  mapPolygonTemplate.strokeOpacity = 0.5;
  mapPolygonTemplate.tooltipText = "{name}";
  mapPolygonTemplate.propertyFields.url = "url";
  // mapPolygonTemplate.urlTarget = "_blank";

  // mapPolygonTemplate.events.on("hit", function(ev) {
  //   ev.target.series.chart.url = "{url}";
  // });

  var hoverState = mapPolygonTemplate.states.create("hover");
  hoverState.properties.fill = am4core.color("#a3cc88");

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

});



var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
var worldSeriesName = "world";
worldSeries.name = worldSeriesName;
worldSeries.useGeodata = true;
worldSeries.exclude = excludedCountries;
worldSeries.fillOpacity = 0.3;
worldSeries.mapPolygons.template.nonScalingStroke = true;

worldSeries.mapPolygons.template.stroke = worldSeries.mapPolygons.template.fill;
worldSeries.mapPolygons.template.strokeWidth = 0;
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  height: 90vh;
  width: 100vh;
  border: solid #000 1px;
}
<div id="chartdiv"></div>

<script src="https://www.amcharts.com/lib/4/core.js"></script>

<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/worldUltra.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

相关问题
最新问题