創建一個復選框以隱藏或顯示ExtJS 4圖表中的標簽

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。據我所知，我們在這里不能給它們提供Class屬性。但是它可以與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);
        });
    }
}