2014-05-10 46 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/ –

回答