Нарисуйте линию на графике Extjs для среднего значения ряда

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'
            }
        }
    }
});