jQuery flot: sơ đồ thanh có nhãn trục rất dài

Question

Tôi đang cố triển khai sơ đồ thanh với kho jQuery plugin. Tôi phải hiển thị nhãn thay vì số trên trục x và các nhãn này có thể rất dài.

tôi có thể xoay các nhãn sử dụng CSS, vì vậy mà họ không chồng chéo lên nhau:

.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; 
} 

Tuy nhiên, sử dụng giải pháp này tôi nhận được một không gian trống rỗng unestetical giữa trục y và nhãn của nó. Xem http://jsfiddle.net/QQkfy/2/

Điều này có thể do nhãn ban đầu (tức là sửa đổi CSS trước) được đặt ở giữa các thanh. Bất kỳ ý tưởng làm thế nào tôi có thể khắc phục vấn đề này?

Answer 1

Thử thay đổi nhãnWidth cho trục x. Se tài liệu 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

nếu bạn muốn khắc phục vấn đề trục y nhãn và không muốn có nhãn trục x bọc, css phong cách white-space: nowrap; sẽ giúp.

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