我正在将ExtJs 3应用程序迁移到ExtJs 4.我需要更改的一个组件是一个包含一系列条形和线条的图表。它显示前几年和当前年份的数据。图表旁边有一个复选框“与上一年比较”。检查时,所有行系列都应该可见,并在未选中时隐藏。 在ExtJs 3中,我通过设置可见性来完成此任务:以这种方式隐藏系列样式:chart.setSeriesStyles(...)。但是在ExtJs 4中,这个功能不存在,我找不到任何其他方法来隐藏按需系列。 这是我的图表的代码:
var store = Ext.create('Ext.data.Store', {
fields: [
'month','data1','data2','data3','prev_data1','prev_data2','prev_data3'
],
proxy: {
type: 'ajax',
url: '/getmonthlystats.php'
}
});
this.statChart = Ext.create('Ext.chart.Chart', {
flex: 1,
store: store,
axes: [{
type: 'Numeric',
position: 'left',
minimum: 0,
maximum: 100,
fields: [
'data1',
'data2',
'data3',
'prev_data1',
'prev_data2',
'prev_data3'
],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true
},{
type: 'Category',
position: 'bottom',
fields: ['month'],
label: {
rotate: {
degrees: 315
}
}
}],
series: [{
type: 'column',
yField: ['data1','data2','data3'],
xField: 'month'
},
{
type: 'line',
yField: 'prev_data1',
xField: 'month'
},{
type: 'line',
yField: 'prev_data2',
xField: 'month'
},{
type: 'line',
yField: 'prev_data3',
xField: 'month'
}]
});
因此,应在需要时显示或隐藏行prev_data1,prev_data2,prev_data3(取决于复选框状态)。有谁知道这样做的方法?
感谢名单。
答案 0 :(得分:3)
试试这个(我的代码中的样本):
handler: function (checkbox, checked) {
if (checked)
chart.series.getAt(index).showAll();
else
chart.series.getAt(index).hideAll();
}
答案 1 :(得分:0)
对于ExtJS 4.2.x
如果您使用'传奇'使用您的图表,此代码将更适合您:
var chart = Ext.getCmp(chartId);
var series = chart.series.getAt(seriesIndex);
if (value) {
series.showInLegend = true;
series.showAll();
} else {
series.showInLegend = false;
series.hideAll();
}
chart.redraw();