Question

我正在尝试使用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前修改）以条形为中心。任何想法我怎么能克服这个问题？

Answer 1

尝试更改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
}

Answer 2

如果你想修复y轴标签的问题，不想让x轴标签包裹，css样式 white-space: nowrap;会有所帮助。

请参阅http://jsfiddle.net/vincentwang/Y4KTT/

jQuery flot：带有很长轴标签的条形图

2 个答案: