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

【问题标题】：Ext.js Category axis vertical labels not centered after rotationExt.js 类别轴垂直标签在旋转后不居中
【发布时间】：2013-03-11 05:42:47
【问题描述】：

类似于 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();

【问题讨论】：

标签： extjs sencha-charts

【解决方案1】：

我将 rotation 更改为 rotate 并且它有效。

label:{
        rotate:{degrees:270}
}

【讨论】：

【解决方案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。不幸的是，似乎没有内置的方法可以做到这一点。

底线：它可能是一个错误（正如开发人员在上面的链接中提到的那样——但有用的是没有展开）。

【讨论】：

这是一个很好的发现。你说得对，看来我需要一些方法将 3.75 更改为 -20。