旋转浮动刻度标签答案

【问题标题】：Rotate Flot Tick Labels旋转浮动刻度标签
【发布时间】：2012-10-12 03:02:18
【问题描述】：

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

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

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

【问题讨论】：

对此有解决方案的任何想法吗？

标签： c# sql graph flot

【解决方案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 选择器即可。

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

【讨论】：

感谢您的回复 - 图表必须在 IE8 中显示，所以我认为这行不通。
对于较旧的 IE 版本，您可以尝试使用filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);（或者可能是-ms-filter:）。看到这个answer和这个MS reference
另一个选项是加载jqueryrotate，在flot完成绘图后，您可以调用$("#flotPlaceholder div.xAxis div.tickLabel").rotate(270)。请注意，我没有使用过这个包，他的文档指出只有较新的版本 3 支持旋转所有元素类型。旧版本显然只适用于图像。我遇到的另一个选项似乎很有趣。
那个 CSS 选择器不会改变我 X 轴上的任何东西。我在这里问了一个与 OP 类似的问题：stackoverflow.com/questions/16044560/flot-graph-tick-label，但我找不到解决方案。

【解决方案2】：

@Brendan 的回答看起来可能效果很好，但是在您实施之前，我会考虑从可用性的角度来看这是否是您真正想要做的事情。

如果您显示的文本的最大长度为 5 个字符（来自您的问题，“MM DD”字符串），如果您只标记每三个“勾号”（或者许多对您的数据有意义）。

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

【讨论】：

我实际上同意你关于间隔标签的偏好，正如你所看到的那样，我的情节每 3 个月使用一次标签（这是在生产中，尽管没有轮换）。但是，该设计选择取决于@blake-adams。也许他想要轮换还有其他原因。或者也许用户只需要查看间隔版本旁边的旋转版本就可以确定他们也更喜欢它；）
同意。我的意图并不是暗示您的解决方案不正确（毕竟它确实回答了这个问题）。我只是想强调@blake-adams 可能没有想到的设计考虑（因为我有一个非常相似的图表要显示）。