verticalAlign ignored for non 0 rotation

问题

If I try to rotate the data labels in my column charts, I can not align the labels at the bottom of my columns, verticalAlign appears to be completed ignored.

basically trying to use:

plotOptions: {
   column: {
      stacking: 'normal',
      dataLabels: {
         enabled: true,
         verticalAlign: 'bottom',    
         rotation: -90
      }
   }
} 

fiddle with it at: http://jsfiddle.net/FbhAs/

Anyone know a work-around?

-= Jab

回答1:

The dataLabels don't seem to align correctly to the bottom. Instead, use the axis labels themselves. For a column chart, you would put this in xAxis for the chart options.

xAxis: {    
    labels: {
        enabled: true,
        rotation: -90,
        y: -10 // negative goes upwards
    }
}

You can then add styling, a formatter function, etc. as per dataLabels.

回答2:

You can update datalabels position, based on translate() function which allows to "move" svg object for defined postiison.

http://jsfiddle.net/wMLg6/37/

 var bottom = chart.plotHeight - 20;

        $.each(chart.series[0].data,function(i,data){

            data.dataLabel.attr({
                y: bottom
            });
        });

来源：https://stackoverflow.com/questions/16308347/verticalalign-ignored-for-non-0-rotation