在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轴上，事件A、事件B，。。。等等应该在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响应动态地呈现axis和series。希望你能帮忙。提前感谢。：)

这是我的型号：

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

我觉得有点晚了，但我已经找到了你的问题的答案，经过同样的过程，终于找到了解决方案。

这个函数对我有效，发送参数：
图表：对象图表行
目标：它是调用后端数据的引用(可以省略)
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
}