2014-05-10 45 views
6

我需要在高圖條形圖的y軸上有一些非常長的多行標籤。Highcharts - 長的多行y軸標籤導致以下標籤被刪除

我的問題是,多行標籤會導致以下標籤被刪除 - 可能是某種內部重疊故障安全。

我在那裏我增加了標籤寬度,這樣我可以控制字換行(內換行也產生了我與殘缺的標籤有同樣的問題。)

我包裹自己點'我希望能夠關閉這個功能並且自己處理重疊。

實施例: enter image description here

圖表選擇:

{ 
    "colors": [ 
     "#00AEEF" 
    ], 
    "credits": { 
     "enabled": false 
    }, 
    "chart": { 
     "type": "bar" 
    }, 
    "tooltip": {}, 
    "plotOptions": { 
     "column": { 
      "pointPadding": 0.2, 
      "borderWidth": 0 
     }, 
     "series": { 
      "borderWidth": 0, 
      "dataLabels": { 
       "enabled": true, 
       "format": "{point.y:.1f}%" 
      } 
     } 
    }, 
    "series": [ 
     { 
      "showInLegend": false, 
      "data": [ 
       [ 
        "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 
        70 
       ], 
       [ 
        "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 
        62.5 
       ], 
       [ 
        "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 
        41.25 
       ], 
       [ 
        "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 
        26.25 
       ], 
       [ 
        "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 
        18.75 
       ], 
       [ 
        "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 
        11.25 
       ], 
       [ 
        "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 
        7.5 
       ], 
       [ 
        "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 
        3.75 
       ], 
       [ 
        "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 
        3.75 
       ] 
      ] 
     } 
    ], 
    "xAxis": { 
     "minorGridLineWidth": 0, 
     "minorTickLength": 0, 
     "tickLength": 0, 
     "type": "category", 
     "labels": { 
      "overflow": "justify", 
      "style": { 
       "color": "#525151", 
       "fontSize": "12px", 
       "lineHeight": "10%", 
       "fontFamily": "Helvetica Neue, Helvetica ,Helvetica,Arial,sans-serif", 
       "width": "999px" 
      }, 
      "y": -10 
     } 
    }, 
    "yAxis": { 
     "min": 0, 
     "title": { 
      "text": "Percent (%)" 
     } 
    } 
} 
+1

你好。我會建議你一個可能的解決方法。爲每個類別添加一些簡短有意義的標籤,並添加一個工具提示,當您將光標移動到條上時,該工具提示應該包含長文本。這裏是一個jsfiddle:http://jsfiddle.net/dWDE6/366/ –

+0

+1因爲我很喜歡。這是一個客戶端請求=/ 如果我不知道 – scottysmalls

+0

嗨,那麼很可能走這條路。如果您從請求中獲取數據,稍後可以添加工具提示文本。這裏是如何添加文本的jsfiddle。 Jsfiddle:http://jsfiddle.net/dWDE6/367/ –

回答