Flot - xaxisラベルを互いに重ならないようにする方法

Question

私はflotチャートに問題があります。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} 
       } 
      }; 

私はすでにそれを検索し、この1についての答えを見つけることができません。

Answer 1

これを試して、ツールチップにホバーの完全な名前を表示することができます。

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