javascript - 使用动画(Javascript)动态更新 amCharts 4 世界地图？

Question

我正在尝试使用 amCharts 创建 map ，该 map 具有动画圆圈，就像他们在下面页面中提供的示例一样。如果我在主函数中添加数据(下面的代码 - 在 am4core.ready(..) 上)它工作正常，但我想动态地将数据添加到我的 map 并仍然保留动画。

我有一个单独的函数，大约每秒轮询一次数据(下面的第二个代码)，并用新数据更新 imageSeries。这工作正常，并在我的 map 上添加了一个圆圈，但它没有动画。

原始代码示例: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 和 map 的函数:

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

imageSeries.data = imageSeriesData;

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

我在这里错过了什么？如何将数据动态推送到 map ，并像他们提供的示例中那样为小点设置动画？我也试过将 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>

希望对遇到同样问题的人有所帮助!