如何在Highcharts中更改渲染时的dataLabel样式?

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

render方法中,我查找彼此重叠的dataLabels并将它们上移。但是对于这样的dataLabels,我想改变背景颜色,也许还有其他一些风格。下面是我的render:

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),
        });
      }
    }
  }
}

我试着这样改变风格:

dataLabel1.options.style = {
  color: "white"
}

或者像这样:

dataLabel1.options = {
  style: {
    backgroundColor: "Black"
  }
}

但没有效果。

uqzxnwby

uqzxnwby1#

如果你想覆盖datalabel文本样式而不是使用dataLabel.attr()方法,你需要使用dataLabel.css()

dataLabel1.css({
  color: 'red'
})

在改变背景的情况下,它会生成为SVG rect,所以你需要改变fill属性:

dataLabel1.attr({
  y: dataLabel1.y - (dataLabel1.height + 2),
  fill: 'green',
});

Demohttps://jsfiddle.net/BlackLabel/2rnko8t5/

相关问题