EXTJS4图标签定位

Question

我想在中间获得标签(90％，85％(。现在有点右侧。我调整了条形和条的X位置的大小，但LAB不受调整的影响。请帮助我如何处理标签X-Position

预先感谢您。

100      90%        85%   (not in the middle, a bit right side 90%, 85%)
     ------     ------     
     |    |     |    |
     |    |     |    |
     |    |     |    |
80 --------------------------      
       Tim        Bob


------- the code   store:  [{T_NM : Tim, T_NUM: 90},   {T_NM: Bob, T_NUM: 85}]
Ext.create("Ext.chart.Chart",{
store:L02_S01, renderTo:"L02_G01",
width: "100%", height:208, animate:true, shadow:true,
axes: [{ fields:["T_NM"],  type:"Category", position:"bottom"  },
   { fields: ["T_NUM"],type:"Numeric", position:"left",minimum:85, maximum:100 }],
series: [{
  renderer:function (sprite,record,attr,index,store){
 return Ext.apply(attr, { fill:'green', width:30, x:Math.max(attr.x,attr.x+ (attr.width-30)/2)  })
 },xfield : "T_NM", yField: "T_NUM", type:"column", 
  label: { field:"T_NUM", display:"outside" }
}]
});

Answer 1

您已在renderer中定义了width属性，这是在创建问题。

这不是定义宽度的好习惯，您可以使用style属性，这将解决您的问题。

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create("Ext.chart.Chart", {
            renderTo: Ext.getBody(),
            store: Ext.create('Ext.data.Store',{
               fields : ['T_NM','T_NUM'],
               data :[{
                'T_NM': 'Tim',
                'T_NUM': 90
            }, {
                'T_NM': 'Bob',
                'T_NUM': 85
            }] 
            }),
            width: "100%",
            height: 208,
            animate: true,
            shadow: true,
            axes: [{
                fields: ["T_NM"],
                type: "Category",
                position: "bottom"
            }, {
                fields: ["T_NUM"],
                type: "Numeric",
                position: "left",
                minimum: 80,
                maximum: 100
            }],
            series: [{
                renderer: function (sprite, record, attr, index, store) {
                    return Ext.apply(attr, {
                        fill: 'green',
                        x: Math.max(attr.x, attr.x + (attr.width - 30) / 2)
                    })
                },
                style : {
                    width : 30
                },
                xfield: "T_NM",
                yField: "T_NUM",
                type: "column",
                label: {
                    field: "T_NUM",
                    display: "outside"
                }
            }]
        });
    }
});