如何在AmCharts气泡图中通过点击按钮隐藏气泡？

没问题，这需求其实很好实现，我给你两种实用方案，都是基于AmCharts官方的API来做的，你可以根据自己的具体需求选：

方案一：单个/批量控制气泡显示（灵活度高） #

如果需要精准控制某几个气泡或者批量切换所有气泡的显示状态，可以给数据项添加一个visible字段，通过绑定这个字段来控制气泡的显示：

1. 初始化图表时，给数据加上visible属性（默认设为true表示显示）：

let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [
  { category: "A", valueX: 10, valueY: 20, size: 50, visible: true },
  { category: "B", valueX: 15, valueY: 25, size: 70, visible: true },
  // 更多数据...
];

2. 给气泡系列绑定hidden属性，关联数据里的visible字段：

let series = chart.series.push(new am4charts.BubbleSeries());
series.dataFields.valueY = "valueY";
series.dataFields.valueX = "valueX";
series.dataFields.value = "size";
series.dataFields.categoryX = "category";

// 通过适配器把数据的visible状态映射到气泡的hidden属性
series.bullets.template.adapter.add("hidden", function(hidden, target) {
  return !target.dataItem.dataContext.visible;
});

3. 按钮点击时切换数据的visible状态，然后让图表更新：

document.getElementById("toggleBubbles").addEventListener("click", function() {
  // 这里可以遍历所有数据切换状态，也可以只修改特定项
  chart.data.forEach(item => {
    item.visible = !item.visible;
  });
  // 触发图表重新渲染
  chart.validateData();
});

方案二：一键隐藏/显示所有气泡（操作简单） #

如果只需要一次性隐藏所有气泡，直接控制整个气泡系列的显示状态就行，代码更简洁：

// 初始化系列后，给按钮绑定点击事件
document.getElementById("toggleSeries").addEventListener("click", function() {
  // 切换整个气泡系列的隐藏状态
  series.hidden = !series.hidden;
});

补充说明 #

• 要是你用的是AmCharts 3版本，API略有不同：比如更新数据后调用chart.validateNow()，隐藏系列用series.hide()/series.show()，核心思路是一致的。
• 方案一适合需要精细控制单个气泡的场景，方案二适合全局切换的需求，你按需选择就行。

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