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

我觉得有点晚了，但我对你的问题有了答案，经历了同样的事情，最终找到了解决方案。

此功能适用于我，发送参数：
图表：对象图表行
objective：它引用了后端调用数据（你可以省略）
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
}

在Extjs 4中动态生成轴和系列

1 个答案: