dojo 图表 - 轴标签不适合图表答案

【问题标题】：dojo charting - axis labels don't fit on the chartdojo 图表 - 轴标签不适合图表
【发布时间】：2013-08-26 19:52:57
【问题描述】：

我在 dojox/charting/Chart 上有相当长的标签，最终会从图表中显示出来。

我尝试过使用旋转，但标签文本太小，无法阅读。我知道我可以使用标签缩短，但我宁愿在左轴和下轴上都显示完整的标签。

有没有办法可以使用 HTML 和 CSS 来操作标签？我尝试在 Chrome 开发工具中检查 html，但我在 CSS 方面的尝试没有任何帮助。

【问题讨论】：

标签： javascript css dojo axis-labels dojox.charting

【解决方案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....，鼠标悬停时会显示工具提示。

【讨论】：