Ext Js Slider или Multi Slider с контролем диаграммы

Question

Есть ли способ, которым мы можем иметь слайдер с графикой (например, гистограмма или линейная диаграмма) ?. При изменении ползунка (при условии, что много слайдер с min и max) график должен быть изменен.

Предположим, что регулятор слайдера находится внизу, а графики сверху. Что-то отношение к моему требованию я нашел в следующих Link.Can кто-нибудь предложить мне, как добиться этого ExtJS 4 и ниже

Для примера https://developers.google.com/chart/interactive/docs/gallery/controls

Answer 1

Вы можете использовать ниже фрагмент кода, который я, учитывая ваши требования и пример в https://developers.google.com/chart/interactive/docs/gallery/controls

Ext.application({ 
    name : 'Fiddle', 

    launch : function() { 
     //default global data 
     var data = [{ 'name': 'Michael', 'count': 5 }, 
       { 'name': 'Elisa', 'count': 7 }, 
       { 'name': 'Robert', 'count': 3 }, 
       { 'name': 'John', 'count': 2 }, 
       { 'name': 'Jessica', 'count': 6 }, 
       { 'name': 'Aaron', 'count': 1 }, 
       { 'name': 'Margareth', 'count': 8 } 
     ]; 

     //custom function to filter data by new sliderVal 
     var filterDataByCount = function(sliderVal) { 
      var filteredData = []; 
      for(var i = 0; i < data.length; i++) { 
       //filter data whose count is less than sliderVal 
       if(data[i].count < sliderVal) { 
        filteredData.push(data[i]); 
       } 
      } 
      return filteredData; 
     }; 

     //Define a store with fields name, count of cookies 
     var store = Ext.create('Ext.data.JsonStore', { 
      fields: ['name', 'count'], 
      data: data 
     }); 

     //Define a pie chart with above store 
     var chart = Ext.create('Ext.chart.Chart', { 
      width: 500, 
      height: 350, 
      animate: true, 
      store: store, //store set to one that defined above 
      theme: 'Base:gradients', 
      series: [{ 
       type: 'pie', 
       angleField: 'count', 
       showInLegend: true, 
       tips: { 
        trackMouse: true, 
        width: 140, 
        height: 28, 
        renderer: function(storeItem, item) { 
         this.setTitle(storeItem.get('name') + ' ate ' + storeItem.get('count') + ' cookies'); 
        } 
       }, 
       label: { 
        field: 'name', 
        display: 'rotate', 
        font: '18px Arial' 
       } 
      }] 
     }); 

     //Define slider 
     var slider = Ext.create('Ext.slider.Single', { 
      width: 200, 
      value: 50, 
      increment: 1, 
      minValue: 0, 
      maxValue: 10, 
      listeners: { 
       changecomplete: function(slider, newVal) { 
        //reload chart with filteredData on slider change 
        chart.store.loadData(filterDataByCount(newVal)); 
        //Ideally u should be loading filtered data by doing call to backend with queryparam set to "newVal" 
       } 
      } 
     }); 

     //Define panel that is rendered on body and contains chart, slider items 
     Ext.create('Ext.panel.Panel', { 
      renderTo: Ext.getBody(), 
      layout: 'vbox', 
      items: [ 
       chart, 
       slider 
      ] 
     }) 
    } 
}); 

вы можете сослаться на ссылку на тот же Fiddle link