Flot - Как сделать ярлык xaxis не перекрывать друг друга

Question

У меня проблема с графикой флота, если у меня длинный текст в xaxis, он будет перекрывать друг друга, поэтому текстовая информация не является хорошей и нечитаемой. Примечание: ярлык xaxis не должен вращаться, он должен быть того же угла. Только можно поставить его ниже или над другим текстом.

Я делаю простой jsfiddle код, вот ссылка: http://jsfiddle.net/t3Vqh/240/

options = { 
       series: { 
        bars: { 
         show: true 
        } 
       }, 
       bars: { 
        align: "center", 
        barWidth: 0.5, 
        fill: 1, 
        fillColor: null 
       }, 
       xaxis: { 
        axisLabelFontSizePixels: 12, 
        axisLabelFontFamily: 'Open Sans', 
        axisLabelPadding: 10, 
        ticks: [ 
       [1, "Testing a long text overlapTesting a long text overlap"], 
       [2, "Testing a long text overlapTesting a long text overlap"], 
       [3, "Testing a long text overlap"] 
      ], 
        min: -0.5, 
        max: 4.5 
       }, 
       yaxis: { 
        axisLabelUseCanvas: false, 
        axisLabelFontSizePixels: 12, 
        axisLabelFontFamily: 'Open Sans', 
        axisLabelPadding: 3, 
        tickColor: "#ffffff", 
        font: { color : "#fff" } 
       }, 
       legend: { 
        noColumns: 0, 
        labelBoxBorderColor: "#000000", 
        position: "nw" 
       }, 
       grid: { 
        borderWidth: 2,   
        backgroundColor: "#000000", 
        margin: {"top" : 30} 
       } 
      }; 

Я уже искать его и не могут найти ответ об этом.

Answer 1

Попробуйте это, а затем вы можете отобразить полное имя при наведении указателя.

.tickLabel { 
    text-overflow: ellipsis; 
    width: 10%; 
    overflow: hidden; 
    white-space: nowrap; 
}