Javascript 是否可以根据值定位 Highcharts dataLabels？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7556473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to position Highcharts dataLabels depending on the value?
提问by 3rgo
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.
我正在使用 Highcharts 显示一个条形图，其中 2 个条形相互重叠，并且在它们的右侧有一个 dataLabels，显示确切的值。
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.
这里的问题是，当值高于 80% 时，标签从图表溢出到框架中，越过其他一些文本，使它们都无法阅读。
Here are my plotOptions:
这是我的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.
我以为我可以使用 随时随地编辑图表选项this.series.chart.options.plotOptions.bar.dataLabels.x -= 20;，但这不起作用。
Surely I'm not the first one who has encountered a problem like that. Any idea ?
当然，我不是第一个遇到类似问题的人。任何的想法 ？
Thanks
谢谢
回答by Bhesh Gurung
Looks like it's not possible to do that from within the formatter.
看起来不可能从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).
在load callback（或者如果您需要在 中redraw callback）。
See example here.
请参阅此处的示例。
回答by jvenema
Here's what I ended up with. The setTimeout is necessary or the dataLabel property doesn't exist on the point:
这就是我的结果。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>';
}
回答by simpixelated
Although Bhesh's answer solves the problem for x/y positioning, Highcharts ignores any changes to the style property of dataLabels (see the problem here). However, you can override the styles of an individual point by passing it through the data object:
尽管 Bhesh 的回答解决了 x/y 定位的问题，但 Highcharts 忽略了对 dataLabels 的 style 属性的任何更改（请参阅此处的问题）。但是，您可以通过将单个点传递给数据对象来覆盖它的样式：
series: [{ data: [29.9, 106, { y: 135, dataLabels: { style: { fontSize: 20 } } }]
I was able to get dynamic styles by iterating over my data before passing the whole object to Highcharts to render.
在将整个对象传递给 Highcharts 进行渲染之前，我能够通过迭代我的数据来获得动态样式。
回答by Travis
I've been trying to figure some of this out myself... it looks like instead of
我一直试图自己弄清楚其中的一些……它看起来不像
this.series.chart.options.plotOptions.bar.dataLabels.x -= 20;
could you use...
你能用...
this.series.options.dataLabels.x = -20;
... at this point I'm trying to understand if I'm able to discern the location of a dataLabel so that I can reposition it if necessary.
...在这一点上，我试图了解我是否能够辨别 dataLabel 的位置，以便在必要时可以重新定位它。
