AmCharts 5同一页面双仪表盘仅显示一个的问题及解决方法

问题场景 #

在同一HTML页面里尝试渲染两个相同的AmCharts 5仪表盘，已经修改了各自的div ID、变量名，还用普通立即执行函数（IIFE）隔离作用域，但始终只有第一个仪表盘能正常显示。

问题原因 #

AmCharts 5的核心实现基于ES6类，普通函数形式的IIFE块内，无法直接以非new的方式调用类构造函数，导致第二个仪表盘的初始化逻辑执行失败。

解决办法 #

改用ES6箭头函数定义IIFE，格式为(() => { /* 仪表盘初始化代码 */ })();，每个仪表盘的初始化逻辑放在独立的箭头函数IIFE里，就能正确完成各自实例的创建。

代码示例 #

<!-- 两个仪表盘容器 -->
<div id="gauge1" style="width: 300px; height: 300px;"></div>
<div id="gauge2" style="width: 300px; height: 300px;"></div>

<script>
// 第一个仪表盘的初始化逻辑
(() => {
  const root = am5.Root.new("gauge1");
  // 以下为仪表盘通用配置，可根据需求调整
  root.setThemes([am5themes_Animated.new(root)]);
  const chart = root.container.children.push(
    am5radar.RadarChart.new(root, {
      panX: false,
      panY: false,
      startAngle: 180,
      endAngle: 360
    })
  );
  // ... 剩余仪表盘配置代码
})();

// 第二个仪表盘的初始化逻辑
(() => {
  const root = am5.Root.new("gauge2");
  root.setThemes([am5themes_Animated.new(root)]);
  const chart = root.container.children.push(
    am5radar.RadarChart.new(root, {
      panX: false,
      panY: false,
      startAngle: 180,
      endAngle: 360
    })
  );
  // ... 剩余仪表盘配置代码
})();
</script>

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