如何在Highcharts中为dataLabel设置圆角

erhoui1w  于 2023-10-20  发布在  Highcharts
关注(0)|答案(1)|浏览(168)

render方法中,我使用attr方法调整某些dataLabels的值。如何调整这些dataLabels的圆角半径?
下面是我的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();
  }
},

我尝试添加rx值作为svg对象:

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

但它不起作用。有没有办法为dataLabel添加圆角?我也想知道是否有可能增加边界。

uhry853o

uhry853o1#

您需要更改r属性:

dataLabel1.attr({
    ...,
    r: 10
});

现场演示:https://jsfiddle.net/BlackLabel/L7ar29k4/
**API引用:**https:api.highcharts.com/class-reference/Highcharts.SVGElement#attr

相关问题