Angular中如何修改AmCharts 5图例默认点击行为实现单选效果

该需求可完全基于AmCharts5原生API实现，无需修改框架底层代码，兼容Angular项目开发场景，核心实现步骤如下：

• 关闭图例默认交互：图例初始化完成后，将图例项容器的togglable属性设为false，屏蔽默认点击时仅切换当前序列显隐的原生逻辑。
• 绑定自定义点击逻辑：给图例项容器绑定click事件，触发时执行两步操作：
  1. 遍历图表挂载的所有序列，以及每个序列绑定的关联值轴，统一设置为隐藏状态
  2. 读取当前点击图例项绑定的序列实例，将该序列及其对应的值轴设置为显示状态

Angular 场景核心代码示例 #

import * as am5xy from "@amcharts/amcharts5/xy";
import type am5legend from "@amcharts/amcharts5/legend";

// 传入你已创建的图例、图表实例
function initCustomLegendInteraction(legend: am5legend.Legend, chart: am5xy.XYChart) {
  // 关闭图例默认切换行为
  legend.itemContainers.template.set("togglable", false);

  // 绑定自定义点击事件
  legend.itemContainers.template.events.on("click", (ev) => {
    const activeSeries = ev.target.dataItem.dataContext as am5xy.XYSeries;

    // 隐藏全部序列及对应值轴
    chart.series.each((series) => {
      series.hide();
      const bindYAxis = series.get("yAxis");
      if (bindYAxis) bindYAxis.hide();
    });

    // 仅展示当前选中的序列和绑定值轴
    activeSeries.show();
    const activeYAxis = activeSeries.get("yAxis");
    if (activeYAxis) activeYAxis.show();
  });
}

可选增强功能 #

如果需要支持「点击已激活的图例项，恢复所有序列、值轴全显」的交互，可新增一个模块级变量记录当前激活的序列ID，点击事件触发时先做判断：若当前点击的序列ID和已记录的激活ID一致，则遍历所有序列和值轴执行show()方法，同时清空激活标记即可。 #

效果参考 #

默认图表效果：

点击单个图例后的预期效果：

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