Скрийте поредицата от диаграми в ExtJs 4

Мигрирам приложение ExtJs 3 към ExtJs 4. Един от компонентите, които трябва да променя, е диаграма, която има поредица от ленти и линии върху нея. Той показва данните за предходни и текущи години. До диаграмата има квадратче за отметка „Сравнение с предходната година“. Когато е отметнато, всички редови серии трябва да са видими и скрити, когато не е отметнато. В ExtJs 3 направих тази задача, като зададох visibility:hidden за стилове на серия по този начин: 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 трябва да се показват или скриват, когато е необходимо (в зависимост от състоянието на квадратчето за отметка). Някой знае ли как да стане това?

Благодаря.


charts extjs extjs4
person ischenkodv    schedule 01.02.2012    source източник

Отговори (2)


arrow_upward
3
arrow_downward

Опитайте това (пример от моя код):

handler: function (checkbox, checked) {
    if (checked)
        chart.series.getAt(index).showAll();
    else
        chart.series.getAt(index).hideAll();
}
person Andrey Selitsky    schedule 02.02.2012
comment
той скрива линиите, но всички точки, които показват пикове на линейните диаграми, все още се показват. - person ischenkodv; 02.02.2012
comment
добре, работи в 4.0.2, не съм сигурен за други версии. Опитайте да погледнете изходния код на сериала. - person Andrey Selitsky; 02.02.2012
comment
Зададох showMarkers:false за редови серии, за да скрия маркерите изобщо. Това е добре за мен. Друго решение би било пълното пресъздаване на диаграмата с нова конфигурация на серията. - person ischenkodv; 02.02.2012

arrow_upward
0
arrow_downward

За 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();
person TermiT    schedule 16.04.2014