Скрыть серию диаграмм в ExtJs 4

Я переношу приложение ExtJs 3 в ExtJs 4. Одним из компонентов, который мне нужно изменить, является диаграмма, на которой есть серия баров и строк. Он отображает данные за предыдущий и текущий годы. Помимо диаграммы есть флажок «Сравнить с предыдущим годом». Когда он проверяет, все строки должны быть видимыми и скрытыми, если они не проверены. В ExtJs 3 Я выполнил эту задачу, установив видимость: скрытый для стилей серии таким образом: chart.setSeriesStyles (...). Но в ExtJs 4 эта функция отсутствует, и я не могу найти другого способа скрыть ряды по требованию. Вот код моего графика:Скрыть серию диаграмм в 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 должны быть показаны или скрыты при необходимости (в зависимости от состояния флажка). Кто-нибудь знает, как это сделать?

Thanx.

источник

2012-02-01 ischenkodv

Попробуйте (образец из моего кода):

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

источник

2012-02-02 05:49:00

он скрывает линии, но все точки, которые указывают пики линейных диаграмм, все еще отображаются. – ischenkodv

хорошо, он работает в 4.0.2, не уверен в других версиях. Попробуйте посмотреть исходный код серии. –

Я установил showMarkers: false для строк, чтобы скрыть маркеры вообще. Вот нормально для меня. Другое решение будет полностью воссоздать диаграмму с новой конфигурацией серии. – ischenkodv

Для 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();

источник

2014-04-16 22:07:43 TermiT

Скрыть серию диаграмм в ExtJs 4

ответ

Смежные вопросы