我正在用HTML/JS中的am5charts构建一个世界地图，我希望在单击一个国家时，它会打开"；描述"；该特定国家的属性。出于某种原因；setAll"；修改后的国家变得充耳不闻"点击"；。。。如果我在event.click之后定义了新的属性，那么我就无法在事件中检索到新的变量。
下面是我的代码片段。非常感谢。
PS。我是新来这里问问题的，所以如果我做错了什么，请不要犹豫，告诉我！
HTML
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css" media="screen">
</head>
<body>
<!-- <div id="header"></div> -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/map.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/5/geodata/worldHigh.js"></script>
<script src="https://www.amcharts.com/lib/5/geodata/peruHigh.js"></script>
<div id="chartdiv"></div>
<div id="info"></div>
<script src="js/script.js"></script>
<!-- <div id="footer"></div> -->
</body>
</html>
CSS
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 95vh;
margin-bottom: 100vh;
}
JS-
// Create root and chart
var root = am5.Root.new("chartdiv");
// Set themes
root.setThemes([
am5themes_Animated.new(root)
]);
var chart = root.container.children.push(
am5map.MapChart.new(root, {
panX: "rotateX",
projection: am5map.geoNaturalEarth1(),
wheelY: "none",
maxPanOut: 0.0
})
);
var backgroundSeries = chart.series.unshift(
am5map.MapPolygonSeries.new(root, {})
);
// sea color
backgroundSeries.mapPolygons.template.setAll({
fill: am5.color(0xd4f1f9),
stroke: am5.color(0xd4f1f9),
});
backgroundSeries.data.push({
geometry: am5map.getGeoRectangle(90, 180, -90, -180)
});
chart.events.on("wheel", function (ev) {
if (ev.originalEvent.ctrlKey) {
ev.originalEvent.preventDefault();
chart.set("wheelY", "zoom");
}
else {
chart.set("wheelY", "none");
overlay.show();
overlay.setTimeout(function () {
overlay.hide()
}, 800);
}
});
// Create polygon series
var polygonSeries = chart.series.push(
am5map.MapPolygonSeries.new(root, {
// geoJSON: am5geodata_worldLow,
geoJSON: am5geodata_worldHigh,
// geoJSON: am5geodata_peruHigh,
exclude: ["AQ", "FK", "GS", "TF", "HM"],
fill: am5.color(0x095256)
})
);
// Hover color
polygonSeries.mapPolygons.template.states.create("hover", {
fill: am5.color(0x677935),
});
// Add all blogs URLs
polygonSeries.data.setAll([{
id: "FR",
name: "France",
description: "www.google.com"
}, {
id: "ES",
name: "Spain",
value: 200
}]);
polygonSeries.mapPolygons.template.events.on("click", function (ev) {
var clickedCountry = ev.target.dataItem.get("id");
console.log(clickedCountry);
window.open(ev.target.dataItem.get("description"));
});
我找到了答案！使用Promise.all，如下所示。
// click event to open link
polygonSeries.mapPolygons.template.events.on("click", (ev) => {
var clickedCountry = ev.target.dataItem.get("id");
var clickedData = polygonSeries.getDataItemById(clickedCountry);
var pageToOpen = clickedData.dataContext.description;
if (pageToOpen in window) { // check if "description" is empty
console.log("Not visited");
} else {
Promise.all([
window.open(pageToOpen)
]);
}
});
...
// list of countries with their links
polygonSeries.data.setAll([
{
id: "FR", description: "https://www.google.com" }
}