Javascript 带负堆栈的Highcharts条形图：如何定位数据标签

我有一个这样的人口金字塔：。 我想调整条和数据标签之间的距离。但是当我使用

x

参数时，图表中的标签在一边越近，在另一边越远

$(function () {
    var chart,
        categories = ['0-9', '10-19',
            '20-29', '30-39', '40-49', '50-59', '60-69',
            '70-79', '80-89', '90 +'];
    $(document).ready(function() {
        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Population pyramid for Germany, midyear 2010'
            },
            subtitle: {
                text: 'Source: www.census.gov'
            },
            xAxis: [{
                categories: categories,
                reversed: false,
                labels: {
                    step: 1
                }
            }, { // mirror axis on right side
                opposite: true,
                reversed: false,
                categories: categories,
                linkedTo: 0,
                labels: {
                    step: 1
                }
            }],
            yAxis: {
                title: {
                    text: null
                },
                labels: {
                    formatter: function(){
                        return (Math.abs(this.value) / 1000000) + 'M';
                    }
                },
                min: -8000000,
                max: 8000000
            },

            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true,
                        formatter: function() {
                            return Math.round(Math.abs(this.y)/1000) + 'T';
                        },
                        inside: false,
                        x: 10 // <--- This doesn't realy work as I need it to!!!
                    }
                },
                series: {
                    stacking: 'normal'
                }
            },

            tooltip: {
                formatter: function(){
                    return '<b>'+ this.series.name +', age '+ this.point.category +'</b><br/>'+
                        'Population: '+ Highcharts.numberFormat(Math.abs(this.point.y), 0);
                }
            },

            series: [{
                name: 'Male',
                data: [-3630609, -4312120, -5044512, -5107716, -7236736, -5864184, -4456949, -3506268, -1191588, -122814]
            }, {
                name: 'Female',
                data: [3443718, 4090246, 4769441, 4821276, 6854069, 5810335, 4730948, 4354576, 2452173, 482710]
            }]
        });
    });

});

$（函数（）{
var图，
类别=['0-9'、'10-19'，
'20-29', '30-39', '40-49', '50-59', '60-69',
'70-79', '80-89', '90 +'];
$（文档）.ready（函数（）{
$（“#容器”）。高图({
图表：{
类型：'bar'
},
标题：{
正文：“2010年年中德国人口金字塔”
},
副标题:{
文本：“来源：www.census.gov”
},
xAxis：[{
类别:类别,，
相反：错，
标签：{
步骤：1
}
}，{//右侧的镜像轴
相反：是的，
相反：错，
类别:类别,，
链接到：0，
标签：{
步骤：1
}
}],
亚克斯：{
标题：{
文本：空
},
标签：{
格式化程序：函数（）{
返回值（Math.abs（this.value）/1000000）+“M”；
}
},
最低：-8000000，
最高限额：800万
},
打印选项：{
酒吧：{
数据标签：{
启用：对，
格式化程序：函数（）{
返回Math.round（Math.abs（this.y）/1000）+'T'；
},
里面:假,，
x:10/我很久以前使用的一个选项可能会帮助您，即以编程方式放置svg元素。请检查这是否适用于您

$.each(chart.series[0].data,function(i,data){

    position = chart.yAxis[0].toPixels(0);


    if(data.y < 0) 
        position-=10;
    else
        position-=70;

    data.dataLabel.attr({
        x:position
    });
});

$.each（chart.series[0]。数据，函数（i，数据）{
位置=chart.yAxis[0].toPixels（0）；
如果（数据y<0）
位置-=10；
其他的
位置-=70；
data.dataLabel.attr({
x:位置
});
});
您可以使用填充，在标签和条之间添加空间。填充到8似乎适合您的情况

...
plotOptions: {
    bar: {
        dataLabels: {
            enabled: true,
            formatter: function() {
                return Math.round(Math.abs(this.y)/1000) + 'T';
            },
            inside: false,
            padding: 8, // <-- Instead of x
            y: -1 // This is only to beautify
        }
    },
    series: {
        stacking: 'normal'
    }
},
...

。。。
打印选项：{
酒吧：{
数据标签：{
启用：对，
格式化程序：函数（）{
返回Math.round（Math.abs（this.y）/1000）+'T'；
},
里面:假,，
填充：8，//您不必在plotOptions中指定x偏移，但对于每个不同的系列，请参见：

这是给出的最漂亮、最方便的答案。我开始尝试使用
yAxis.maxPadding
，但这不起作用，因为使用了
min
和
max
。我只是不知道并发现了
dataLabels.padding
。谢谢。）如果你想为每个系列单独设置一个特定的位置/距离，这确实是一个有用的答案。但我建议更方便地使用
dataLabels.padding
。这是一个解决方法，我希望使用highcharts选项尽可能保持本地。但感谢你的努力。如果答案有用，我给+1对我来说只是想友好一点。
        series: [{
            name: 'Male',
            dataLabels: {
                x: -10,
            },
            data: [-3630609, -4312120, -5044512, -5107716, -7236736, -5864184, -4456949, -3506268, -1191588, -122814]
        }, {
            name: 'Female',
            dataLabels: {
                x: 10,
            },
            data: [3443718, 4090246, 4769441, 4821276, 6854069, 5810335, 4730948, 4354576, 2452173, 482710]
        }]