Как нажать на карту Bubble в Amcharts и вызвать серверный запрос - PullRequest
Новая
       62

Как нажать на карту Bubble в Amcharts и вызвать серверный запрос

0 голосов
/ 15 октября 2019

Я хочу щелкнуть пузырь в диаграмме Am, вызвать сервер с помощью ajax-вызова и манипулировать некоторыми данными в представлении. Возможно ли это? Я загружаю свою карту через вызов ajax. ниже код. Я попробовал его с помощью кликабельного объекта Eventlistener, но не добился успеха. 

 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

enter image description here

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

1 Ответ

1 голос
/ 17 октября 2019

Вы можете использовать прослушиватель clickMapObject на карте, чтобы зафиксировать, какой пузырь был нажат. Само изображение хранится в свойстве mapObject события: 

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

Обратите внимание, что для того, чтобы сделать изображение кликабельным, необходимо установить 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)
    }
  }]
});
#mapdiv {
  width: 100%;
  height: 500px;
}
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/saudiArabiaHigh.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<div id="mapdiv"></div>
...