高图栏-在图的右端显示DataLabel

Question

我需要dataLabels始终显示在条形图的右端，而不管数据值如何。根据Highcharts API，dataLabel位置只能相对于其当前位置进行调整。有没有办法改变datalabel相对于图表区域的位置？

Answer 1

您还可以在render事件中放置数据标签：

events: {
  render: function() {
    var chart = this;

    chart.series.forEach(function(s) {
      s.points.forEach(function(p) {
        if (p.dataLabel) {
          p.dataLabel.attr({
            x: chart.plotWidth - p.dataLabel.width
          });
        }
      });
    });
  }
}

---

实时演示： http://jsfiddle.net/BlackLabel/yt1joqLr/1/

API参考： https://api.highcharts.com/highcharts/chart.events

Answer 2

您正在寻找类似的东西吗？

如果您使用make the labels HTML elements而不是SVG元素。.

machine2

..使用CSS移动它们很容易：

plotOptions: {
    bar: {
        dataLabels: {
            enabled: true,
            allowOverlap: true,
            //Labels are easier to move around if we switch from SVG to HTML:
            useHTML: true,
        }
    }
}

https://jsfiddle.net/ncbedru8/