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 に答える