下钻地图示例具有引用三个相关javascript文件的index.html
文件。
现在各种参考指向允许array of areas的url and target to be specified的定义。
但是不容易明白哪个javascript文件会带来这种负载。
我认为index.js文件的相关部分是:
// Countries
var countriesSeries = chart.series.push(new am4maps.MapPolygonSeries());
var countries = countriesSeries.mapPolygons;
countriesSeries.visible = false; // start off as hidden
countriesSeries.exclude = ["AQ"];
countriesSeries.geodata = am4geodata_worldLow;
countriesSeries.useGeodata = true;
// Hide each country so we can fade them in
countriesSeries.events.once("inited", function() {
hideCountries();
});
worldLow
file似乎是一个更合适的位置,因为它定义了多边形国家
am4internal_webpackJsonp(["fcaa"],{ATzU:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});window.am4geodata_worldLow={type:"FeatureCollection",
features:[{type:"Feature",geometry:{type:"Polygon",coordinates:[[[179.2223,-8.554],[179.2023,-8.4653],[179.2312,-8.5048],[179.2223,-8.554]]]},properties:{name:"Tuvalu",id:"TV"},id:"TV"},
{type:"Feature",geometry:{type:"Polygon",coordinates:[[[3.4624,-54.4471],[3.3461,-54.4511],[3.3669,-54.3997],[3.4814,-54.4001],[3.4624,-54.4471]]]},properties:{name:"Bouvet Island",id:"BV"},id:"BV"},
{type:"Feature",geometry:{type:"Polygon",coordinates:[[[-5.3345,36.1623],[-5.3382,36.1122],[-5.3562,36.1264],[-5.3551,36.1455],[-5.3345,36.1623]]]},[...]
当我试图在这个数组中添加一个url
属性时,它失败了。
这样做的正确方法是什么?
您引用的链接全部用于amCharts的v3,而您的代码用于v4。
这是在线v4钻取地图演示:https://www.amcharts.com/demos/drill-down-map/(我将使用它作为下面代码的基础)。
目前尚不清楚你的问题是什么,我打算假设你试图使各国可以点击链接。 url
property of a MapPolygon
是进行这些改变的正确场所。
您可以直接分配或通过binding property fields to data分配。
要直接指定它,您可以等到系列已加载,例如通过它的"inited"
event,然后使用系列'getPolygonById()
方法通过其ISO2 ID获取国家。所以,例如如果您希望加拿大点击进入谷歌:
countriesSeries.events.on("inited", function() {
var canada = countriesSeries.getPolygonById('CA');
canada.url = "https://www.google.com/search/?q=canada";
});
要将url
s的MapPolygon
属性绑定到可能出现在系列数据中的字段,请将系列'template的propertyFields.url
设置为数据对象中匹配字段的名称(假设在这种情况下我们将使用"url"
,也),例如:
countrySeries.mapPolygons.template.propertyFields.url = "url";
现在只是pass data to the series,例如如果你想让美国点击google.com,传递一个数组,其中一个对象的id
是"US"
而"url"
是"http://google.com"
:
countriesSeries.data = [
{
id: "US",
url: "https://www.google.com"
}
];
这是一个演示:
https://codepen.io/team/amcharts/pen/6b8bffc714a966304a8f29d6939ee064