我正在使用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(){
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;但是这不行.
当然我不是第一个遇到这样的问题的人.任何想法 ？
谢谢
解决方法
看起来不可能在格式化程序中这样做.
但是您可以在图表呈现(加载)后设置它们.尝试这样的东西
$.each(chartObj.series[0].data,function(i,point) {
if(point.y > 100) {
point.dataLabel.attr({x:20});
}
});
在加载回调(或者如果你需要它在重绘回调).
参见示例here.