我已经创建了一个图表作为下面的代码,并且还有一个带有处理函数的复选框,我想根据其状态显示或隐藏图表标签。我的问题是,如何在不隐藏实际图表值的情况下隐藏标签?
// 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'));
}
}
}
]
}
非常感谢
答案 0 :(得分:0)
这是一种奇怪的方式,但它以某种方式起作用。
为你希望它显示/隐藏的标签提供一个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);
});
}
}