使用动画（JavaScript）动态更新amCharts 4世界地图？

Question

我正在尝试使用amCharts创建地图，该地图的动画圆圈类似于它们在下一页中提供的示例。如果我将数据添加到主要功能（下面的代码-am4core.ready（..）上），则可以正常工作，但是我想将数据动态添加到地图中并仍然保留动画。

我有一个单独的函数，它每秒钟左右轮询一次数据（下面的第二个代码），并使用新数据更新imageSeries。效果很好，并在我的地图上添加了一个圆圈，但没有为其设置动画。

原始代码示例：https://www.amcharts.com/demos/map-with-pulsating-bullets/

我的代码：

<script>
  var colorSet = new am4core.ColorSet();
  var imageSeriesData = [];
  var chart;
  var imageSeries;

  am4core.ready(function() {
    am4core.useTheme(am4themes_animated);
    chart = am4core.create("mapcontainer", am4maps.MapChart);
    chart.geodata = am4geodata_worldLow;
    chart.projection = new am4maps.projections.Miller();
    var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
    polygonSeries.exclude = ["AQ"];
    polygonSeries.useGeodata = true;
    var polygonTemplate = polygonSeries.mapPolygons.template;
    polygonTemplate.tooltipText = "{name}";
    polygonTemplate.polygon.fillOpacity = 0.6;
    var hs = polygonTemplate.states.create("hover");
    hs.properties.fill = chart.colors.getIndex(0);
    imageSeries = chart.series.push(new am4maps.MapImageSeries());
    imageSeries.mapImages.template.propertyFields.longitude = "longitude";
    imageSeries.mapImages.template.propertyFields.latitude = "latitude";
    imageSeries.mapImages.template.tooltipText = "{title}";
    imageSeries.mapImages.template.propertyFields.url = "url";
    var circle = imageSeries.mapImages.template.createChild(am4core.Circle);
    circle.radius = 5;
    circle.propertyFields.fill = "color";
    var circle2 = imageSeries.mapImages.template.createChild(am4core.Circle);
    circle2.radius = 5;
    circle2.propertyFields.fill = "color";
    circle2.propertyFields.scale = "scale";
    circle2.events.on("inited", function(event) {
      animateBullet(event.target);
    });

    function animateBullet(circle) {
      var animation = circle.animate([{
        property: "scale",
        from: 1,
        to: circle.scale
      }, {
        property: "opacity",
        from: 1,
        to: 0
      }], 1000, am4core.ease.circleOut);
      animation.events.on("animationended", function(event) {
        animateBullet(event.target.object);
      })
    }

    imageSeries.data = imageSeriesData;

  });
</script>

将数据推送到imageSeries.data和地图的函数：

imageSeriesData.push({
  "title": data.country,
  "latitude": latlong[data.country].latitude,
  "longitude": latlong[data.country].longitude,
  "color":colorSet.next()
});

imageSeries.data = imageSeriesData;

上面的这段代码有效，并且确实会更新地图。但是，它不会像它们提供的示例那样为点设置动画。

我在这里想念什么？我如何动态地将数据推送到地图上，以及如何像提供的示例中那样对小点进行动画处理？我也尝试过将animateBullet（..）函数移动到全局位置，仍然没有。

有什么想法吗？

数据概念：https://www.amcharts.com/docs/v4/concepts/data/

很遗憾，请仔细阅读以上文档，该文档未提供有关世界地图的任何内容。

Answer 1

我想出来了...我在脚本顶部公开了一些全局变量，以便我的更新函数可以访问它们。但是，我没有意识到的是：

1. 在am4core.ready（..）函数内部初始化am4core之前，我错误地声明了colorSet。
2. 他们网站上的原始代码示例在圆圈后面声明了colorSet。我错误地完全删除了该声明。

错误代码：

<script>
  var colorSet = new am4core.ColorSet();
  var imageSeriesData = [];
  var chart;
  var imageSeries;
...

现在使用新代码，并且可以正常工作，并且仍然公开imageSeries（用于数据更新）和colorSet（用于包含颜色变量的条目）：

<script>
  var imageSeries;
  var colorSet;
  am4core.ready(function() {
    am4core.useTheme(am4themes_animated);
    var chart = am4core.create("mapcontainer", am4maps.MapChart);
    chart.geodata = am4geodata_worldLow;
    chart.projection = new am4maps.projections.Miller();
    var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
    polygonSeries.exclude = ["AQ"];
    polygonSeries.useGeodata = true;
    var polygonTemplate = polygonSeries.mapPolygons.template;
    polygonTemplate.tooltipText = "{name}";
    polygonTemplate.polygon.fillOpacity = 0.6;
    var hs = polygonTemplate.states.create("hover");
    hs.properties.fill = chart.colors.getIndex(0);
    imageSeries = chart.series.push(new am4maps.MapImageSeries());
    imageSeries.mapImages.template.propertyFields.longitude = "longitude";
    imageSeries.mapImages.template.propertyFields.latitude = "latitude";
    imageSeries.mapImages.template.tooltipText = "{title}";
    imageSeries.mapImages.template.propertyFields.url = "url";
    var circle = imageSeries.mapImages.template.createChild(am4core.Circle);
    circle.radius = 4;
    circle.propertyFields.fill = "color";
    var circle2 = imageSeries.mapImages.template.createChild(am4core.Circle);
    circle2.radius = 4;
    circle2.propertyFields.fill = "color";
    circle2.events.on("inited", function(event) {
      animateBullet(event.target);
    })
    function animateBullet(circle) {
      var animation = circle.animate([{
        property: "scale",
        from: 1,
        to: 10
      }, {
        property: "opacity",
        from: 1,
        to: 0
      }], 1000, am4core.ease.circleOut);
      animation.events.on("animationended", function(event) {
        animateBullet(event.target.object);
      })
    }

    colorSet = new am4core.ColorSet();

    imageSeries.data = [];

  });
</script>

我希望这可以帮助遇到相同问题的任何人！