jquery - 防止列文本重叠

Question

我有这段代码来显示柱形图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]        
        }]
    });
});

Answer 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,
                }
            }]
        });
    });