如何在Amcharts中单击地图气泡和呼叫服务器请求

Question

我想单击Am图表中的气泡并通过ajax调用来调用服务器，并在视图中处理一些数据，这可能吗？我正在通过ajax调用加载地图。下面是代码。我使用eventlistener clickable对象尝试了它，但没有成功。

 function StatisticsMap(item, categoryID, statusID) {
    languageShortName = $("#languageShortName").val();
    $("[relf-map-tab]").removeClass("active");
    var url = "/" + languageShortName + "/saudiprojects/statistics/map-data?categoryID=" + categoryID + "&statusID=" + statusID;
    dataPoints = [];
    $.ajax({ type: "GET", url: url }).done(function (data) {
        $(data).each(function (index, value) {
            dataPoints.push({
                longitude: value.Longitude,
                latitude: value.Latitude,
                type: 'circle',
                color: '#E98C3E',
                label: value.CountNo,
                labelPosition: "middle",
                labelColor: "#ffffff",
                labelFontSize: 20,
                fixedSize: false,
                labelBackgroundAlpha: 1,
                labelBackgroundColor: "#E98C3E",
                height: 50 + (value.CountNo * 10),
                width: 50 + (value.CountNo * 10),
                centered: true,
                title: value.Status
            });
        });
        var map = AmCharts.makeChart("mapdiv", {
            "type": "map",
            "theme": "light",
            "dataProvider": {
                "map": "saudiArabiaHigh",
                "images": dataPoints
            }
        });
        $(item).addClass("active");
    });
}

这是我的HTML

<div class="graph">
   <div id="mapdiv" style="width:100%;height:100%;"></div>
</div>

Answer 1

您可以使用地图上的clickMapObject侦听器捕获单击的气泡。图像本身存储在事件的mapObject属性中：

clickMapObject

注意，为了使图像可点击，您必须在

  "listeners": [{
    "event": "clickMapObject",
    "method": function(ev) {
      alert('clicked on ' + ev.mapObject.title)
    }
  }]

中将selectable设置为selectable：

true

下面的演示：

imagesSettings

  "imagesSettings": {
    "selectable": true
  }

var dataPoints = [{
  longitude: 45,
  latitude: 25,
  type: 'circle',
  color: '#E98C3E',
  label: "1",
  labelPosition: "middle",
  labelColor: "#ffffff",
  labelFontSize: 20,
  fixedSize: false,
  labelBackgroundAlpha: 1,
  labelBackgroundColor: "#E98C3E",
  height: 60,
  width: 60,
  centered: true,
  title: "Example"
}];


var map = AmCharts.makeChart("mapdiv", {
  "type": "map",
  "theme": "light",
  "dataProvider": {
    "map": "saudiArabiaHigh",
    "images": dataPoints
  },
  "imagesSettings": {
    "selectable": true
  },
  "listeners": [{
    "event": "clickMapObject",
    "method": function(ev) {
      alert('clicked on ' + ev.mapObject.title)
    }
  }]
});