将highcharts数据标签放置在正条的左侧和负条的右侧

Question

如何自定义图表的数据标签位置，以便将负值标签放置在条形图的右侧，将正值标签放置在条形图的左侧？ 这是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/