如何将 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"   
},

现在我的问题

从上面的组 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 or chart object 中数据属性的数组，而不是指向数组的 object/map。您需要直接为其分配一个数组。您可以创建多个图像系列并为每个图像分配一个组，例如

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

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

How can I bind groupby data to a amcharts map

linq

json

amcharts

typescript

angular