dojo 图表 - 轴标签不适合图表
Posted
技术标签:
【中文标题】dojo 图表 - 轴标签不适合图表【英文标题】:dojo charting - axis labels don't fit on the chart 【发布时间】:2013-08-26 19:52:57 【问题描述】:我在 dojox/charting/Chart
上有相当长的标签,最终会从图表中显示出来。
我尝试过使用旋转,但标签文本太小,无法阅读。我知道我可以使用标签缩短,但我宁愿在左轴和下轴上都显示完整的标签。
有没有办法可以使用 html 和 CSS 来操作标签?我尝试在 Chrome 开发工具中检查 html,但我在 CSS 方面的尝试没有任何帮助。
【问题讨论】:
【参考方案1】:您可以使标签的宽度固定以使其适合。悬停时,标签的 z-index 比另一个标签高,并显示全宽。
http://jsfiddle.net/RU4Qc/
label
position: relative;
width: 50px;
height: 15px;
display: inline-block;
padding: 2px 5px;
overflow: hidden;
label:hover
width: auto;
z-index: 9999;
background-color: #c0c0c0;
将鼠标悬停在文本上。
【讨论】:
感谢您的建议。不幸的是,我认为它不会起作用,因为标签实际上是由dojox.charting
框架创建的绝对位置 div。当我在 Chrome 开发工具中更改宽度时,它没有效果。【参考方案2】:
我在使用 dojo 图表时注意到的是,标签矩形的宽度由第一个标签长度决定。如果您的第一个标签是所有标签中最长的,那么图表将显示适当的标签,否则它将夹住它们。我想出了两种方法来解决这个问题: 1. 计算最长标签的长度,并将第一个标签填充到这个最大长度。 2. 如果我将其设置为 12,则有一个名为 maxLabelCharCount 的轴属性。然后将显示最多 12 个字符的标签,如果标签是 20 个字符 (例如: Carbon Sequestration) 会显示像这样的省略号 carbon Seque....,鼠标悬停时会显示工具提示。
【讨论】:
以上是关于dojo 图表 - 轴标签不适合图表的主要内容,如果未能解决你的问题,请参考以下文章