javascript - 如何为各个国家添加超链接？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 还是因为我的代码错误？
点击国家时链接url的函数：
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>解决方案
您可以使用propertyFields来引用数据中的 URL，如mapPolygonTemplate.propertyFields.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.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>推荐阅读
- jenkins - 如何在单个 Jenkins 作业中添加多个 Jenkins 作业作为构建参数
- javascript - 角度路由器未加载正确的组件
- javascript - 使用 Express.js 发布到 SQL Server api
- mysql - 使用工作台将数据库导入 MySQL 需要很长时间
- pom.xml - 从不同的 url（存储库）添加“过时”的 maven 依赖项
- sql - 在where子句中查询日期和具体时间3
- terraform - Terraform - 从同一脚本填充变量值
- angularjs - AngularJS 库网址
- r - 如何按整秒对 xts 时间序列进行分组/求和
- ios - 使用 ionic 生成 iOS 构建时出现错误，即“沙箱与 Podfile.lock 不同步”。在 MAC 莫哈韦