Как сделать, чтобы мои jQuery Flot с поворотными метками X-axis отображались непосредственно под строками, которые они представляют?

Question

Я создал график с Flot (используя JQuery 1.11). Вот скрипка - http://jsfiddle.net/y16h8LmL/3/. У меня есть этот CSS в месте для оси Х этикетки ...

#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, как мне нравится, однако, каждая метка не появляется непосредственно под вертикальной линией, это означает представлять. Как создать ярлыки непосредственно под строкой?

Answer 1

Просто добавьте в translateX в вашем CSS:

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 */ 
} 

Update fiddle.