动态设置仅最后选中的图表显示X-axis标签（多图表共用X轴）

我有3个共用X轴的图表，希望仅最后选中的（最底部的）图表显示X轴标签，且需支持动态选择（无法确定选中图表的数量）。我已尝试初始禁用所有图表的X轴标签，通过如下代码监听复选框change事件更新Chart，但无法实现仅最后选中的Chart启用X轴标签：

document.querySelectorAll('#checkboxes input').forEach(function(checkbox) {
 checkbox.addEventListener('change', (e) => {
 const id = e.target.dataset.id,
 checked = e.target.checked,
 checkedCheckboxes = document.querySelectorAll('#checkboxes input:checked').length,
 node = document.querySelector(`#chart${id}`);

 const chartEps = [
    chartEp1,
    chartEp2,
    chartEp3,
  ] 
  console.log("id", id)   
  //chartEps[id].xAxis[0].options.labels.enabled = true

  // The ID has to be the id of last chart selected. So that only for last chart xAxis label is enabled.   
  chartEps[id].update({ 
  labels: {
     enabled: true
 },
 });

此外，我还尝试过在底部设置带X轴的空Chart，两种方案均未成功，恳请技术支持。

核心思路：每次复选框状态变化时，先统一禁用所有图表的X轴标签，再定位到最后一个选中的复选框，仅为其对应图表启用X轴标签。

修改后的代码如下：

document.querySelectorAll('#checkboxes input').forEach(function(checkbox) {
  checkbox.addEventListener('change', () => {
    const chartEps = [chartEp1, chartEp2, chartEp3];
    const checkedBoxes = Array.from(document.querySelectorAll('#checkboxes input:checked'));
    
    // 第一步：禁用所有图表的X轴标签
    chartEps.forEach(chart => {
      chart.update({
        xAxis: {
          labels: { enabled: false }
        }
      });
    });
    
    // 第二步：若存在选中项，为最后一个选中项对应的图表启用X轴标签
    if (checkedBoxes.length > 0) {
      const lastCheckedId = checkedBoxes[checkedBoxes.length - 1].dataset.id;
      chartEps[lastCheckedId].update({
        xAxis: {
          labels: { enabled: true }
        }
      });
    }
  });
});

关键修正说明：

• 先全局禁用所有图表的X轴标签，避免之前选中的图表残留标签显示
• 通过checkedBoxes[checkedBoxes.length - 1]精准获取最后一个选中的复选框
• 修正图表更新的配置路径：原代码直接写labels会定位错误，Highcharts需要明确指定xAxis.labels层级

初始配置时，记得将所有图表的X轴标签默认设为禁用（以其中一个图表为例，其余两个同理）：

const chartEp1 = Highcharts.chart('chart0', {
  xAxis: {
    labels: { enabled: false },
    // 其他X轴相关配置
  },
  // 其他图表配置
});

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