Question

我正在使用Highcharts显示条形图，其中2个条形图相互重叠，右边有一个dataLabel，显示确切的值。

这里的问题是当值超过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});
    }
});

<{1>}中的

（如果您需要load callback）。

参见示例here。

Answer 2

这是我最终的结果。必须使用setTimeout或者该点上不存在dataLabel属性：

formatter: function () {
    var point = this.point;
    window.setTimeout(function () {
        if (point.s < 0) {
            point.dataLabel.attr({
                y: point.plotY + 20
            });
        }
    });
    //this.series.options.dataLabels.y = -6;
    var sty = this.point.s < 0 ? 'color:#d00' : 'color:#090;' //other style has no effect:(
    return '<span style="' + sty + '">' + Math.abs(this.point.s) + '</span>';
}

Answer 3

虽然Bhesh的答案解决了x / y定位的问题，但Highcharts忽略了对dataLabels（see the problem here）的样式属性的任何更改。但是，您可以通过将数据对象传递给数据对象来覆盖单个点的样式：

series: [{ data: [29.9, 106, { y: 135, dataLabels: { style: { fontSize: 20 } } }]

example from Highcharts docs

在将整个对象传递给Highcharts进行渲染之前，我通过迭代我的数据来获得动态样式。

Answer 4

我一直试图自己解决这个问题...看起来不是

this.series.chart.options.plotOptions.bar.dataLabels.x -= 20;

你可以使用......

this.series.options.dataLabels.x = -20;

...此时我正在试图理解我是否能够辨别出dataLabel的位置，以便我可以在必要时重新定位它。

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

4 个答案: