2016-08-19 3 views
0

Flotでグラフを作成しました(JQuery 1.11を使用)。ここにフィドル - http://jsfiddle.net/y16h8LmL/3/があります。私は私が好きなようにjQuery Flotのx軸回転ラベルは、それらが表す行のすぐ下に表示されますか?

#placeholder div.xAxis div.tickLabel { 
    transform: translateY(15px) rotate(45deg); 
    -ms-transform: translateY(15px) rotate(45deg); 
    /* IE 9 */ 
    -moz-transform: translateY(15px) rotate(45deg); 
    /* Firefox */ 
    -webkit-transform: translateY(15px) rotate(45deg); 
    /* Safari and Chrome */ 
    -o-transform: translateY(15px) rotate(-90deg); 
    /* Opera */ 
    /*rotation-point:50% 50%;*/ 
    /* CSS3 */ 
    /*rotation:270deg;*/ 
    /* CSS3 */ 
} 

これは、x軸のラベルを回転させる...、x軸ラベルの場所で、このCSSを持っている、しかし、各ラベルは、表すように意図されている縦線のすぐ下に表示されません。ラベルをその行のすぐ下から始めるにはどうすればよいですか?

答えて

1

ちょうどあなたのCSSへtranslateXに追加します。

placeholder div.xAxis div.tickLabel { 
    transform: translateY(15px) translateX(15px) rotate(45deg); 
    -ms-transform: translateY(15px) translateX(15px) rotate(45deg); 
    /* IE 9 */ 
    -moz-transform: translateY(15px) translateX(15px) rotate(45deg); 
    /* Firefox */ 
    -webkit-transform: translateY(15px) translateX(15px) rotate(45deg); 
    /* Safari and Chrome */ 
    -o-transform: translateY(15px) translateX(15px) rotate(45deg); 
    /* Opera */ 
    /*rotation-point:50% 50%;*/ 
    /* CSS3 */ 
    /*rotation:270deg;*/ 
    /* CSS3 */ 
} 

更新fiddle

関連する問題