2012-03-04 11 views
3

私は今extjs 4を使用しています。Ext.chart.axis.Categoryです。extjs4:各単語のカスタム軸ラベルへの方法

しかし、どのように各単語のラベルをカスタマイズしますか?

私は、軸の下にあるラベルに72個の数字があります。太字24と48だけが必要です。

Ext.chart.Labelを確認しましたが、rendererという便利な機能があります。しかし、テキストの変更にのみ使用され、スタイルの変更には使用されません。

私の例のコードスニペット:あなたが必要として

{ 
    xtype: 'chart', 
    id: 'monitorAmmeter72chart', 
    animate: false, 
    region: 'center', 
    store:Ext.data.StoreManager.lookup('monitorAmmeter72Store'), 
    axes: [ 
     { 
      type: 'Category', 
      fields: ['hourDis'], 
      position: 'bottom', 
      title: 'blablabla', 
      grid: true, 
      label:{ 
       renderer:function(v){ 
        if(v == '24'){ 
         return '<b>24</b>';//Note, this won't work. 
        }else{ 
         return v; 
        } 
       } 
      } 
     }, 
     { 
      type: 'Numeric', 
      fields: ['data'], 
      position: 'left', 
      title: 'another blablabla', 
      grid: true, 
      minimum: 0 
     } 
    ], 
    series: [ 
     { 
      type: 'column', 
      axis: 'left', 
      highlight: false, 
      tips: { 
       trackMouse: false, 
       width: 50, 
       height: 28, 
       renderer: function(storeItem, item) { 
       this.setTitle(storeItem.get('data') + ' xx'); 
       } 
      }, 
      style: { 
       fill: '#38B8BF' 
      }, 
      gutter: 20, 
      xField: 'hour', 
      yField: 'data' 
     } 
    ] 
} 

答えて

3

私はExtJSに4.2.1を使用していると私はやってる:

label: { 
renderer: function(v) { 
    if(v == 'Capitale-Nationale'){ 
    this.font = "bold 12px Arial, Helvetica, sans-serif"; 
    this.padding = 5; 
    } 
    else{ 
    this.font = "12px Arial, Helvetica, sans-serif"; 
    this.padding = 5; 
    } 
    return v; 
} 
}, 
0

は、あなたが実際にレンダラとスタイルそれをHTML文字列を作成することができます。それはオプションではありませんか?

+0

私はすでに ''のようなコードを試してみたが、それは動作しません。たぶんそれはSVGを使っているからですが、私はSVGについて何も知りません。 – liuyanghejerry

関連する問題