在Extjs 4中動態生成軸和系列

Question

我想根據json響應動態生成Y軸。例如：

{ 
"totalCount":"4", 
"data":[ 
    {"asOfDate":"12-JAN-14","eventA":"575","eventB":"16","eventC":"13",...}, 
    {"asOfDate":"13-JAN-14","eventA":"234","eventB":"46","eventC":"23",...}, 
    ...and many more. 
] 
} 

我想要生成折線圖date vs event。日期位於x軸上，eventA，eventB，...等應位於Y軸上。到目前爲止，我試過這個：

var fieldsForChart = ['eventA','eventB',...]; //This is hard coded. 
Ext.define("TestBug.view.TrendsChart", { 
extend: "Ext.chart.Chart", 
alias: "widget.trendschart", 
store: "Trends", 
style: 'background:#fff', 
animate: true, 
shadow: true, 
theme: 'Category1', 
legend: {position: 'right'}, 
axes: [ 
    { 
     type: "numeric", 
     position: "left", 
     fields: [fieldsForChart], 
     title:"Start Open", 
    }, 
    { 
     type: "Time", 
     dateFormat:"d-M-y", 
     position: "bottom", 
     fields: "asOfDate", 
     title: 'Date' 
    } 
], 
series: [ 
    { 
     type: "line", 
     axis: "left", 
     xField: "asOfDate", 
     yField: "fieldsForChart " 
    } 
] 
}); 

我仍然無法繪製圖表。我想基於json響應動態地渲染軸和系列。希望你能幫助。提前致謝。 :)

這裏是我的模型：

Ext.define("TestBug.model.Trend", { 
extend: "Ext.data.Model", 
fields: [ 

    {name:"asOfDate",type:"date",dateFormat:"d-M-y"}, 
    {name:"eventA",type:"int"}, 
    {name:"eventB",type:"int"}, 
    ...and so on. 
] 
}); 

這裏事件的所有東西都是硬編碼的，但我要動態地生成它。

Answer 1

我覺得有點晚了，但我有你的問題的答案，經過相同的，最終能夠找到解決方案。

此功能爲我的作品，發送參數：
圖：對象圖線
目標：這是參考調用後端的數據（你可以omite）
xField：這是我需要呈現數據在類別軸

prepareChartLine: function(chart, objective, xField) { 
    // the model and store structure it's only to prevent error at render  
    Ext.define('crm.model.' + objective, { 
     extend: 'Ext.data.Model', 
     fields: [] 
    }); 
    //you can config the store whatever you want 
    var store = Ext.create('Ext.data.Store',{ 
     extend  : 'Ext.data.Store', 
     model  : 'crm.model.' + objective, 
     proxy: { 
      type: 'ajax', 
      url: './php/Request.php', 
      reader: { 
       type: 'json', 
       root: 'data' 
      } 
     }, 
     autoLoad: false 
    }); 

    Ext.Ajax.request({ 
     url:'./php/Request.php', 
     params:{ 
      instruction:'read', 
      objective:objective 
     }, 
     success: function(response){ 
      var data = Ext.decode(response.responseText); 
      store.model.setFields(data.fields); 

      //set array series 
      var series = []; 
      //clear series 
      chart.series.clear(); 
      for(var field in data.fields){ 
       if(data.fields[field] !== xField){ 
        chart.series.add({ 
         type:'line', 
         xField:xField, 
         yField:data.fields[field] 
        }); 

        series.push(data.fields[field]); 
       } 
      } 

      var mAxes = chart.axes.items; 
      for(var axis in mAxes){ 
       if(mAxes[axis].type === "Numeric"){ 
        mAxes[axis].fields = series; 
        mAxes[axis].maximum = data.maximum; 
        mAxes[axis].minimum = data.minimum; 
       } 
      } 
      chart.axes.items = []; 
      chart.axes.items = mAxes; 
      chart.bindStore(store); 
      chart.redraw(); 
      chart.refresh(); 


      store.loadRawData(data.data, false); 
     }, 
     failure: function(response){ 
      Ext.Msg.alert('GascardPay',response); 
     } 
    }); 

} 

而且你必須配置的響應JSON這樣

{ 
    fields: [ 
     "Otro", 
     "Otro2", 
     "Otro N", 
     "fecha" 
    ], 
    data: [ 
     { 
      Otro: 12, 
      Otro2: 2, 
      Otro N: 30, 
      fecha: "2015-01-03" 
     }, 
     { 
      Otro: 17, 
      Otro2: 8, 
      Otro N: 0, 
      fecha: "2015-01-04" 
     }, 
     { 
      Otro: 32, 
      Otro2: 21, 
      Otro N: 3, 
      fecha: "2015-01-05" 
     }, 
     { 
      Otro: 25, 
      Otro2: 27, 
      Otro N: 15, 
      fecha: "2015-01-06" 
     }, 
     { 
      Otro: 21, 
      Otro2: 6, 
      Otro N: 40, 
      fecha: "2015-01-07" 
     } 
    ], 
    minimum: 0, 
    maximum: 40 
}