javascript - 如何在条形图中添加点击事件

Question

我的 View 中有一个条形图。我想在该条形图中添加一个单击事件，即当我单击该条形列的任何条形时，条形图上显示的相应信息应该处于警报中。我必须从我的 Controller 调用该事件。这是我的代码...这是我的观点，我有酒吧

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'
} ]


});

这是我的 Controller ，我必须从中调用事件......

   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'
} ]


});