Extjs4 在Extjs图表上画一条线表示一个系列的平均值

使用ExtJS4，我需要在柱状图上画一条直线，指示序列的平均值。有人知道这方面的例子吗，或者对如何做有什么建议吗？

我通常在服务器端计算平均值，并保存在商店中。对于exmaple，我的店铺将是：

Ext.data.Store({
    fields: ['name','active','avg'],
    autoLoad: true,
    proxy: {
    type: 'ajax',
    url : '/location/to/data'
    }
}) 

“平均值”保存平均值。使用以下系列配置绘制平均线：

{
    type: 'line',
    xField: 'name',
    yField: 'avg',
    showMarkers: false    // Ensures that markers don't show up on the line...              
}

---

我通常在服务器端计算平均值并保存在商店中。对于exmaple，我的店铺将是：

Ext.data.Store({
    fields: ['name','active','avg'],
    autoLoad: true,
    proxy: {
    type: 'ajax',
    url : '/location/to/data'
    }
}) 

“平均值”保存平均值。使用以下系列配置绘制平均线：

{
    type: 'line',
    xField: 'name',
    yField: 'avg',
    showMarkers: false    // Ensures that markers don't show up on the line...              
}

---

或者我们可以在客户端这样计算。这是一个工作样本

var container = Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    layout: 'fit',
    items: {
        xtype: 'cartesian',
        store: {
            fields: ['month', 'value'],
            data: [{
                month: 'January',
                value: 40
            }, {
                month: 'February',
                value: 30
            }, ]
        },
        axes: [{
            id: 'left',
            type: 'numeric',
            position: 'left',
            fields: 'value',
            grid: true,
            listeners: { // this event we need.
                rangechange: function (axis, range) {
                    var store = this.getChart().getStore();
                    var tmpValue = 0, ortalama = 0, idx = 0;
                    store.each(function (rec) {
                        tmpValue = rec.get('value');
                        ortalama = tmpValue + ortalama;
                        idx++;
                    });
                    ortalama = (ortalama / idx).toFixed(2);
                    this.setLimits({
                        value: ortalama,
                        line: {
                            title: {
                                text: 'Average: ' + ortalama + ' USD'
                            },
                            lineDash: [2, 2]
                        }
                    });
                }
            }
        }, {
            id: 'bottom',
            type: 'category',
            position: 'bottom',
            fields: 'month'
        }],
        series: {
            type: 'bar',
            xField: 'month',
            yField: 'value',
            label: {
                field: 'value',
                display: 'outside',
                orientation: 'horizontal'
            }
        }
    }
});

---

或者我们可以在客户端这样计算。这是一个工作样本

var container = Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    layout: 'fit',
    items: {
        xtype: 'cartesian',
        store: {
            fields: ['month', 'value'],
            data: [{
                month: 'January',
                value: 40
            }, {
                month: 'February',
                value: 30
            }, ]
        },
        axes: [{
            id: 'left',
            type: 'numeric',
            position: 'left',
            fields: 'value',
            grid: true,
            listeners: { // this event we need.
                rangechange: function (axis, range) {
                    var store = this.getChart().getStore();
                    var tmpValue = 0, ortalama = 0, idx = 0;
                    store.each(function (rec) {
                        tmpValue = rec.get('value');
                        ortalama = tmpValue + ortalama;
                        idx++;
                    });
                    ortalama = (ortalama / idx).toFixed(2);
                    this.setLimits({
                        value: ortalama,
                        line: {
                            title: {
                                text: 'Average: ' + ortalama + ' USD'
                            },
                            lineDash: [2, 2]
                        }
                    });
                }
            }
        }, {
            id: 'bottom',
            type: 'category',
            position: 'bottom',
            fields: 'month'
        }],
        series: {
            type: 'bar',
            xField: 'month',
            yField: 'value',
            label: {
                field: 'value',
                display: 'outside',
                orientation: 'horizontal'
            }
        }
    }
});

---

我能想到的最好方法是动态计算序列平均值，并将该值添加到存储中的每个项目，从而添加另一个引用计算值的行序列。我希望ExtJS图表/绘图专家能提出更好的方法。我能想到的最好方法是动态计算序列平均值，并将此值添加到商店中的每个项目中，从而添加另一个引用计算值的行序列。我希望ExtJS图表/绘图专家能提出更好的方法。