2

以下のコードでグラフを作成しました。また、ステータスに応じてグラフのラベルを表示または非表示にするハンドラー関数のチェックボックスもあります。私の質問は、実際のグラフの値も非表示にせずにラベルを非表示にするにはどうすればよいですか？

// 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'));
            }
        }
    }
]
}

どうもありがとう

4

1 に答える 1

0

これは奇妙な方法ですが、どういうわけか機能します。

表示/非表示にするラベルに次のようにIDを指定します:(すべてのラベルは同じIDを持ちます。私の知る限り、ここではクラス属性を指定できません。ただし、IDで機能します。おそらくそれは彼らはSVGです）

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);
        });
    }
}
于 2012-05-13T16:10:32.623 に答える