Highcharts根据正/负值对齐数据标签

Question

我正在生成一个条形图，目前所有数据标签都向右对齐。

对于正值，我希望数据标签与条形右侧对齐，对于负值，我希望数据标签与条形左侧对齐。

我怎样才能做到这一点？

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        xAxis: {
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    align: 'right',   
                    inside: true
                }
            }
        },
        series: [{
            data: [107, 31, 635, -203, -300]
        }]
    });
});

http://jsfiddle.net/tf2khzh2/1/

Answer 1

可能有很多方法可以做到这一点。一种方法是设置点特定的dataLabels 对象。根据您的数据大小，这可以直接在系列数据上完成，如下所示 (JSFiddle)：

series: [{
    data: [107, 31, 635, { y: -203, dataLabels: { align: 'left' } }, { y: -300, dataLabels: { align: 'left' } }]
}]

或者你可以在初始化图表时使用回调函数来循环你的系列并以同样的方式设置它，像这样 (JSFiddle)：

$('#container').highcharts({
    series: [{
        data: [107, 31, 635, -203, -300]
    }]
    // ...
}, function() {
    for(var i = 0; i < this.series.length; i++) {
        for(var j = 0; j < this.series[i].points.length; j++) {
            var point = this.series[i].points[j];

            if(point.y < 0) {
                point.update({ dataLabels: { align: 'left'} }, false);
            }
        }
    }

    this.redraw();
});

我将仅描述的另一种方法是使用多个系列，一个用于正面，一个用于负面，然后link them 并为每个系列使用不同的align 规范。