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

Question

如何自定义 highcharts 中的数据标签位置，使负值标签位于条形右侧，正值标签位于条形左侧？这是数据标签位置的默认布局:

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

我试过这样做:

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

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

是否有可能实现这样的目标？

如果有帮助，这里有一个 fiddle :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/