旋转浮动刻度标签 [英] Rotate Flot Tick Labels

问题描述

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

I'm attempting to rotate the dates on the bottom of my graph to appear vertical versus horizontal. I'm using flot-tickrotor but it doesn't seem to work correctly.

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

最终结果不正确，看起来很混乱.

The end result is not correct, it all appears jumbled.

推荐答案

使用 CSS 而不是使用插件来处理这个问题可能会更好:

You might have better luck just handling this with CSS instead of using the plug in:

#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 选择器.

Obviously change the angle to whatever it is you're trying to achieve. If you want to use this for the y-axis, just change the div.xAxis selector.

在我自己的流程图中测试后的结果:

Result after testing in my own flot graph:

这篇关于旋转浮动刻度标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！