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规范。

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

1 个答案: