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/）。< / p>

Answer 2

您不必在plotOptions中指定x-offset，但对于每个不同的系列，请参阅：http://jsfiddle.net/2Ht35/3/

        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]
        }]

Answer 3

我长期使用的一个选项可能会帮助您，以编程方式放置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
    });
});

具有负堆栈的Highcharts栏：如何定位数据标签

3 个答案: