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

我正在尝试使用amCharts创建一个地图，其中包含动画圆圈，如下面页面中提供的示例中所示。如果我在main函数中添加数据（下面的代码-在am4core.ready（..）上），效果很好，但是我希望动态地将数据添加到地图中，并且仍然保留动画

我有一个单独的函数，大约每秒轮询一次数据（下面的第二个代码），并用新数据更新imageSeries。这可以很好地工作，并向我的地图添加一个圆，但它不会设置它的动画

原始代码示例：

我的代码：

<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>

上面的代码可以工作，并且可以更新地图。但是，它不会像他们提供的示例中那样设置圆点的动画

我错过了什么？如何将数据动态地推送到地图上，并像它们提供的示例中那样设置小点的动画？我还尝试将animateBullet（..）函数移动到全局位置，但仍然没有任何结果

有什么想法吗

数据概念：

---

不幸的是，通读了上面的文档，它没有提供任何关于世界地图的信息。

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

在am4core.ready（..）函数中初始化am4core之前，我错误地声明了colorSet

他们网站上的原始代码示例在圆圈后声明colorSet。我错误地完全删除了该声明

错误代码：

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

var colorSet=new am4core.colorSet（）；
var imageSeriesData=[]；
var图；
var图像序列；
...

现在新代码正在运行，仍然公开imageSeries（用于数据更新）和colorSet（用于包含颜色变量的条目）：

var图像序列；
var颜色集；
am4core.ready（函数（）{
am4core.useTheme（am4themes_动画）；
var chart=am4core.create（“mapcontainer”，am4maps.MapChart）；
chart.geodata=am4geodata\u worldLow；
chart.projection=新的am4maps.projections.Miller（）；
var polygonSeries=chart.series.push（新的am4maps.mappygonseries（））；
polygoseries.exclude=[“AQ”]；
polygoseries.useGeodata=true；
var polygontamplate=polygonSeries.mapPolygons.template；
PolygContemplate.tooltipText=“{name}”；
PolygontTemplate.polygon.fillOpacity=0.6；
var hs=polygonTemplate.states.create（“悬停”）；
hs.properties.fill=chart.colors.getIndex（0）；
imageSeries=chart.series.push（新的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）；
圆半径=4；
circle.propertyFields.fill=“color”；
var circle2=imageSeries.mapImages.template.createChild（am4core.Circle）；
圆圈2.半径=4；
圆圈2.propertyFields.fill=“color”；
圆圈2.events.on（“初始化”，函数（事件）{
animateBullet（event.target）；
})
函数：沸点（圆）{
var animation=circle.animate([{
属性：“比例”，
发信人:1,，
收件人：10
}, {
属性：“不透明度”，
发信人:1,，
致:0
}]，1000，am4core.ease.circleOut）；
animation.events.on（“animationended”，函数（事件）{
animateBullet（event.target.object）；
})
}
colorSet=new am4core.colorSet（）；
imageSeries.data=[]；
});

我希望这能帮助任何遇到同样问题的人

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

<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>