旋转Flot Tick标签

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

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