使用ComponentQuery匹配图表中的系列

时间:2013-11-22 13:04:33

标签: extjs charts series

我正在使用ExtJS 4和MVC。我有一个包含两个系列的图表:line和column。单击列时,我需要触发事件。

在控制器中,我使用以下查询来匹配列系列,但不起作用。

this.control({
    '#companyChartItemId[series[type=column]]': {
        itemmouseup:this.onItemMouseUp
    }
});

任何想法我怎么能匹配它?

以下是我的代码:

的应用程序/视图/公司/ chart.js之

Ext.define('Market.view.company.Chart', {
    extend: 'Ext.chart.Chart',
    xtype: 'companyChart',
    requires: ['Market.store.HistoricalMarketData'],
    theme: 'Category1',
    store:'HistoricalMarketData',
    initComponent: function() {
        this.callParent();
    },
    axes: [{
        type: 'Numeric',
        position: 'left',
        fields: ['close'],
        title: 'Price',
        grid: true
    }, {
        type: 'Numeric',
        position: 'right',
        fields: ['volume'],
        title: 'Volume',
        grid: true
    }, {
        type: 'Category',
        position: 'bottom',
        fields: ['time'],
        title: 'Month of the Year'
    }],

    series: [{
        type: 'column',
        axis: 'right',
        xField: 'time',
        yField: 'volume',
        highlight: true,
        markerConfig: {
            type: 'cross',
            size: 3
        }
    }, {
        type: 'line',
        axis: 'left',
        smooth: false,
        fill: false,
        fillOpacity: 0.8,
        xField: 'time',
        yField: 'close'
    }]
});

的应用程序/控制器/ ChartController.js

Ext.define('Market.controller.ChartController', {
    extend:'Ext.app.Controller',
    stores:['MarketData'],
    init: function() {
        this.control({
            '#companyChartItemId[series[type=column]]': {
                itemmouseup:this.onItemMouseUp
            }
        });
    },

    onItemMouseUp: function (item) {
        //do something
    }
});

1 个答案:

答案 0 :(得分:0)

我只想配置你定义系列的监听器/响应函数。您可以在系列中添加侦听器作为配置,请查看文档: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.chart.series.Series-cfg-listeners