Highcharts Variwide自定义图例点击时X轴标签显隐及滚动兼容问题

直接操作ticks的DOM元素在滚动时失效，是因为Highcharts在横向滚动（平移）时会动态销毁、重建可见的轴刻度元素。正确的做法是通过维护状态+轴标签格式化函数来实现，具体步骤如下：

• 第一步：在图表初始化时，添加状态对象记录类别显示状态
  在图表的chart.events.load事件里，初始化存储类别可见性的对象并挂载到图表实例上：

  load: function() {
    this.visibleCategories = {};
    // 初始化所有类别为可见状态
    this.xAxis[0].categories.forEach(cat => {
      this.visibleCategories[cat] = true;
    });
  }
  

• 第二步：修改自定义图例的legendItemClick事件，同步状态并触发轴重绘
  在原来的图例点击逻辑中，除了控制系列显示，还要切换对应类别的状态，再触发X轴重绘让格式化规则生效：

  legendItemClick: function() {
    const chart = this.chart;
    const category = this.name; // 假设图例项名称与X轴类别一一对应
    // 切换系列显示状态
    const newVisibility = !this.visible;
    this.setVisible(newVisibility);
    // 同步更新类别可见状态
    chart.visibleCategories[category] = newVisibility;
    // 触发X轴重绘，应用新的标签显示规则
    chart.xAxis[0].update({}, false);
    chart.redraw();
    return false; // 阻止默认图例点击行为（适配自定义图例场景）
  }
  

• 第三步：重写X轴labels.formatter函数，根据状态控制标签显示
  在X轴配置中，设置标签格式化函数，依据visibleCategories的状态决定是否渲染标签：

  xAxis: {
    categories: [...], // 你的X轴类别数组
    labels: {
      formatter: function() {
        const chart = this.chart;
        // 若当前类别被标记为隐藏，返回null不显示标签
        return chart.visibleCategories[this.value] ? this.value : null;
      }
    },
    // 开启横向滚动的基础配置（按需调整）
    scrollbar: {
      enabled: true
    },
    panning: true,
    zoomEnabled: false
  }
  

• 额外兼容：监听轴afterSetExtremes事件，确保滚动时状态实时生效
  当轴的极值变化（滚动操作触发），强制触发重绘保证标签状态同步：

  xAxis: {
    events: {
      afterSetExtremes: function() {
        this.chart.redraw();
      }
    }
  }
  

这种实现方式的核心是通过状态驱动标签渲染，完全避开直接操作DOM元素的局限性——不管图表如何滚动，Highcharts渲染可见标签时都会调用格式化函数，自动根据维护的状态控制显示，同时保证系列与标签的状态完全同步。

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