Highcharts地图中更新mapbubble时实现大小平滑过渡的方法

我在Highcharts地图上添加了一个气泡，点击按钮时希望实现三个效果：

• 改变气泡大小
• 改变气泡颜色
• 状态切换时带平滑过渡动画

目前颜色可以平滑过渡，但大小完全没有变化；就算能修改大小，也无法实现平滑过渡，只能直接切换状态。请问如何让气泡大小也像颜色一样实现平滑过渡？

复现代码 #

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/maps/modules/tiledwebmap.js"></script>

<div id="container"></div>
<button id="change-size-button">
Change the bubble size
</button>

JavaScript

var map;
map = Highcharts.mapChart("container", {
  mapNavigation: {
    enabled: true,
    buttonOptions: {
      alignTo: "spacingBox",
    },
  },

  mapView: {
    projection: {
      name: "WebMercator",
    },
    center: [152.9993, -27.41962],
    zoom: 10,
  },
  series: [
    {
      type: "tiledwebmap",
      name: "Tiles",
      provider: {
        type: "OpenStreetMap",
        theme: "Standard",
        subdomain: "a",
      },
      opacity: 0.5,
    },
    {
      type: "mapbubble",
      
      minSize: 20,
      maxSize: 100,
      data: [
        {
        name: "New series",
          lat: -27.451,
          lon: 153.0117,
          z: 30,
          color: "#F00011",
        },
      ],
    },
  ],
})

document
  .getElementById("change-size-button")
  .addEventListener("click", function () {
    map.series[1].data.forEach((point) => {
      point.update({
        name: "Updated series",
        color: "#080CAB",
        z: 40,
      })
    })
  })

要实现气泡大小的平滑过渡，需要针对Highcharts的mapbubble系列做两处关键设置：

1. 显式开启系列动画 #

在mapbubble系列的配置中添加animation: true——该系列默认没有为控制气泡大小的z值变化启用动画，必须手动开启。

2. 确保update时启用动画 #

调用point.update()时，第二个参数设置为true，显式指定启用动画，避免隐式逻辑导致动画关闭。

修改后的完整代码 #

var map;
map = Highcharts.mapChart("container", {
  mapNavigation: {
    enabled: true,
    buttonOptions: {
      alignTo: "spacingBox",
    },
  },

  mapView: {
    projection: {
      name: "WebMercator",
    },
    center: [152.9993, -27.41962],
    zoom: 10,
  },
  series: [
    {
      type: "tiledwebmap",
      name: "Tiles",
      provider: {
        type: "OpenStreetMap",
        theme: "Standard",
        subdomain: "a",
      },
      opacity: 0.5,
    },
    {
      type: "mapbubble",
      animation: true, // 显式开启系列动画
      minSize: 20,
      maxSize: 100,
      data: [
        {
          name: "New series",
          lat: -27.451,
          lon: 153.0117,
          z: 30,
          color: "#F00011",
        },
      ],
    },
  ],
})

document
  .getElementById("change-size-button")
  .addEventListener("click", function () {
    map.series[1].data.forEach((point) => {
      point.update({
        name: "Updated series",
        color: "#080CAB",
        z: 40,
      }, true); // 明确启用动画
    })
  })

可选：自定义动画参数 #

如果需要更精细的动画控制，可以在animation配置中自定义时长和缓动函数：

animation: {
  duration: 1200, // 动画时长1.2秒
  easing: 'easeInOutCubic' // 自定义缓动效果
}

内容的提问来源于stack exchange，提问作者anorlondo