Highcharts：将数据标签图例放在列中

Question

我想在列中移动数据标签。在下面的示例中，我希望10月位于列中的“20”文本下方。

我怎样才能做到这一点 ？

这是一个有效的fsfiddle：http://jsfiddle.net/cfu6fe5e/

$(function () {
    Highcharts.chart('container', {
        chart: {
            type: 'column',
            backgroundColor:'rgba(255, 255, 255, 0.1)'
        },
        plotOptions: {
            series: {
                pointPadding: 0.01,
                groupPadding: 0,
            }
        },
        title: {
            text: ''
        },
        colors: [
           '#ffffff'
        ],
        credits: {
                enabled: false
            },
        xAxis: {
            type: 'category',
            labels: {
                rotation: -45,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        exporting: {
            buttons: {
                contextButton: {
                    enabled: false
                }    
            }
        },
        yAxis: {
                gridLineWidth: 0,
            minorGridLineWidth: 0,
            min: 0,
            labels: {
                enabled: false
            },
            title: {
                text: ''
            }
        },
        series: [{
                showInLegend: false,
            name: 'Ordered subscriptions',
            data: [
                ['October', 20],
                ['November', 19],
                ['December', 10]
            ],
            dataLabels: {
                    inside: true,
                enabled: true,
                color: '#376fbb',
                align: 'center',
                verticalAlign:'bottom',
                y: 20,
                style: {
                    width:100, 
                    fontSize: '12px',
                    fontFamily: 'Avenir'
                }
            }
        }]
    });
});

Answer 1

尝试使用Formatter并使用HTML

dataLabels: {
            inside: true,
            enabled: true,
            color: '#376fbb',
            verticalAlign:'bottom',
            formatter: function() {
                return  '<span style="width:20px;padding-left:15px">' + this.y + '</span><br/> <span style="width:20px;">' +this.point.name + '</span>';
            },
            y: 10,
            useHTML:true,
            align: 'center',
            style: {
                fontSize: '15px',
                fontFamily: 'Avenir'
            }
        }

小提琴：http://jsfiddle.net/4jfbLouq/

Answer 2

尝试这样的事情

xAxis: {
        type: 'category',
        labels: {
        align: 'left',
            x: 0,
            y: -2
        ,
            rotation: -45,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },