如何将 groupby 数据绑定到 amcharts 地图

Question

我在将数据绑定到 map 时遇到问题。

我之前是如何绑定数据的。我有JSON 数据作为记录格式

{
    "latitude":39.7645187,
    "longitude": -104.9951976,
    "name": "ORCL",
    "value":32,
    "activeProducts":"127", 
},
{
    "latitude":49.619446,
    "longitude": -128.695623,
    "name": "RCXC",
    "value":72,
    "activeProducts":"789",
},

从上面的数据，我直接用lat，long在map上显示圆圈。 name、value 和 activeProducts 为 tooltip。

现在我已经根据使用 reduce clause 之后的 name 字段对数据进行分组

CDFN: (26) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
HCDR: (33) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
HVBL: (87) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
PCMD: (16) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}

每个group 都有相同的数据，例如lat、long、name。 value（显示在第一个 JSON 数据中）是每组记录的计数（CDFN: (26)）。数据展开后是这样的

{
    "latitude":39.7645187,
    "longitude": -104.9951976,
    "name": "CDFN",
    "activeProducts":"127",
    "totalproducts":"140"   
},
{
    "latitude":49.619446,
    "longitude": -128.695623,
    "name": "HCDR",
    "activeProducts":"789",
    "totalproducts":"810"   
},

现在我的问题

1. 从以上组CDFN、HCDR、HVBL 等我怎样才能得到一条记录的let 和long 只绑定到map。

这是我目前正在使用的代码

public productsLocMap()
{
  this.mapChart = am4core.create("stationsMap", am4maps.MapChart);
  this.mapChart .geodata = am4geodata_worldLow;
  this.mapChart .projection = new am4maps.projections.Miller();
  this.polygonSeries = this.mapChart .series.push(new am4maps.MapPolygonSeries());
  this.polygonSeries.useGeodata = true;
  this.polygonSeries.strokeWidth = 0.5;

  let imageSeries = this.mapChart .series.push(new am4maps.MapImageSeries());
  imageSeries.dataFields.value = "value";
  
  
  
  var place = imageSeries.mapImages.template;
  place.nonScaling = true;
  place.propertyFields.latitude = "latitude";
  place.propertyFields.longitude = "longitude";   
  imageSeries.data=Stations.Stations;     
  
  var circle = place.createChild(am4core.Circle);
  circle.fillOpacity = 0.7;
  circle.propertyFields.fill = "color";
  circle.tooltipText = "[bold]{name}:[/]\nCompliance Devices: {activeDevices}\nTotal devices:{totalDevice}";

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

  imageSeries.heatRules.push({
    "target": circle,
    "property": "radius",
    "max": 15,
    "dataField": "value",
  })      
}

以下几行在我绑定数据时很重要

  imageSeries.data=Stations.Stations;  
  imageSeries.heatRules.push({
    "target": circle,
    "property": "radius",
    "max": 15,
    "dataField": "value",
  })

我试过这样做，但地图上没有显示任何内容

 imageSeries.data=group;

Answer 1

AmCharts 需要 series 或 chart object 中的 data 属性数组，而不是指向数组的对象/映射。您需要直接为其分配一个数组。您可以创建多个图像系列并为每个系列分配一个组，例如

series1.data = group.CDFN;
// ...
series2.data = group.HCDR;
// ...
// etc