Curseur Ext Js ou curseur multiple avec contrôle de diagramme

Question

Y a-t-il un moyen d'avoir un curseur avec graphique (graphique à barres ou graphique linéaire)? Tout en changeant le curseur (en supposant que le curseur multiple avec min et max) le graphique doit être changé.

Supposons qu'un contrôle de curseur est activé en dessous et que les diagrammes sont supérieurs. Quelque chose de pertinent à mon exigence que je trouve dans la suite Link.Can quelqu'un me suggérer comment y parvenir est ExtJS 4 et au-dessous

Par exemple https://developers.google.com/chart/interactive/docs/gallery/controls

Answer 1

Vous pouvez utiliser l'extrait ci-dessous que je ne compte tenu de votre exigence et l'exemple à 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 
      ] 
     }) 
    } 
}); 

vous pouvez consulter le lien pour le même Fiddle link