1

与 Sencha 论坛中的这篇文章类似，我如何让这个（下图）中的标签垂直显示并与网格对齐？似乎这应该是图表基础，但也许我错过了一些东西。

标签与 x 轴上的网格不匹配

这是带有代码的 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();
4

2 回答 2

6

我将旋转更改为旋转，它可以工作。

label:{
        rotate:{degrees:270}
}

在此处输入图像描述

于 2013-03-21T23:40:50.710 回答
1

像往常一样，sencha 论坛上的人们乐于助人：http ://www.sencha.com/forum/showthread.php?156746-line-chart-time-axis-label-rotate-issue&p= 678586&viewfull=1#post678586

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

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

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

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

于 2013-03-21T21:06:12.680 回答