我有这段代码来显示柱形图http://jsfiddle.net/Emerald214/wCDnK/8/。问题是它有很多列(大约100个),如何防止列文本相互重叠。
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
//zoomType: 'x'
},
scrollbar: {
enabled: true
},
legend: {
verticalAlign: 'top',
y: 100,
align: 'right'
},
xAxis: {
minRange: 1
},
xAxis : {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', '11', '22', '33', '44', '55', '66', '77', '88', '99', '111', '222', '333', '444', '555']
},
series: [{
data: [1111, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 11, 22, 33, 44, 55, 66, 77, 88, 99, 111, 222, 333, 444, 555]
}]
});
});
答案 0 :(得分:1)
您可以在x轴上旋转标签: http://www.highcharts.com/demo/column-rotated-labels/grid
使用HighChart时添加此设置,这里是带旋转的调用:-90,为了清楚起见,我删除了其余的代码,但这里是小提琴: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-rotated-labels/
$(function () {
$('#container').highcharts({
series: [{
dataLabels: {
rotation: -90,
}
}]
});
});