我使用 flot.js 绘制 x 轴上带有时间戳的图表。由于我在这些图表上会有很多刻度，所以我垂直旋转它们，这样它们就不会重叠。这工作正常，但标签集中在刻度上，并且没有提供足够的空间，因此它们被切断。
我没有使用ticrotor插件滴答声 https://github.com/markrcote/flot-tickrotor。我尝试了一下，发现问题多于好处。相反，我使用的是普通的 css，这是我在 SO 上找到的旋转刻度标签 https://stackoverflow.com/questions/12204191/rotate-flot-tick-labels然而，在帖子中，他们似乎没有遇到我遇到的问题（也许那里缺少一些信息？）。
另外，我需要支持IE8。上面提到的帖子讨论了使用过滤器或-ms-filter，但没有提到实现这一点的CSS。
我的印象是，即使进行刻度旋转，它也会相应地纠正高度，但事实似乎并非如此。我还查看了 flot 的 github，虽然他们提到正在开发这个功能，但它仍然没有实现。
我知道很多人都需要旋转刻度，但我没有找到任何与我的问题类似的东西（居中和截止）。
任何帮助或想法将不胜感激。
#flot_chart div.xAxis div.tickLabel
{
transform: rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
-o-transform:rotate(-90deg); /* Opera */
/*rotation-point:50% 50%;*/ /* CSS3 */
/*rotation:270deg;*/ /* CSS3 */
}
您自己旋转标签时会遇到很多问题。这就是为什么flot-tickrotor毕竟存在。
Flot 调整占位符 div 内画布的大小，为标签留出足够的空间。通过 CSS 旋转它们，你可以 1.) 围绕 div 的中心旋转（因此它们进入画布区域 - 提示你需要将它们向下移动）和 2.) 你溢出了 div 容器（提示 - 你需要扩展父占位符 div)。您链接到的示例有效，因为文本已换行并且旋转或不旋转的大小大致相同。
现在flot-tickrotor通过挂钩 flot 的低级代码并调整画布大小以为旋转标签腾出空间来处理这些问题（它还摆脱了标签 div 并使用画布绘制标签 - 这有助于旧的 IE）。
因此，如果您确实想自己旋转标签，请研究插件的代码并享受重新创建其功能的乐趣。
EDITS
这里尝试使用您的 CSS 并进行一些动态调整，以使内容适合：
// push the labels down half their width
// while we are at it find longest label height
var longest = -1;
$('#flot_chart .xAxis .tickLabel').each(function(){
var self = $(this);
var width = self.width();
self.css('top',parseInt(self.css('top')) + width/2 - 5);
if (width > longest){
longest = width;
}
});
// now adjust the chart height so we don't overflow
$("#flot_chart").height($("#flot_chart").height() + longest - $('#flot_chart .xAxis .tickLabel').height() + 5);
查看小提琴演示here http://jsfiddle.net/Ltrd6/.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
