创建复选框以隐藏或显示ExtJS 4图表中的标签

我已经按照下面的代码创建了一个图表，并且还有一个带有处理函数的复选框，我想根据图表的状态显示或隐藏图表标签。我的问题是，如何在不隐藏实际图表值的情况下隐藏标签

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

---

非常感谢

这是一种奇怪的方式，但不知怎的它起作用了

为要显示/隐藏的标签指定一个ID，如下所示：（所有标签都将具有相同的ID。据我所知，我们不能在此处为它们指定Class属性。但它使用ID。可能是因为它们是SVG）

和您的复选框处理程序：

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);
        });
    }
}

---

这是一种奇怪的方式，但不知怎的它起作用了

为要显示/隐藏的标签指定一个ID，如下所示：（所有标签都将具有相同的ID。据我所知，我们不能在此处为它们指定Class属性。但它使用ID。可能是因为它们是SVG）

和您的复选框处理程序：

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);
        });
    }
}

---

我今天复习了我的问题，对你的答案做了一点调整，我成功了。谢谢你的帖子！我今天复习了我的问题，对你的答案做了一点调整，我成功了。谢谢你的帖子！