是否可以根据值定位Highcharts dataLabels？ [英] Is it possible to position Highcharts dataLabels depending on the value?

问题描述

我使用Highcharts来显示一个条形图，其中两条互相重叠，右边有一个dataLabels，显示确切的值。

这里的问题是，当值超过80％时，标签从图表中溢出到框架中，翻过其他文本，并使它们都不可读。

这是我的 plotOptions ：

  plotOptions：{
 bar：{
 groupPadding：0.5，
 pointWidth：30，
 borderWidth：0，
 dataLabels：{
 enabled：true，
y：-5， 
 color：black，
 style：{
 fontSize：12px
}，
 formatter：function（）{$ b $ if if（this。 y> 80）
 {
 this.se ries.chart.options.plotOptions.bar.dataLabels.x  -  = 20; 
} 
 if（this.series.name ==Tests OK）
 returnTests OK：< strong>+ Math.round（this.y * 10）/ 10 + ％< /强> 中; 
 else 
 return< br />测试已执行：< strong>+ Math.round（this.y * 10）/ 10 +％< / strong>; 
} 
} 
} 
} 
  

I我以为我可以在旅途中编辑图表选项，使用 this.series.chart.options.plotOptions.bar.dataLabels.x - = 20; ，但这不会工作。

当然，我不是第一个遇到过这样的问题的人。任何想法？

谢谢

解决方案

看起来不可能在格式化程序中执行。

但是您可以在图表呈现（加载）后设置它们。试试像这样

  $。each（chartObj.series [0] .data，function（i，point）{
 if（point.y> 100）{
 point.dataLabel.attr（{x：20}）; 
} 
}）; 
  

在加载回调中（或者如果您需要它在 redraw callback ）。

查看示例 here 。

I'm using Highcharts to display a bar chart, with 2 bars overlaying each other, and a dataLabels at the right of them, displaying the exact value.

The problem here is that when the value is above 80%, the label is overflowing from the chart into the frame, going over some other text, and making them both unreadable.

Here are my 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>";
                    }
                }
            }
        }

I thought i could edit the chart options on the go, using this.series.chart.options.plotOptions.bar.dataLabels.x -= 20;, but this doesn't work.

Surely I'm not the first one who has encountered a problem like that. Any idea ?

Thanks

解决方案

Looks like it's not possible to do that from within the formatter.

But you could set them after the chart is rendered (loaded). Try something like this

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

in the load callback (or if you need it in the redraw callback).

See example here.

这篇关于是否可以根据值定位Highcharts dataLabels？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！