6
我需要在高图条形图的y轴上有一些非常长的多行标签。Highcharts - 长的多行y轴标签导致以下标签被删除
我的问题是,多行标签会导致以下标签被删除 - 可能是某种内部重叠故障安全。
我在那里我增加了标签宽度,这样我可以控制字换行(内换行也产生了我与残缺的标签有同样的问题。)
我包裹自己点'我希望能够关闭这个功能并且自己处理重叠。
实施例:
图表选择:
{
"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 (%)"
}
}
}
你好。我会建议你一个可能的解决方法。为每个类别添加一些简短有意义的标签,并添加一个工具提示,当您将光标移动到条上时,该工具提示应该包含长文本。这里是一个jsfiddle:http://jsfiddle.net/dWDE6/366/ –
+1因为我很喜欢。这是一个客户端请求=/ 如果我不知道 – scottysmalls
嗨,那么很可能走这条路。如果您从请求中获取数据,稍后可以添加工具提示文本。这里是如何添加文本的jsfiddle。 Jsfiddle:http://jsfiddle.net/dWDE6/367/ –