Question

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

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

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

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图中测试后的结果： enter image description here

Answer 2

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

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

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

旋转Flot Tick标签

2 个答案: