将高位图数据标签放在正条的左侧和负条的右侧

Question

如何在highcharts中自定义datalabel位置，以便将负值标签放置在条形图的右侧，将正值放置在左侧？ 这是datalabel位置的默认布局：

这就是我想要实现的目标：

我尝试过这样的事情：

align: 'bottom',
    inside: true,
         x:{
           formatter: function () {
           this.y  < 0 ? 50 : -50;
         }
     }

但是在这种情况下，x必须是未定义的，并且因为它将所有数据标签放在左边缘 - 我希望能够获得图表的中心并使用此方法将它们放在正确的一侧：

有可能实现这样的目标吗？

如果它有帮助，这是一个小提琴：https://jsfiddle.net/xxw64cde/

Answer 1

您可以在加载/重绘事件上移动数据标签 - 您可以根据条形位置计算其所需位置。

  function moveDataLabels() {
   const chart = this;

    chart.series.filter(series => series.type === 'bar' && series.visible).forEach(series => {
      series.points.forEach(point => {
        const dataLabel = point.dataLabel;
        const offset = point.shapeArgs.height + (point.y > 0 ? dataLabel.width : 0);

        dataLabel.attr({
          x: chart.plotWidth - point.plotY - Math.sign(point.y) * offset,
        });
      });
    });
  }

在图表的重绘

上附加功能

 chart: {
  type: 'bar',
  events: {
    load: setEx,
    redraw: moveDataLabels
  }
},

实例和输出

https://jsfiddle.net/4ubeL2x5/