jQuery float : bar diagram with very long axis labels

Question

我正在尝试使用 jQuery 插件 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
}