Dynamically generate axis and series in Extjs 4

问题

I want to generate Y axis dynamically based on json response. for example :

{
"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.
]
}

And I want to generate line chart of date vs event. Date is on x-axis and eventA,eventB,...so on should be on Y-axis. So far I tried this :

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  "
    }
 ]
});

Still I am not able to plot the graph. I want to render axis and series dynamically based on json response. Hope you can help. Thanks in advance. :)

Here is my model :

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.
]
});

Here all things for events are hard coded but I want to generate it dynamically.

回答1:

I think it's a little late, but I have the answer to your question, go through the same and finally was able to find the solution.

This function works for me, send parameters:
chart: object chart-line
objective: it's reference to call the data in backend (you can omite)
xField: it's the data that I need to render in category axis

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

}

And you have to config a response JSON like this

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

来源：https://stackoverflow.com/questions/21171049/dynamically-generate-axis-and-series-in-extjs-4