复选框切换多图表时Chart5的xAxis label无法启用问题求助

问题原因 #

你遇到的核心问题是图表索引与选中状态数组的索引对应关系错位，导致判断最后一个选中图表的逻辑失效：

• 选中Chart5时，循环变量i与selected数组的实际索引不匹配，使得selected[i]为undefined，同时selected.indexOf(true, i+1)错误定位到Chart5自身的索引，最终导致x轴标签无法启用。
• 原逻辑依赖indexOf(true, i+1)判断后续是否有选中项，但当数组中存在未选中项（如Chart4）时，循环遍历的索引与选中项的实际索引脱节，无法准确识别最后一个选中的图表。

解决方案 #

替换原有判断逻辑，先明确所有选中图表的原数组索引，再精准定位最后一个选中的图表，为其启用x轴标签：

// 1. 获取所有选中图表的原索引（过滤未选中项）
const selectedChartIndices = selected
  .map((isSelected, index) => isSelected ? index : null)
  .filter(index => index !== null);

// 2. 获取最后一个选中图表的索引（无选中项时为undefined）
const lastSelectedIndex = selectedChartIndices[selectedChartIndices.length - 1];

// 3. 遍历图表，为最后一个选中项启用x轴标签，其他选中项关闭
charts.forEach((chartConfig, index) => {
  if (selected[index]) {
    chartConfig.xAxis.label.show = index === lastSelectedIndex;
  }
});

逻辑说明 #

• 第一步通过map+filter提取选中图表的原索引，确保索引与图表一一对应，不受中间未选中项干扰。
• 第二步直接取筛选后索引数组的最后一项，精准定位最后一个选中的图表。
• 第三步遍历所有图表，仅为最后一个选中项开启x轴标签，其他选中项自动关闭，完美适配“共用x轴”的需求。

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