amcharts drill-down map countries clickable

问题

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

index.js
continentsLow.js
worldLow.js

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

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

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();
});

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]]]},[...]

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

What is the proper way to do this?

回答1:

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

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).

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.

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";
});

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";

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"
  }
];

Here's a demo:

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

来源：https://stackoverflow.com/questions/55501569/amcharts-drill-down-map-countries-clickable

标签

javascript

amcharts

amcharts4