在Extjs圖表上繪製一個系列的平均線

Question

使用ExtJS4，我需要在列圖上劃一條直線表示該系列的平均值。有沒有人知道這個例子，或者有關於如何去做的建議？

Answer 1

我通常在服務器端計算平均值並在商店中保存。例如，我的商店將是：

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...    
} 

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