Question

使用ExtJS4，我需要在柱形图上画一条直线，表示系列的平均值。有没有人知道这方面的例子或有关于如何做的建议？

Answer 1

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

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

'avg'保持平均值。使用以下系列配置绘制平均线：

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

Answer 2

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

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图表上画一条线以获得系列的平均值

2 个答案: