Highcharts中如何在render阶段修改dataLabel样式？

直接修改dataLabel.options.style不会生效，因为Highcharts初始化后的配置对象，直接修改不会触发DOM元素重绘。你需要用官方提供的API来更新样式，以下是两种可行方案：

方案一：用attr()直接修改SVG元素属性 #

这种方式直接操作已渲染的SVG元素，实时生效：

render: function () {
  const points = this.series[0].points;
  for (var i = 0; i < points.length; i++) {
    if (i < points.length - 1) {
      const dataLabel1 = (points[i] as any).dataLabel;
      const dataLabel2 = (points[i + 1] as any).dataLabel;

      if ((dataLabel1.x + dataLabel1.width) > dataLabel2.x) {
        // 偏移位置+修改文字颜色
        dataLabel1.attr({
          y: dataLabel1.y - (dataLabel1.height + 2),
          fill: 'white'
        });
        
        // 修改背景颜色（需确保已启用dataLabel背景）
        if (dataLabel1.background) {
          dataLabel1.background.attr({
            fill: 'black'
          });
        }
      }
    }
  }
}

方案二：用update()方法更新配置 #

通过官方API更新dataLabel配置，触发重绘确保样式生效：

render: function () {
  const points = this.series[0].points;
  for (var i = 0; i < points.length; i++) {
    if (i < points.length - 1) {
      const dataLabel1 = (points[i] as any).dataLabel;
      const dataLabel2 = (points[i + 1] as any).dataLabel;

      if ((dataLabel1.x + dataLabel1.width) > dataLabel2.x) {
        // 偏移位置并更新样式，设置redraw:false避免反复触发render
        dataLabel1.update({
          y: dataLabel1.y - (dataLabel1.height + 2),
          style: {
            color: 'white'
          },
          backgroundColor: 'black'
        }, false);
      }
    }
  }
  // 最后统一重绘一次
  this.redraw();
}

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