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 の変更前) にバーの下の中央に配置されているためです。この問題をどのように克服できますか?