创建一个复选框以在 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);
        });
    }
}