弹性图表上轴标签的位置以及如何相对于它们定位事物
我正在使用位于条形图右侧的 AxisRenderer,并且正在寻找一种方法来将 AxisRenderer 中的值的标题定位在其上方。
如何找到轴渲染器中标签的位置? 看起来 AxisRenderer.width 返回图表的宽度,AxisRenderer.x 返回整个图表的边缘。
这是对图片的尝试:
Title
xxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxx axis value
xxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx axis value
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxx
xxxxxxxxx axis value
xxxxxxxxx
我试图将标题放置在 AxisRenderer 定位的“轴值”上方。 基本上,对于非绝对定位的轴,如何确定它在哪里?
I am using an AxisRenderer that is positioned to the right of a BarChart and am looking for a way to position a title for the values in the AxisRenderer above them.
How do you find the position of the labels in an axis renderer? It seems like AxisRenderer.width returns the width of the chart and AxisRenderer.x returns the edge of the whole charts.
Here's an attempts at a picture:
Title
xxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxx axis value
xxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx axis value
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxx
xxxxxxxxx axis value
xxxxxxxxx
I'm trying to position the title above the "axis values" positioned by the AxisRenderer. Basically, for a non absolutely positioned axis, how do you determine where it is?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
我对这个问题做了一些深入的研究,我可能得出了与你相同的结论——没有简单的方法可以做到这一点。 根据我的经验,AxisRenderers 在底层非常复杂(并且不是以特别易于理解的方式编写的)。
然而,为了实现您想要实现的目标,您可以创建自己的 IAxisRenderer 来准确构建您想要的内容(这是一场噩梦......我已经做到了,而且很痛苦)。 您还可以尝试扩展 AxisRenderer 并尝试覆盖将其放置在内置 titleRenderer 中的特定方法(同样,这并不是特别容易或干净,因为在我看来,AxisRenderer 尚未在构建时考虑到扩展)。
两个简单的解决方案将为您节省大量时间。 将标题的位置硬编码在看起来不错的地方。 我想说,在大多数情况下,轴标签不会经常改变,尽管显然我在那里做了假设。 在我看来,最简单的解决方案......改变设计。 您可能需要花费相当多的时间才能获得完全符合您想要的标题。 您需要问自己从中获得的价值是否值得您付出的努力。
抱歉,我无法提供更多帮助。
J
I've done a bit of digging into this problem and i've probably come to the same conclusion that you have - there's no easy way to do this. In my experience AxisRenderers are pretty bloody complicated under the hood (and not written in a particularly understandable way).
However to achieve what you want to achieve you could create your own IAxisRenderer to construct exactly what you want (this is a nightmare... i've done it and it was painful). You could also attempt to extend AxisRenderer and try to override the particular method that positions it's in built titleRenderer (again this isn't particularly easy or clean as in my opinion AxisRenderer hasn't been built with extension in mind).
Two easy solutions that will save you a massive amount of time. Hard code the position of the title in a place that looks ok. I would say in the majority of cases the axis labels won't change that often although obviously i'm making an assumption there. In my opinion the easiest solution... change the design. You're probably going to take quite a bit of time to get the title exactly as you want it. You need to ask yourself if the value you get from it is worth the effort you're putting in.
Sorry I can't be any more help.
J
使用与上述建议类似的方法,我能够计算出位于右侧的 AxisRenderer 所需的 x 和宽度。 就我而言,我使用 GridLines 而不是 CartesianDataCanvas,并且我还有左右垂直 AxisRenderer。
将 UPDATE_COMPLETE 事件的事件侦听器添加到垂直 AxisRenderers。 计算右侧 AxisRenderer 的宽度:
var rightGutterWidth:Number = Chart.width - gridLines.width - Math.abs(leftAxisRenderer.gutters.width);
对于您的情况下的 X 标签位置,您可以做类似的事情:
var rightGutterX:Number =
chart.x + gridLines.width + Math.abs(leftAxisRenderer.gutters.width);
Using something similar to the above suggestion I was able to calculate the desired x and width of an AxisRenderer positioned to the right. In my case I used GridLines instead of CartesianDataCanvas and I also had both a left and right vertical AxisRenderer.
Add an event listener for the UPDATE_COMPLETE event to the vertical AxisRenderers. Calculate the width of the right AxisRenderer:
var rightGutterWidth:Number = chart.width - gridLines.width - Math.abs(leftAxisRenderer.gutters.width);
For the X label position in your case, you could do something similar like:
var rightGutterX:Number =
chart.x + gridLines.width + Math.abs(leftAxisRenderer.gutters.width);
就我个人而言,我没有有弹性图表的来源。 您可能已经完成了此操作,但也许可以查看一下 Flex 源代码,看看您能弄清楚什么?
否则,也许因为您知道图表上每个条形的值和轴的比例...理论上您可以计算出要放置文本的位置?
Personally, I don't have the source to flex-charting. You've probably already done this, but maybe take a look in the flex source to see what you can figure out?
Otherwise, maybe since you know the values of each bar on the graph and scale of the axis... you could theoretically calculate the position where you want to place your text?
使用图表中的 CarthesianDataCanvas 来研究这一点。
请参阅 Adobe 文档:http://livedocs.adobe。 com/flex/3/html/help.html?content=charts_types_06.html -> 在图表中使用事件和效果 -> 在图表控件上绘图
Look into this using the CarthesianDataCanvas into your Chart.
see documentation Adobe: http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_06.html -> Using Events and Effects in Charts -> Drawing on chart controls
查看 Adobe 关于数据标签的教程:
将数据标签添加到图表
这是您正在寻找的内容还是我误解了您的问题?
Check out Adobe's tutorial on data labels:
Adding data labels to charts
Is this what you are looking for or did I misunderstand your question?