Highcharts排序堆叠柱状图：数据标签定位及图例交互问题

一、数据标签随系列排序的定位修复 #

原修改stackedPoint.dataLabel.y = plotY;无效，核心原因是排序后堆叠坐标未重新计算，需结合Highcharts的坐标体系重设标签位置，或触发图表重绘让框架自动计算：

方法1：排序后手动更新标签坐标 #

在分类/系列排序逻辑执行完成后，遍历所有点并更新数据标签的位置：

// 假设chart是你的图表实例
chart.series.forEach(series => {
  series.points.forEach(point => {
    if (point.dataLabel) {
      // 基于点的实际绘制位置调整标签Y坐标，叠加图表顶部偏移
      const targetY = point.plotY + chart.plotTop + (point.dataLabel.options.y || 0);
      point.dataLabel.attr({ y: targetY });
      point.dataLabel.redraw();
    }
  });
});

方法2：配置数据标签自动对齐+重绘 #

在plotOptions中设置数据标签居中对齐，排序后触发图表重绘，让Highcharts自动计算位置：

plotOptions: {
  column: {
    stacking: 'normal',
    dataLabels: {
      enabled: true,
      align: 'center',
      allowOverlap: true,
      formatter: function() {
        return this.y;
      }
    }
  }
}

// 排序完成后调用重绘
chart.redraw();

二、图例点击问题处理 #

方案1：修复图例点击逻辑 #

因排序打乱了系列与数据的默认关联，重写itemClick事件，切换可见性后重新执行排序逻辑：

legend: {
  itemClick: function() {
    const series = this.series;
    // 切换系列可见状态
    series.setVisible(!series.visible, false);
    // 重新执行你的分类/系列排序函数
    sortStackedColumns(chart);
    chart.redraw();
    return false; // 阻止默认行为冲突
  }
}

方案2：禁用点击，保留hover效果 #

若修复成本高，直接禁用图例点击，仅保留hover交互：

legend: {
  itemClick: function() {
    return false; // 阻断点击事件
  },
  itemHoverStyle: {
    color: '#2f7ed8' // 自定义hover颜色，确保交互反馈可见
  }
}

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