在ExtJs 4中隐藏图表的系列

时间:2012-02-01 19:09:24

标签: extjs charts extjs4

我正在将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(取决于复选框状态)。有谁知道这样做的方法?

感谢名单。

2 个答案:

答案 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();