在ExtJs 4中隱藏圖表的系列

Question

我正在將ExtJs 3應用程序遷移到ExtJs4。我需要更改的組件之一是帶有一系列條形圖和線形圖的圖表。 它顯示以前和當前年份的數據。 圖表旁邊有一個復選框“與上一年比較”。 選中后，所有線系列均應可見且未選中時將隱藏。 在ExtJs 3中，我通過以下方式完成了此任務：設置visible：以這種方式隱藏系列樣式：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（取決於復選框狀態）。 有人知道這樣做的方法嗎？

謝謝

Answer 1

試試看（從我的代碼示例）：

handler: function (checkbox, checked) {
    if (checked)
        chart.series.getAt(index).showAll();
    else
        chart.series.getAt(index).hideAll();
}

Answer 2

對於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();