在Extjs 4中动态生成轴和系列 [英] Dynamically generate axis and series in Extjs 4

问题描述

我想基于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，...}，
 ...更多。 
] 
} 
  

我想生成 date vs event 。日期在x轴上，eventA，eventB，...等等应该在Y轴上。到目前为止，我试过这个：

  var fieldsForChart = ['eventA'，'eventB'，...] //这是硬编码。 
 Ext.define（TestBug.view.TrendsChart，{
 extends：Ext.chart.Chart，
 alias：widget.trendschart，
 store：趋势，
 style：'background：#fff'，
 animate：true，
 shadow：true，
 theme：'Category1'，
 legend：{position ：'right'}，
轴：[
 {
 type：numeric，
 position：left，
 fields：[fieldsForChart]，
标题：开始打开，
}，
 {
类型：时间，
 dateFormat：dMy，
 position：bottom 
字段：asOfDate，
标题：'日期'
} 
]，
系列：[
 {
 type：line ，
 axis：left，
 xField：asOfDate，
 yField：fieldsForChart
} 
] 
}）; 
  

仍然我无法绘制图形。我想基于json响应动态渲染轴和系列。希望你能帮忙。提前致谢。 ：）

这是我的模型：

  Ext.define TestBug.model.Trend，{
 extends：Ext.data.Model，
 fields：[
 
 {name：asOfDate，type：date ，dateFormat：dMy}，
 {name：eventA，type：int}，
 {name：eventB，type：int}，
 .. 
] 
}）; 
  

这里所有事件都是硬编码的，但我想动态生成。

解决方案

我觉得这有点迟了，但我有你的问题的答案，经过一遍，终于找到了解决方案。 / p>

此功能适用于我，发送参数：

图表：对象图线

目标：数据在后端（你可以omite）

xField：这是我需要在类别轴中呈现的数据

  prepareChartLine：function（chart，objective，xField）{
 //模型和存储结构只是为了防止在render 
中的错误Ext.define（'crm.model。'+ objective，{
 extends：'Ext.data.Model'，
 fields：[] 
}）; 
 //你可以配置你想要的商品
 var store = Ext.create（'Ext.data.Store'，{
 extends：'Ext.data.Store'，
 model：'crm.model。'+ objective，
 proxy：{
 type：'ajax'，
 url：'./php/Request.php'，
读者：{
 type：'json'，
 root：'data'
} 
}，
 autoLoad：false 
}）; 
 
 Ext.Ajax.request（{
 url：'./ php / Request.php'，
 params：{
 instruction：'read'，
目标：客观
}，
成功：function（response）{
 var data = Ext.decode（response.responseText）; 
 store.model.setFields（data。字段）; 
 
 //设置数组系列
 var 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 axi以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 
} 
  

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.

解决方案

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
}

这篇关于在Extjs 4中动态生成轴和系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！