AmCharts 4 如何通过代码实现图例项切换状态的存储与恢复？

问题核心分析 #

你遇到的问题根源有两个：

1. 状态存储逻辑只记录了被点击的图例名称，没有记录具体的显示/隐藏状态，导致恢复时无法判断该系列应该显示还是隐藏
2. 使用series.template绑定事件的时机不对——通过createFromConfig创建的系列，需要在实例化完成后单独绑定事件，而非提前绑定template

解决方案步骤 #

1. 修正状态存储逻辑

改用对象存储每个系列的布尔状态（true=隐藏，false=显示），避免重复记录，同时确保状态准确：

// 初始化状态存储对象，可存在全局变量或localStorage中
const chartToggledStates = {};

// 绑定图例点击事件，更新状态
chart.value.legend.itemContainers.template.events.on('hit', (ev) => {
  const seriesName = ev.target.dataItem.name;
  const targetSeries = chart.value.series.getIndex(ev.target.dataItem.index);
  
  // 取反当前状态并存储
  chartToggledStates[seriesName] = !targetSeries.hidden;
  // 持久化到localStorage，页面刷新也能保留
  localStorage.setItem('chartToggledStates', JSON.stringify(chartToggledStates));
});

2. 正确绑定系列事件（可选）

如果需要监听系列的显示/隐藏事件，不要用series.template，而是在createFromConfig完成后遍历所有已创建的系列：

// 确保在createFromConfig执行完成后调用
chart.value.series.each((series) => {
  series.events.on('hidden', () => {
    console.log(`系列 ${series.name} 已隐藏`);
  });
  series.events.on('shown', () => {
    console.log(`系列 ${series.name} 已显示`);
  });
});

3. 标签页切换时恢复状态

在图表所在标签页激活时，遍历存储的状态，直接设置对应系列的hidden属性（AmCharts会自动同步图例的视觉状态）：

function restoreChartToggleStates() {
  // 读取存储的状态
  const savedStates = JSON.parse(localStorage.getItem('chartToggledStates')) || {};
  if (!chart.value || !chart.value.legend) return;

  // 遍历图例数据项，匹配状态并恢复
  chart.value.legend.dataItems.each((dataItem) => {
    const seriesName = dataItem.name;
    if (savedStates.hasOwnProperty(seriesName)) {
      const targetSeries = chart.value.series.getIndex(dataItem.index);
      // 设置隐藏状态，第三个参数skipEvents避免触发hit事件重复存储
      targetSeries.hidden = savedStates[seriesName];
      dataItem.hide(undefined, undefined, true);
    }
  });
}

// 绑定标签页激活事件（根据你的框架/原生逻辑调整）
// 示例：原生JS监听标签页显示
document.querySelector('#chart-tab').addEventListener('shown', restoreChartToggleStates);
// Vue示例：在activated钩子中调用
// activated() { this.restoreChartToggleStates(); }

关键注意事项 #

• 必须确保在图表和图例完全初始化完成后执行恢复逻辑，否则会找不到实例或数据项
• 直接操作系列的hidden属性即可同步图例状态，无需单独修改图例项
• 持久化状态时建议用localStorage或全局状态管理工具（如Vuex、Redux），避免页面刷新丢失

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