在高空作业中,将标签添加到x轴类别的上方 [英] adding labels exactly above x-axis categories in highcharts
本文介绍了在高空作业中,将标签添加到x轴类别的上方的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图放置标签,但是我无法找到xAxis_category的确切位置,以实现图形化。
因此,如果宽度变化,文字会受到干扰,而不会与类别保持一致
http: //jsfiddle.net/akataria/qx4snpvb/8/
I tried to put labels but I am not able to locate the exact location of xAxis_categories realtive to graph. So if width is varied text gets disturbed and not remained aligned with categories http://jsfiddle.net/akataria/qx4snpvb/8/
startX = chart.xAxis[0].minPixelPadding + chart.xAxis[0].left ,
startY = chart.plotTop,
debugger;
r.text('19% yoy increase ', startX , startY)
.css({
color: '#4572A7',
fontSize: '11px',
}).add();
推荐答案
您可以渲染文本一次,然后看看通过元素的边界框来确定文本的宽度,然后使用此信息通过再次渲染来创建正确定位的文本。
You can render the text once, then look at the bounding box of the Element to determine the width of the text, and then use this information to create a correctly positioned text by rendering it again.
例如:
var element = r.text('19% yoy increase ', 0 , 0)
.css({
fontSize: '11px'
}).add();
var width = element.getBBox().width;
element.destroy();
r.text('19% yoy increase ', data[0].plotX + chart.plotLeft - (width/2) , startY)
.css({
color: '#4572A7',
fontSize: '11px'
}).add();
请参阅此JSFiddle 进行演示。
这篇关于在高空作业中,将标签添加到x轴类别的上方的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文