amcharts细分地图国家(可点击) [英] amcharts drill-down map countries clickable

问题描述

向下钻取地图示例具有 index.html 文件，该文件引用了三个相关的javascript文件.

The drill-down map example has the index.html file which references three relevant javascript files.

1. index.js
2. continentsLow.js
3. worldLow.js

现在，各种参考文献都指向允许

Now various references point to the definition of an array of areas that allow url and target to be specified.

但是，哪个JavaScript文件会承担此负载并不清楚.

But it is not readily obvious which javascript file would carry this load.

在我看来，index.js文件的相关部分是:

The relevant section of the index.js file to my eyes is:

// 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 文件似乎更合适，因为它定义了国家/地区多边形

The worldLowfile seems a more appropriate spot as it defines the countries polygons

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 属性时，它失败了.

while I attempted to add a url attribute in this array, it failed.

执行此操作的正确方法是什么?

What is the proper way to do this?

推荐答案

您引用的链接全部针对amCharts的v3，而您的代码针对v4.

The links you referenced are all for v3 of amCharts, whereas your code is for v4.

这是在线v4深入地图演示: https://www.amcharts.com/demos/drill-down-map/(我将使用它作为下面代码的基础).

Here's the v4 Drill-down Map demo online: https://www.amcharts.com/demos/drill-down-map/ (I'll be using this as a base for the code below).

尚不清楚您的问题是什么，我假设您正在尝试使国家/地区可以点击链接. MapPolygon 是进行这些更改的正确位置.

It's not clear what your question is, I'm going to presume you're trying to make countries clickable to a link. The url property of a MapPolygon is the right place to make these changes.

您可以直接分配它，也可以通过将属性字段绑定到数据.

You can either assign it directly or via binding property fields to data.

要直接分配它，您可以等到该系列加载完毕后，例如通过其已初始化" 事件，然后使用该系列的 getPolygonById()方法通过其ISO2 ID来获取该国家/地区.因此，例如如果您希望加拿大点击进入Google:

To assign it directly, you can wait til the series has loaded, e.g. via its "inited" event, then use the series' getPolygonById() method to grab the country by its ISO2 ID. So, e.g. if you wanted Canada to click through to google:

countriesSeries.events.on("inited", function() {
  var canada  = countriesSeries.getPolygonById('CA');
  canada.url = "https://www.google.com/search/?q=canada";
});

要将 MapPolygon 的 url 属性绑定到可能在您提供给该系列的数据中出现的字段，请设置系列的)，例如:

To bind the url property of MapPolygons to a field that may appear in data you provide to the series, set the series' template's propertyFields.url to the name of the matching field in the data object (let's say we'll use "url" in that case, too), e.g.:

countrySeries.mapPolygons.template.propertyFields.url = "url";

现在只需将数据传递给系列，例如如果您希望美国点击进入google.com，则将一个对象的数组传递给其 id 为"US" 和"url" code>是"http://google.com" :

Now just pass data to the series, e.g. if you want the United States to click through to google.com, pass an array with a single object whose id is "US" and "url" is "http://google.com":

countriesSeries.data = [
  {
    id: "US",
    url: "https://www.google.com"
  }
];

这是一个演示:

https://codepen.io/team/amcharts/pen/6b8bffc714a966304a8f29d6939ee064

这篇关于amcharts细分地图国家(可点击)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！