AmCharts 4 - 从地图上的点获取数据



我在AmCharts 4地图上开始新项目,我想在单击所选点时获取数据。现在我点击了事件,但我不知道如何从数组中获取数据,例如 id 和标题。

// Create image series
var imageSeries = chart.series.push(new am4maps.MapImageSeries());
// Create a circle image in image series template so it gets replicated to all new images
  var imageSeriesTemplate = imageSeries.mapImages.template;
  var circle = imageSeriesTemplate.createChild(am4core.Circle);
//create circle/points
  circle.radius = 5;
  circle.fill = am4core.color("#000000");
  circle.strokeWidth = 3;
  circle.nonScaling = true;
  circle.tooltipText = "{title}" + "{id}";
  // Set prope fields
  imageSeriesTemplate.propertyFields.latitude = "latitude";
  imageSeriesTemplate.propertyFields.longitude = "longitude";
  // example data cities
  imageSeries.data = [{
    "latitude": 48.856614,
    "longitude": 2.352222,
    "title": "Paris",
    "id": 102
  }, {
    "latitude": 47.856614,
    "longitude": 2.352222,
    "title": "second Paris",
    "id": 104
  }];
    //click on point event
      circle.events.on("hit", function(ev) {
// HERE, WHAT CAN I DO??
        console.log("clicked on ", ev.target);
    }, this);

那将是:

imageSeriesTemplate.events.on("hit", (ev)=>{ console.log(ev.target.dataItem.dataContext.title) })

@VermaAman,遇到了同样的问题,并发现应该将onHit添加到圆圈中,我正在使用config,所以它看起来像这样:

   {
            type: "MapImageSeries",
            mapImages: {
              children: [
                {
                  type: "Circle",
                  radius: 4,
                  stroke: "#somecolor",
                  strokeWidth: 2,
                  nonScaling: true,
                  tooltipText: "{title}",
                  events: {
                    hit: function (ev: any) {
                      console.log(ev.target.dataItem.dataContext);
                    },
                  },
                },
              ],
              propertyFields: {
                latitude: "latitude",
                longitude: "longitude",
              },
            },
            data: areas,
          },

最新更新