javascript - 带有负堆栈的 Highcharts 条 : how to position data labels

Question

我有一个这样的人口金字塔:jsfiddle。我想调整条形图和数据标签之间的距离。但是，当我使用 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]
            }]
        });
    });

});

我想尽可能地保持本土化并接近 Highcharts。我尽量避免使用 useHTML: true，因为我需要将其导出为 SVG，稍后需要一个非常繁琐的脚本(有时这在过去给我带来了麻烦)。但如果没有它就不可能的话，你还是可以建议我这样做。

您知道如何在具有负堆栈的条上实现数据标签的对称定位吗？

在此先致谢并致以最诚挚的问候。

Answer 1

您可以使用填充在标签和栏之间添加空间。最多填充 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'
    }
},
...

不幸的是，如果你过多地增加填充，数字将不再适合空间，你必须增加最大值和最小值(像这样 http://jsfiddle.net/2Ht35/1/ )。