9

我正在尝试使用 jQuery-plugin flot 实现条形图。我必须在 x 轴上显示标签而不是数字，这些标签可能很长。

我可以使用 CSS 旋转标签，这样它们就不会重叠：

.flot-x-axis div.flot-tick-label { 
    /* Rotate Axis Labels */
    transform: translateX(50%) rotate(20deg); /* CSS3 */
    transform-origin: 0 0;

    -ms-transform: translateX(50%) rotate(20deg); /* IE */
    -ms-transform-origin: 0 0;

    -moz-transform: translateX(50%) rotate(20deg); /* Firefox */
    -moz-transform-origin: 0 0;

    -webkit-transform: translateX(50%) rotate(20deg); /* Safari and Chrome */
    -webkit-transform-origin: 0 0;

    -o-transform: translateX(50%) rotate(20deg); /* Opera */
    -o-transform-origin: 0 0;
}

然而，使用这个解决方案，我在 y 轴和它的标签之间得到了一个不合理的空白空间。见http://jsfiddle.net/QQkfy/2/

这可能是因为标签最初（即 CSS 之前的修改）位于条形下方的中心。任何想法我该如何克服这个问题？

4

2 回答 2

8

尝试更改 x 轴的 labelWidth。查看 Flots 文档：https ://github.com/flot/flot/blob/master/API.md

xaxis: {
  tickLength: 0,
  ticks: ticks,
  min: -0.5, 
  max: 6.5,
  labelWidth: 30
}
于 2013-05-31T08:26:48.440 回答
2

如果您想解决 y 轴标签的问题并且不想包装 x 轴标签，css 样式 white-space: nowrap;会有所帮助。

见http://jsfiddle.net/vincentwang/Y4KTT/

于 2014-02-27T03:56:38.667 回答