javascript - 在 Highcharts 中的堆积柱形图顶部显示数据标签

Question

是否可以在堆积图中的列顶部显示数据标签？ fiddle 是here

我想在列顶部显示标签。

$(document).ready(function(){
   var test = [100,0,0,0,0];
   plotDataGroupedByAge(test);
})

function plotDataGroupedByAge(data)
{
   $('#graph_agerange').highcharts({
        chart: {
            type: 'column',
            backgroundColor:'#EFEFEF'
        },
        title: {
            align : "left",
            style:{
               'color':'#26DBA9',
               fontSize   : '20',
               fontWeight :'bold'
            },
            text: 'Age Range'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [
                '15-30',
                '30-45',
                '45-60',
                '60-75',
                '75+',
            ],
            labels: {
                  style: {
                        fontSize   : '15',
                        fontWeight :'bold'
                     }
              },
            lineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',  
            minorTickLength: 0,  
            gridLineWidth: 0,
            tickColor: '#EFEFEF',
        },
        yAxis: {
            max: 100,
            title: {
                text: ''
            },
             labels: {
                  enabled: false
              },
                stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'red'
                }
            },
            gridLineWidth: 0,
            minorGridLineWidth: 0
        },
        credits:false,

        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                stacking: 'normal',     
                pointWidth: 45
            },

        },
        series: [{
                  name: '',
                  data: [100, 100, 100, 100,100],
                  color:'#E1E3E3',
                  showInLegend: false
                },
                {
                  name: '',
                  data: data,
                  color:'#FE9B00',
                  dataLabels:{enabled:true},
                  showInLegend: false,               
                }
             ]
    });
}

编辑

基本上，我想将每一列显示为百分比，显示我保留堆叠的列，一列为灰色，值固定为 100，另一列为橙色以显示百分比。

我想要最终输出类似于

Answer 1

您可以在每个点上使用循环并通过 attr() 函数平移位置。

    var max = chart.yAxis[0].toPixels(chart.series[0].data[0].y, true);

    $.each(chart.series[1].data, function (i, d) {
        d.dataLabel.attr({
            y: max - 20
        });
    });

示例:http://jsfiddle.net/sbochan/L02awbfe/7