javascript - Highcharts : How to fix labels to the top when xAxis rotation is 90°?

Question

这是测试:

$(function() {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'Long xAxis legends',
        },
        xAxis: {
            categories: ['a long category name', 'another long category name', 'a very long category name', 'Thats enormous', 'short', 'a long category name', 'another long category name', 'a very long category name', 'Thats enormous', 'short'],
            labels:{
               rotation:90,
               y:100,
            },
        },
        series: [
            {
            name: 'Some values',
            data: [10, 20, 53, 2.51, 1.35, 10, 20, 53, 2.51, 1.35],
            },
            {
            name: 'Other values',
            data: [22.40, 0.15, 40, 10.73, 13, 22, 15, 40.11, 10, 13],
            }
        ],
        legend: {
            layout: 'vertical',
            align: 'top',
            verticalAlign: 'top',
            x: 50,
            y: 65,
            borderWidth: 0,
            margin: 30
        },
    });
});

}); http://jsfiddle.net/Y5Qhm/1/

我想要一个带有顶部对齐的垂直 xAxis 标签的图表。

在我的真实情况下，我会有更多的数据，所以我只能轮换。

我试过 xAxis 参数: http://api.highcharts.com/highcharts#xAxis.labels

我认为对齐可以解决问题，但是当我将它添加到旋转参数时，图表已损坏。

提前致谢。

Answer 1

使用:

align: 'top'

像这样:

labels:{
   rotation:90,
   align: 'top'
   //y:100,
},

jsFiddle:http://jsfiddle.net/Y5Qhm/2/