javascript 在 Highcharts 条形图中居中数据标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10131575/
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
Centering a data label in Highcharts Bar Chart
提问by isvwannabe
I'm trying to center a label within a bar chart in Highcharts. In my case within an inverted waterfall chart which you can see here:
我试图在 Highcharts 的条形图中将标签居中。在我的例子中，你可以在这里看到一个倒置的瀑布图：
I'm trying to horizontally center a data label within each bar, such that if a data point in the series has a low of 1, and y of 3, the point would sit at 2. I tried the workaround suggested in the high charts docs here:
我正在尝试将每个条形中的数据标签水平居中，这样如果系列中的数据点的低值为 1，y 值为 3，则该点将位于 2。我尝试了高值图表中建议的解决方法文档在这里：
With the latest version, it doesn't seem to affect the rendering by changing the options in the formatter callback.
使用最新版本，它似乎不会通过更改格式化程序回调中的选项来影响渲染。
Any help is appreciated.
任何帮助表示赞赏。
回答by borigas
I know this is old, but I just needed this, so here's how I did it. The solution I settled on is a combo of How to position datalabel at the base of bar seriesand alba lions example, using stackLabels instead of of dataLabels.
我知道这很旧，但我只是需要这个，所以我是这样做的。我确定的解决方案是如何将 datalabel 定位在条形系列和 alba lions 示例的基础上，使用 stackLabels 而不是 dataLabels 的组合。
yAxis:{
stackLabels: {
style: {
color: 'white' // Make the labels white
},
enabled: true, // Enable stack labels
verticalAlign: 'middle', // Position them vertically in the middle
align: 'center', // Align them to the left edge of the bar
formatter: function() {
return categories[this.x];
}
}
}
See jsfiddle
回答by alba lion
I took a quick look at the docs and your example and came up with brute force solution using a dataLabel on your series. Apparently aligning to center will center on the y (e.g. of 3 above). So, I just shifted it over using the x offset on the datalabel. Not really a proper solution but may get you thinking in the right direction:
我快速浏览了文档和您的示例，并在您的系列中使用 dataLabel 提出了蛮力解决方案。显然对齐中心将以 y 为中心（例如上面的 3）。所以，我只是使用数据标签上的 x 偏移量将它转移了。不是一个真正合适的解决方案，但可能会让您朝着正确的方向思考：
series: [{
min: 0,
max: versions.length + 1,
data: [ { low: 1, y: 3 }, { low: 2, y: 4 }, { low: 3, y: 5 }, { low: 3, y: 5 } ],
dataLabels: {
enabled: true,
color: '#FFFFFF',
align: 'right',
x: -130,
y: 10,
formatter: function() {
return versions[this.y - 1];
},
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
Wayback Machine Archived Version - Not functional, but the code is there
回答by ppvela
Try this:
试试这个：
plotOptions: {
series: {
dataLabels: {
enabled: true,
color: '#000000',
useHTML:true,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
},
formatter:function(){
return '<div align="center"><b><span>' + this.point.options.name + '</b><br />'+this.x+' '+this.y+'</span></div>';
},
