如何在Angular中显示多个AmCharts仪表盘？单个仪表盘显示0求助

我明白你现在遇到的麻烦——同一个项目里的两个AmCharts角仪表盘，一个正常渲染，另一个却始终停在0，哪怕已经改了div的ID。结合你给出的代码片段，我整理了几个大概率能解决问题的排查方向：

• 确保第二个仪表盘的初始化代码独立且变量不冲突
  你给出的代码是初始化chartdiv14的，但第二个仪表盘需要单独的AmCharts.makeChart调用，而且要避免复用同一个变量名（比如两个都用gaugeChart会导致后一个覆盖前一个）。建议给第二个仪表盘分配独立变量：

  // 第一个仪表盘
  var gaugeChart = AmCharts.makeChart("chartdiv14", { ... });
  // 第二个仪表盘
  var gaugeChart2 = AmCharts.makeChart("chartdiv15", {
    "type": "gauge",
    "theme": "dark",
    "axes": [
      {
        "axisThickness": 1,
        "axisAlpha": 0.2,
        "tickAlpha": 0.2,
        "valueInterval": 20,
        // 关键：设置初始值，否则默认显示0
        "value": 75,
        "bands": [
          { "color": "#ff0000", "endValue": 65, "startValue": 0 },
          { "color": "#f5faf9", "endValue": 120, "startValue": 65 },
          // 补充完整你的bands配置，不要省略号
        ]
      }
    ]
  });
  

• 检查第二个仪表盘的DOM元素状态
  确认对应第二个仪表盘的div（比如chartdiv15）在页面中存在，并且有明确的宽高样式——AmCharts如果找不到目标容器，或者容器没有尺寸，很容易渲染异常显示0：

  <div id="chartdiv15" style="width: 300px; height: 300px;"></div>
  

• 确认初始化时机和值的设置逻辑
  如果是Angular项目，务必把仪表盘初始化代码放在ngAfterViewInit钩子中，确保DOM元素已经渲染完成。另外，如果第一个仪表盘是通过后续代码动态设置值的，第二个仪表盘也要执行同样的赋值操作：

  // Angular组件示例
  ngAfterViewInit(): void {
    const gaugeChart = AmCharts.makeChart("chartdiv14", { ... });
    const gaugeChart2 = AmCharts.makeChart("chartdiv15", { ... });
    
    // 动态设置第二个仪表盘的数值
    gaugeChart2.setValue(0, 80);
  }
  

• 排查配置完整性
  检查第二个仪表盘的配置是否完整，比如bands的color字段不要用省略号，确保所有配置项的格式符合AmCharts要求，语法错误也可能导致仪表盘无法正常渲染。

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