Angular5中amCharts气泡点击高亮报错：Cannot read property 'Amcharts' of undefined

我帮你梳理下问题根源和修复方案，这个报错其实是典型的this指向偏差加上对Angular结合amCharts的更新逻辑理解不到位导致的：

错误原因拆解 #

1. this指向错位：你用普通函数作为clickGraphItem的回调时，函数内部的this指向的是触发事件的amCharts图表实例，而非你的Angular组件实例。所以this.AmCharts自然会返回undefined——图表实例上根本没有这个属性。
2. 冗余的更新方式：在amcharts3-angular2组件中，不需要手动调用AmCharts.updateChart来更新图表，组件本身会监听dataProvider的变化自动刷新；另外amCharts自带的validateData()方法，比重新赋值dataProvider的效率更高。

修复后的代码示例 #

首先确保你已经在组件中正确导入amCharts：

import * as AmCharts from '@amcharts/amcharts3-angular';

然后修改监听器配置，用箭头函数保留组件的this指向，同时优化数据更新逻辑：

"listeners": [
  {
    "event": "clickGraphItem",
    "method": (event) => { // 箭头函数让this绑定到组件实例
      const bubbleId = event.item.dataContext.id;
      // 遍历数据修改气泡状态
      this.dataProvider.forEach((data) => {
        if (bubbleId && bubbleId === data.id) {
          // 切换当前气泡的大小和形状
          data.bubbleSize = data.bubbleSize === 10 ? 20 : 10;
          data.shape = data.bubbleSize === 20 ? "diamond" : "round";
        } else {
          // 重置其他气泡为默认状态
          data.bubbleSize = 10;
          data.shape = "round";
        }
      });

      // 方式1：用amCharts原生方法刷新图表（推荐，更高效）
      event.chart.validateData();

      // 方式2：如果依赖Angular变更检测，可通过浅拷贝触发更新
      // this.dataProvider = [...this.dataProvider];
    }
  }
]

额外注意事项 #

• 大小写细节：amCharts的全局对象名是AmCharts（首字母大写，第二个C也大写），别写成Amcharts（小写c），这是很容易踩的拼写坑。
• 数据不可变性：如果dataProvider是组件的输入属性，修改数据后通过浅拷贝（比如[...this.dataProvider]）触发变更检测，能确保Angular感知到数据变化并同步更新图表。
• 性能优化：validateData()只会让amCharts更新变化的部分，比重新赋值dataProvider导致的全量渲染要高效得多。

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