gpt4 book ai didi

javascript - amcharts 向下钻取 map 国家可点击

转载 作者:行者123 更新时间:2023-11-29 20:41:11 30 4
gpt4 key购买 nike

下钻 map 示例具有引用三个相关 javascript 文件的 index.html 文件。

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

现在各种引用文献指向一个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 文件似乎是一个更合适的位置,因为它定义了国家多边形

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 下钻 map 在线演示: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";
});

要将 MapPolygonurl 属性绑定(bind)到您提供给系列的数据中可能出现的字段,请设置系列的 templatepropertyFields.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

关于javascript - amcharts 向下钻取 map 国家可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55501569/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com