ハイライトを棒グラフに保持する方法は？チャートの

Question

var colors = ['url(#v-1)', 
        'url(#v-2)', 
        'url(#v-3)', 
        'url(#v-4)', 
        'url(#v-5)']; 

    var baseColor = '#eee'; 

    Ext.define('Ext.chart.theme.Fancy', { 
     extend: 'Ext.chart.theme.Base', 

     constructor: function(config) { 
      this.callParent([Ext.apply({ 
       axis: { 
        fill: baseColor, 
        stroke: baseColor 
       }, 
       axisLabelLeft: { 
        fill: baseColor 
       }, 
       axisLabelBottom: { 
        fill: baseColor 
       }, 
       axisTitleLeft: { 
        fill: baseColor 
       }, 
       axisTitleBottom: { 
        fill: baseColor 
       }, 
       colors: colors 
      }, config)]); 
     } 
    }); 


    var win = Ext.create('Ext.Panel', { 
     width: 1000, 
     height: 300, 
     hidden: false, 
     maximizable: true, 
     title: 'Column Chart', 
     renderTo: Ext.getBody(), 
     enableToggle: true, 
     pressed: true, 
     layout: 'fit', 
     items: { 
      id: 'chartCmp', 
      xtype: 'chart', 
      theme: 'Fancy', 
      animate: { 
       easing: 'bounceOut', 
       duration: 750 
      }, 
      store: store, 
      background: { 
       fill: 'rgb(17, 17, 17)' 
      }, 
      gradients: [ 
      { 
       'id': 'v-1', 
       'angle': 0, 
       stops: { 
        0: { 
         color: 'rgb(212, 40, 40)' 
        }, 
        100: { 
         color: 'rgb(117, 14, 14)' 
        } 
       } 
      }, 
      { 
       'id': 'v-2', 
       'angle': 0, 
       stops: { 
        0: { 
         color: 'rgb(180, 216, 42)' 
        }, 
        100: { 
         color: 'rgb(94, 114, 13)' 
        } 
       } 
      }, 
      { 
       'id': 'v-3', 
       'angle': 0, 
       stops: { 
        0: { 
         color: 'rgb(43, 221, 115)' 
        }, 
        100: { 
         color: 'rgb(14, 117, 56)' 
        } 
       } 
      }, 
      { 
       'id': 'v-4', 
       'angle': 0, 
       stops: { 
        0: { 
         color: 'rgb(45, 117, 226)' 
        }, 
        100: { 
         color: 'rgb(14, 56, 117)' 
        } 
       } 
      }, 
      { 
       'id': 'v-5', 
       'angle': 0, 
       stops: { 
        0: { 
         color: 'rgb(187, 45, 222)' 
        }, 
        100: { 
         color: 'rgb(85, 10, 103)' 
        } 
       } 
      }], 
      axes: [{ 
       type: 'Numeric', 
       position: 'left', 
       fields: ['Quantidade'], 
       minimum: 0, 
//    maximum: 100, 
       label: { 
        renderer: Ext.util.Format.numberRenderer('0,0') 
       }, 
       title: 'Numero de Processos', 
       grid: { 
        odd: { 
         stroke: '#555' 
        }, 
        even: { 
         stroke: '#555' 
        } 
       } 
      }, { 
       type: 'Category', 
       position: 'bottom', 
       fields: 'Range', 
       title: 'Espaço temporal' 
      }], 
      series: [{ 
       type: 'column', 
       axis: 'left', 
       highlight: true, 
      highlightCfg: { 
        fill: '#a2b5ca' 
       }, 
      label: { 
        display: 'insideEnd', 
        'text-anchor': 'middle', 
        //Numero que aparece em cima da barra 
        field: 'Quantidade', 
        orientation: 'horizontal', 
        fill: '#fff', 
        font: '17px Arial' 
       }, 
       renderer: function(sprite, storeItem, barAttr, i, store) { 
        barAttr.fill = colors[i % colors.length]; 
        return barAttr; 
       }, 
       style: { 
        opacity: 0.95 
       }, 


       listeners: { 
        'itemmousedown': function(item) { 
        if(!flag) return flag; 
        flag = false; 
        var cmp = Ext.getCmp('chartCmp'); 
         var series = cmp.series.get(0); 
          index = Ext.Array.indexOf(series.items, item); 
          selectionModel = grid.getSelectionModel(); 
         selectedStoreItem = item.storeItem; 
         var as = selectedStoreItem.data.Range; 
         storeDadosFiltrados.proxy.extraParams.range = as; 
         storeDadosFiltrados.load(); 


         } 


       }, 
       xField: 'Range', 
       yField: ['Quantidade'] 
      }] 
     }, 
     renderTo:'grafico' 
    }); 


}); 

画像 - >http://alojaimagens.com/viewer.php?file=zz7slhsprnopuoui1mpv.jpg

私は、最初の列を選択する、と私はそれ以上のマウスで、それをクリックしないでください。ハイライトの色は青の変種です。しかし、コードではitemmousedownを使用していますが、なぜマウスが渡すだけで色が変わったのか理解できません。どのように私はマウスのクリックだけで強調表示することができますか？

Answer 1

ハイライトについてはどうですか：偽ですか？ バーをクリックして強調表示したい場合は、バーをクリックして強調表示するリスナーを追加する必要があります。