Ext.js类别轴垂直标签在旋转后不居中

Question

与Sencha论坛中的this帖子类似，如何将此标签（下方的图片）显示为垂直和与网格对齐？看起来这应该是图表基础知识，但也许我错过了一些东西。

以下是带有代码的jsFiddle：http://jsfiddle.net/wilsjd/kg6Ps/8/

Ext.require('Ext.chart.*');

Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);


Ext.define('CPI', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'ReportingPeriod',
        type: 'string'
    }, {
        name: 'PeriodAmount',
        type: 'decimal'
    }, {
        name: 'CumulativeAmount',
        type: 'decimal'
    }]
});

var store1 = Ext.create('Ext.data.Store', {
    model: 'CPI',
    data: [{
        ReportingPeriod: 'Period1',
        PeriodAmount: 1,
        CumulativeAmount: 1.2,
        Target: 1
    }, {
        ReportingPeriod: 'Period2',
        PeriodAmount: 1.2,
        CumulativeAmount: .2,
        Target: 1
    }, {
        ReportingPeriod: 'Period9',
        PeriodAmount: 1.5,
        CumulativeAmount: 0.8,
        Target: 1
    }]
});

var chart = Ext.create('Ext.chart.Chart', {
    style: 'background:#fff',
    animate: true,
    theme: 'Category1',
    store: store1,
    width: 300,
    height: 300,

    renderTo: 'chart',
    axes: [{
        type: 'Numeric',
        position: 'left',
        fields: ['PeriodAmount', 'CumulativeAmount'],
        title: 'CPI'                       
    },{
        type: 'Category',
        position: 'bottom',
        fields: ['ReportingPeriod'],
        title: 'Reporting Period',
         label   : {
             rotation:{degrees:270}

        }

    }],
    series: [{
        type: 'column',
        axis: 'left',
        xField: 'ReportingPeriod',
        yField: 'PeriodAmount', 
        renderer: function(sprite, record, attr, index, store) {
            var value = 0;
            if(record.get('PeriodAmount')>=1){
                value = 0;
            }else{
                value = 1;
            }
                var color = ['rgb(127, 255, 127)', 
                             'rgb(255, 0, 50)'
                             ][value];
                return Ext.apply(attr, {
                    fill: color
                });
            }
    }, {
        type: 'line',
        axis: 'left',
        xField: 'ReportingPeriod',
        yField: 'CumulativeAmount',
        markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0,

            }


    }]
});

chart.show();

Answer 1

我将轮换更改为旋转，然后就可以了。

label:{
        rotate:{degrees:270}
}

Answer 2

按照惯例，在sencha的论坛上的人们和喉咙一样有用：http://www.sencha.com/forum/showthread.php?156746-line-chart-time-axis-label-rotate-issue&p=678586&viewfull=1#post678586

它似乎是通过html中的dy属性设置的：

<tspan x="96" dy="3.75">Period1</tspan>

改变dy将向左或向右移动h-pos。不幸的是，似乎并没有一种内置的方式来做到这一点。

底线：它可能是一个错误（在上面的链接中作为开发提及 - 但有助于不扩展）。