Question

我在下面的帖子中遇到了同样的问题：Stackoverflow

但是，当数据包含负值时会出现问题：

$(function () {
$('#container').highcharts({
    chart: {
        type: 'bar',
        height: 700
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
        bar: {
            stacking: 'normal',
            pointPadding: 0,
            groupPadding: 0.2,
            dataLabels: {
                enabled: true,
                align: "right",                    
                inside: false,
                style: {
                    fontWeight: 'bold'
                },
                formatter: function() {
                    var max = this.series.yAxis.max,
                        color =  this.y / max < 0.05 ? 'black' : 'white'; // 5% width
                    return '<span style="color: ' + color + '">' + this.y + ' M</span>';   
                },
                verticalAlign: "middle"
            },
        }
    },

    series: [{
        data: [-29.9, -71.5, -106.4, -129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 2.33]
    }]
});

});

如何解决此问题？

由于

Answer 1

您只需要修改@PawełFus'解决方案以适应负面数字：

formatter: function() {
    var min = Math.abs(this.series.yAxis.min) //Since min can be negative
    var max = Math.abs(this.series.yAxis.max) //Since max can be negative
    var pt = Math.abs(this.y)
    var highest = Math.max(min,max)
    var color =  pt / highest < 0.05 ? 'black' : 'white'; // 5% width
            return '<span style="color: ' + color + '">' + this.y + ' M</span>'
},

使用 highest 变量（，其中包含x轴两侧的最大长度）。你基本上想要距离 origin 的距离。确定数据标签是在内部还是外部。

Math.abs帮助解决了这个问题！

即使数字标记为负数，Highchart中栏内外的数据标签颜色也可以不同吗？

1 个答案: