Как добавить событие щелчка в диаграмме столбца

Question

У меня есть диаграмма на диаграмме в моем представлении. Я хочу добавить событие щелчка на этой гистограмме, т.е. когда я нажимаю на любую из столбцов этого столбца столбца соответствующую информацию, которая показ на панели должен быть в alert.i должен вызвать событие от моего контроллера. Вот мой код ... это моя точка зрения, где я есть планку

var baseColor = 'rgb(0,0,0)'; 

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

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 bar=Ext.define('Gamma.view.BarColumnChart', { 
extend : 'Ext.chart.Chart', 
alias : 'widget.barColumnChart', 
id: 'barColumnChart', 
height:300, 
width:Ext.getBody().getViewSize().width*0.6, 


xtype : 'chart', 
theme : 'Fancy', 
animate : { 
    easing : 'bounceOut', 
    duration : 750 
}, 
store : 'BarColumn', 
background : { 
    fill : 'none' 
}, 
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 : [ 'count' ], 
    minimum : 0, 
    maximum : 3000, 
    label : { 
     renderer : Ext.util.Format.numberRenderer('0,0') 
    }, 
    grid : { 
     odd : { 
      stroke : '#555' 
     }, 
     even : { 
      stroke : '#555' 
     } 
    } 
}, { 
    type : 'Category', 
    position : 'bottom', 
    fields : [ 'source' ] 
} ], 
series : [ { 
    type : 'column', 
    axis : 'left', 
    highlight : true, 
    label : { 
     display : 'insideEnd', 
     'text-anchor' : 'middle', 
     field : 'count', 
     orientation : 'horizontal', 
     fill : '#fff', 
     font : '12px Arial' 
    }, 
    renderer : function(sprite, storeItem, barAttr, i, store) { 
     barAttr.fill = colors[i % colors.length]; 
     return barAttr; 
    }, 


    style : { 
     opacity : 0.95 
    }, 
    xField : 'source', 
    yField : 'count' 
} ] 


}); 

и вот мой контроллер от того, где я должен назвать событие ....

init : function() { 
    this.control({ 

    //'BarColumn': getStore(BarColumn), 


    'barColumnChart':{ 

     click:function(){ 


     } 

    } 


}); 

пожалуйста кто-нибудь помогите мне ...

Answer 1

попробуйте добавить прослушиватель для диаграммы

var bar=Ext.define('Gamma.view.BarColumnChart', { 
extend : 'Ext.chart.Chart', 
alias : 'widget.barColumnChart', 
id: 'barColumnChart', 
height:300, 
width:Ext.getBody().getViewSize().width*0.6, 


xtype : 'chart', 
theme : 'Fancy', 
animate : { 
    easing : 'bounceOut', 
    duration : 750 
}, 
listeners : { 
      element : 'element', 
      scope : this, 
      delegate : 'gradients',//try also commenting this 
      tap  : function(e) { 
       e.stopEvent(); 
       console.log(e.target.id); 
       //check the id and call corresponding method according to e.target.id 
      } 
} 
store : 'BarColumn', 
background : { 
    fill : 'none' 
}, 
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 : [ 'count' ], 
    minimum : 0, 
    maximum : 3000, 
    label : { 
     renderer : Ext.util.Format.numberRenderer('0,0') 
    }, 
    grid : { 
     odd : { 
      stroke : '#555' 
     }, 
     even : { 
      stroke : '#555' 
     } 
    } 
}, { 
    type : 'Category', 
    position : 'bottom', 
    fields : [ 'source' ] 
} ], 
series : [ { 
    type : 'column', 
    axis : 'left', 
    highlight : true, 
    label : { 
     display : 'insideEnd', 
     'text-anchor' : 'middle', 
     field : 'count', 
     orientation : 'horizontal', 
     fill : '#fff', 
     font : '12px Arial' 
    }, 
    renderer : function(sprite, storeItem, barAttr, i, store) { 
     barAttr.fill = colors[i % colors.length]; 
     return barAttr; 
    }, 


    style : { 
     opacity : 0.95 
    }, 
    xField : 'source', 
    yField : 'count' 
} ] 


});