highcharts 高图根据正值/负值对齐数据标签

0h4hbjxa  于 2023-08-05  发布在  Highcharts
关注(0)|答案(1)|浏览(130)

我正在生成一个条形图,目前所有的数据标签都向右对齐。
对于正值,我希望数据标签与条形图的右侧对齐,对于负值,我希望数据标签与条形图的左侧对齐。
我该如何实现这一点?

$(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/

rqqzpn5f

rqqzpn5f1#

可能有很多方法可以做到这一点。一种方法是设置特定于点的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规范。

相关问题