2017-05-02 1 views
1

真ん中にラベル(90%、85%)を得たいと思います。今はちょっと右です。バーとバーのx位置のサイズを調整しましたが、ラボは調整の影響を受けません。 ラベルのX位置を扱う方法を教えてくださいExtjs4 chartラベルの配置

ありがとうございます。

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" } 
}] 
}); 
+0

問題を示す[Sencha Fiddle](https://fiddle.sencha.com/)を作成してください。 – Alexander

答えて

0

あなたは、問題を作成している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" 
       } 
      }] 
     }); 
    } 
}); 
関連する問題