Highchart 在条形图中的单个条形下添加文本

Question

我想在单条下添加一个百分比值。这是 Fiddle，它显示所有条形下的百分比。下面也是代码。我想比较最后两个值，然后将它们的百分比添加到最后一个柱形

代码

var colors = ['#a3cb38','#ea2027','#0652dd','#ffc312'];
var dataSum = data.reduce((a,x)=>a+x.y,0);
Highcharts.chart('highchart', {
 chart: {
  type: 'bar', 
  backgroundColor: null,
  height: 270,
  events: {
    load: function() {         
      this.addSeries({
            data: [{x: 0, y: 1},{x: 1, y: 1},{x: 2, y: 1},{x: 3, y: 1}],
            enableMouseTracking: false,
            dataLabels: {
              useHTML: true,
              formatter:function() {
                var pcnt = (data[this.x].y / dataSum) * 100;
                return '<span  class="" style="color:' + this.point.color + '">' + Highcharts.numberFormat(pcnt) + '%' + '</span> <span  class="">' + data[this.x].name + ' this i want put under the bar' + '</span>';
              }}
      }, true);
    }
  }
},
title: {
  text: ''
},
xAxis: {
  type: 'category',
  labels: {
    style: {
      width: '75px',
      'min-width': '75px',
      height: '42px',
      'min-height': '42px',
      align: 'high'
    },
    useHTML : true,
    formatter: function () {
                    return '<div class="myToolTip" title="Hello">'+this.value+'</div>';
                },
  }
},
colors: colors,
yAxis: {
  min: 0,
  gridLineWidth: 0,
  title: {
    text: ''
  },
  gridLineWidth: 0,
  labels:
  {
    enabled: false
  }
},
credits: {
  enabled: false
},
legend: {
  enabled: false
},
plotOptions: {
  series: {
    borderWidth: 0,
    pointPadding: 0.25,
    groupPadding: 0,
    dataLabels: {
      enabled: true,
      crop: false,
      overflow: 'none'
    },
    colorByPoint: true
  }
},

tooltip: {
  headerFormat: '<span style="font-size:11px"> lorem</span><br>',
  pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.f} lala</b><br/>'
},

series: [{
  data: data
}
        ]
 });

输出

预期输出

如何在单个柱下添加百分比？

任何帮助将不胜感激

Answer 1

可以使用单点数据标签配置。

  events: {
    load: function() {
      this.addSeries(..., {
          x: 3,
          y: 1,
          dataLabels: {
            useHTML: true,
            formatter: function() {
              var pcnt = (data[this.x].y / dataSum) * 100;
              return '...';
            }
          }
        }]
      }, true);
    }
  }

现场演示： https://jsfiddle.net/BlackLabel/9dmtawg3/

API参考：https://api.highcharts.com/highcharts/series.column.data.dataLabels

Highchart 在条形图中的单个条形下添加文本

Highchart add a text under single bar in bar chart

javascript

highcharts