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,则有一个名为 ma​​xLabelCharCount 的轴属性。然后将显示最多 12 个字符的标签,如果标签是 20 个字符 (例如: Carbon Sequestration) 会显示像这样的省略号 carbon Seque....,鼠标悬停时会显示工具提示。

【讨论】:

以上是关于dojo 图表 - 轴标签不适合图表的主要内容,如果未能解决你的问题,请参考以下文章

将 y 轴标签的位置更改为 windows 窗体图表的底部

图表轴标签标题过长

Dojo Chart 在 X 轴名称的命名标签中出现问题

减少 Flex 图表上轴标签和刻度标记之间的填充

如何在dojo图中的轴上应用点击事件

matplotlib绘制图表,设置刻度标签最大最小刻度字体大小,label位置刻度轴箭头等