旋转Flot Tick标签

我正在尝试将图表底部的日期旋转为垂直与水平。 我正在使用flot-tickrotor，但它似乎无法正常工作。

xaxis: { rotateTicks: 110, mode: "time", timeformat: "%m/%d", minTickSize: [7, "day"], ticks: cpudatearray } 

最终结果不正确，一切都显得混乱。

Answer 1

你可能有更好的运气，只需用CSS处理它而不是使用插件：

 #flotPlaceholder 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 */ } 

显然，将角度改变为你想要达到的目标。 如果要将其用于y轴，只需更改div.xAxis选择器即可。

在我自己的flot图中测试后的结果：

Answer 2

@Brendan的答案看起来可能运行得相当好，但是在你实现之前，我会考虑这是否是你真正想要从可用性角度做的事情。

如果您显示的文本的最大长度为5个字符（来自您的问题，’MM DD’字符串），如果您只标记每三分之一’tick’（或者许多有意义的话），您的图表可能会更容易阅读为您的数据）。

我在仪表板式应用程序上使用我的图表进行了类似的练习。 用户坚持认为他们每个结果都需要一个X标签，但由于图表有96个刻度，所以一旦我将它们旋转90度就会创建相当多的文本，就像你试图的那样。 当我向他们展示每6个点带有水平X标签的模型时，他们更喜欢这个选项，这就是我们为交付的解决方案所采用的选项。 （你的旅费可能会改变..）