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

往常一样，人们在煎茶论坛是作为一拳打在喉咙有所帮助：http://www.sencha.com/forum/showthread.php?156746-line-chart-time-axis-label-rotate-issue&p=678586&viewfull=1#post678586

看样子通过dy属性在html中设置：

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

更改dy会左移或右移h-pos。不幸的是，似乎并没有内在的方式来做到这一点。底线：它可能是一个错误（正如在上面的链接中提到的开发者 - 但有用的是不扩展）。