如何在Highcharts的render方法中为dataLabel设置圆角与边框？

我在render方法中使用attr()调整部分dataLabel的属性，尝试添加SVG的rx属性来设置圆角但未生效。请问如何为这些dataLabel设置圆角？同时想了解是否可以为其添加边框？

以下是我的render方法代码：

render: function () {
  amountOfRenders += 1;

  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) {

        var newY = 0;
        var newX = 0;

        if (amountOfRenders <= 1) {
          newY = dataLabel1.y - (dataLabel1.height + 2)
          newX = dataLabel1.x - (dataLabel1.width - 19)
        }
        else {
          newY = dataLabel1.y
          newX = dataLabel1.x
        }

        if ((points[i] as any).agregate === points[i + 1].agregate) {
          dataLabel1.attr({
            y: newY,
            fill: points[i].color
          });
        }

        if ((dataLabel1.x + dataLabel1.width) > this.chartWidth - (this.chartWidth / 10)) {
          dataLabel1.attr({
            x: newX,
          });
        }
      }
    }
  }

  if (allowChartRedraw) {
    allowChartRedraw = false;

    this.redraw();
  }
},

我曾尝试像SVG对象一样添加rx属性，但没有效果：

dataLabel1.attr({
    y: newY,
    fill: points[i].color
});

一、为DataLabel设置圆角 #

Highcharts的dataLabel并非直接对应SVG矩形元素，直接调用attr()添加rx属性无效，需通过以下方式实现：

1. 动态修改SVG矩形框（适配你的render方法） #

DataLabel的矩形容器存储在dataLabel.box属性中，需针对这个元素设置圆角：

// 在你的render方法中修改对应代码块
if ((points[i] as any).agregate === points[i + 1].agregate) {
  dataLabel1.attr({
    y: newY,
    fill: points[i].color
  });
  // 给dataLabel的矩形框添加圆角
  if (dataLabel1.box) {
    dataLabel1.box.attr({
      rx: 5, // 圆角x轴半径
      ry: 5  // 圆角y轴半径，通常与rx保持一致
    });
  }
}

注意：确保dataLabel的shape配置为rect（默认可能是callout等其他形状，这类形状没有矩形容器，设置圆角无效）。如果初始化时未指定，可在plotOptions.series.dataLabels中添加shape: 'rect'。

2. 初始化时配置（静态设置） #

如果不需要动态修改，可直接在图表初始化配置中设置：

plotOptions: {
  series: {
    dataLabels: {
      enabled: true,
      shape: 'rect',
      style: {
        borderRadius: '5px' // 用CSS样式设置圆角
      }
    }
  }
}

二、为DataLabel添加边框 #

同样通过dataLabel.box或初始化配置实现：

1. 动态修改（render方法中） #

// 可与圆角设置放在同一代码块中
if (dataLabel1.box) {
  dataLabel1.box.attr({
    stroke: '#000',       // 边框颜色
    'stroke-width': 1     // 边框宽度
  });
}

2. 初始化时配置 #

plotOptions: {
  series: {
    dataLabels: {
      enabled: true,
      shape: 'rect',
      borderWidth: 1,     // 边框宽度
      borderColor: '#000',// 边框颜色
      borderRadius: 5     // 同时设置圆角
    }
  }
}

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