如何让我的 jQuery Flot x 轴旋转标签直接出现在它们所代表的线条下方？

Question

我用 Flot 创建了一个图表（使用 JQuery 1.11）。这是 fiddle — http://jsfiddle.net/y16h8LmL/3/ 。我为 x 轴标签准备了这个 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

只需在 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.

如何让我的 jQuery Flot x 轴旋转标签直接出现在它们所代表的线条下方？

How do I make my jQuery Flot x-axis rotated labels appear directly beneath the lines they represent?

jquery

rotation

flot

axis

labels