如何通过HTML元素或ID获取已实例化的amCharts 3.21.14图表对象？

别担心，amCharts 3其实在全局维护了一个所有已实例化图表的集合，只是这个细节没在公开API文档里显眼标注而已！

核心思路：利用AmCharts.charts全局数组 #

amCharts 3会自动把每个创建好的图表实例存入AmCharts.charts这个数组中，不管你有没有手动保存引用。每个图表实例都有一个div属性，指向它所挂载的DOM元素——这就是我们匹配的关键。

封装一个获取函数 #

你可以写一个简单的工具函数，根据DOM选择器定位到对应的图表实例：

function getAmChartBySelector(selector) {
  // 获取目标DOM元素
  const targetEl = document.querySelector(selector);
  if (!targetEl) return null;
  
  // 遍历全局图表数组，匹配对应的实例
  return AmCharts.charts.find(chart => {
    // 确保图表实例的div属性存在，且与目标元素匹配
    return chart.div && chart.div === targetEl;
  });
}

使用示例 #

比如你要获取挂载在#my-chart的图表，就可以这样用：

const chart = getAmChartBySelector('#my-chart');
if (chart) {
  console.log('找到图表实例：', chart);
  // 现在你可以调用任何图表方法，比如导出操作
  chart.export.toPNG();
} else {
  console.log('未找到对应图表实例');
}

额外注意事项 #

• 如果你的页面上有多个图表，这个方法只会返回第一个匹配的实例（因为用了find），如果需要匹配多个可以改成filter。
• 如果图表已经被销毁（调用过chart.destroy()），它可能还会留在AmCharts.charts数组里，所以可以在判断里加个额外检查，比如chart.isReady来确保图表是活跃状态。

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