ExtJS 4 Chartのラベルを非表示または表示するためのチェックボックスを作成する

Question

私は以下のコードでチャートを作成しました。また、チャートラベルを表示または非表示にするハンドラ関数のチェックボックスもあります状態。私の質問は、実際のチャート値を隠すことなく、ラベルを隠すようにする方法です。

// checkbox handler code 
handler: function() { 
    if(Ext.getCmp('chk_showLabels').getValue()) { 
     // function to show labels here 
    } else { 
     // function to hide labels here 
    } 
} 
// Chart code 
{ 
xtype : 'chart', 
animate : true, 
id : 'chart', 
width : 996, 
height : 432, 
shadow : false, 
store : volumes, 
theme : 'Category1', 
axes : [{ 
     type : 'Numeric', 
     position : 'right', 
     fields : ['participacao'], 
     title : 'Percentual', 
     label : { 
      renderer : Ext.util.Format.numberRenderer('0.00%') 
     } 
    }, { 
     type : 'Numeric', 
     position : 'left', 
     grid : true, 
     fields : ['volume'], 
     title : 'Volume', 
     label : { 
      renderer : Ext.util.Format.numberRenderer('0./i') 
     } 

    }, { 
     type : 'Category', 
     position : 'bottom', 
     fields : ['data'], 
     label : { 
      rotate : { 
       degrees : 270 
      } 
     } 
    } 
], 
series : [{ 
     type : 'column', 
     axis : 'right', 
     xField : 'data', 
     yField : ['participacao'] 
    }, { 
     type : 'line', 
     axis : 'right', 
     xField : 'data', 
     yField : ['participacao'], 
     smooth : true, 
     fill : true, 
     style : { 
      opacity : .1 
     }, 
     label : { 
      renderer : Ext.util.Format.numberRenderer('0./i') 

     }, 
     markerConfig : { 
      type : 'circle', 
      size : 5 
     }, 
     tips : { 
      trackMouse : true, 
      width : 148, 
      height : 36, 
      renderer : function (storeItem, item) { 
       this.setTitle('Participação: ' + Ext.util.Format.number(storeItem.get('participacao'), "0.00") + '% \n Volume: ' + storeItem.get('volume')); 
      } 
     } 
    } 
] 
} 

どうもありがとう

Answer 1

これは奇妙な方法ですが、それは何らかの形で動作します。

このように表示/非表示にしたいラベルにIDを付けます（すべてのラベルは同じIDを持ちますが、私の知る限りではクラス属性をここに与えることはできませんが、IDと連動します）。彼らはSVGsだのため、多分それは）です

label: { 
    renderer : Ext.util.Format.numberRenderer('0.00%'), 
    id: 'myLabel' 
} 

そして、あなたのチェックボックスハンドラー：私は今日、私の質問を検討し、あなたの答え私はこの作品を作ることができた少しいじった

handler: function(obj) { 
    if(obj.checked) { 
     Ext.select('#myLabel').each(function(item){ 
      item.setVisible(false); 
     }); 
    } else { 
     Ext.select('#myLabel').each(function(item){ 
      item.setVisible(true); 
     }); 
    } 
}