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 のフォーラムの人々は、のどを殴るように助けてくれます。 678586&viewfull=1#post678586

dyHTMLの属性を介して設定されているようです：

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

変更dyすると、h-pos が左または右に移動します。残念ながら、組み込みの方法はないようです。

結論: バグである可能性があります (開発者が上記のリンクで言及しているように - しかし、有益なことに拡張しません)。

于 2013-03-21T21:06:12.680 に答える