javascript - 是否可以根据值定位 Highcharts dataLabels？

Question

我正在使用 Highcharts 来显示一个条形图，其中 2 个条形相互重叠，并且在它们的右侧有一个 dataLabels，显示确切的值。

这里的问题是，当该值超过 80% 时，标签会从图表溢出到框架中，覆盖其他一些文本，使它们都无法阅读。

这是我的plotOptions:

plotOptions: {
            bar: {
                groupPadding: 0.5,
                pointWidth : 30,
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    y:-5,
                    color:"black",
                    style: {
                        fontSize: "12px"
                    },
                    formatter: function(){
                        if(this.y > 80)
                        {
                            this.series.chart.options.plotOptions.bar.dataLabels.x -= 20;
                        }
                        if(this.series.name == "Tests OK")
                            return "Tests OK : <strong>"+Math.round(this.y*10)/10+"%</strong>";
                        else
                            return "<br/>Tests Executed : <strong>"+Math.round(this.y*10)/10+"%</strong>";
                    }
                }
            }
        }

我以为我可以使用 this.series.chart.options.plotOptions.bar.dataLabels.x -= 20; 随时随地编辑图表选项，但这不起作用。

当然，我不是第一个遇到这种问题的人。有什么想法吗？

谢谢

Answer 1

看起来不可能从 formatter 中做到这一点。

但您可以在图表呈现(加载)后设置它们。尝试这样的事情

$.each(chartObj.series[0].data, function(i, point) {
    if(point.y > 100) {
        point.dataLabel.attr({x:20});
    }
});

在加载回调中(或者如果您需要在重绘回调中)。

参见示例 here .