Question

我用Flot创建了一个图表（使用JQuery 1.11）。这是小提琴 - 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

只需在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 */
}

更新fiddle。

如何使我的jQuery Flot x轴旋转标签直接显示在它们代表的线下方？

1 个答案: