在highcharts中显示每个条形的两个标签（一个在内部，一个在外部）

Question

我想在条形图上显示两个标签。我现在能够显示一个标签。我想要这样的东西。

相反，我会这样

我用来显示标签的代码片段是

plotOptions: {

                            column: {
                                dataLabels: {
                                    enabled: true,
                                    color: "black",
                                    style: {
                                        textOutline: false
                                    }
                                }
                            }
                        }

如何在条形图上显示这些百分比值？提前致谢。

Answer 1

如果要在特定列中放置具有百分比的标签，则应在该系列中添加dataLabels，对于其余列，请使用dataLabels中定义的常用plotOptions。以下代码仅供参考Fiddle link

var data = [7, 12, 16, 32];
var dataSum = 0;
for (var i = 0; i < data.length; i++) {
  dataSum += data[i]
}
var data2 = [5, 19, 14, 13];

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: ''
  },
  xAxis: {
    type: 'category',
  },
  yAxis: {
    min: 0,
  },
  legend: {
    enabled: false
  },
  plotOptions: {

    column: {
      dataLabels: {
        enabled: true,
        color: "black",
        style: {
          textOutline: false
        }
      }
    }
  },
  series: [{
    name: 'first',
    data: data,
    dataLabels: {
      y: 20, /*for placeing lables values inside column*/
      enabled: true,
      formatter: function() {
        var pcnt = (this.y / dataSum) * 100;
        return Highcharts.numberFormat(this.y , 0) +'<br>'+Highcharts.numberFormat(pcnt) + '%';
      }
    }
  }, {
    name: 'Second',
    data: data2,
  }]
});