c# - 旋转浮动刻度标签

Question

我正在尝试旋转图表底部的日期以显示垂直与水平。我正在使用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选择器即可。

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

Answer 2

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

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

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