我正在使用带有 MVC 架构的 Extjs 4。
我有一个输出此 Json 数据的 python 脚本:
{
"data": [
{
"inAnalysis": 3,
"inQuest": 2,
"inDevelopment": 6,
"total": 12,
"inValidation": 1,
"Month": 1303
},
{
"inAnalysis": 1,
"total": 5,
"Month": 1304,
"inDevelopment": 4
}
],
"success": true,
"metaData": {
"fields": [
{
"name": "inAnalysis"
},
{
"name": "inQuest"
},
{
"name": "inDevelopment"
},
{
"name": "inValidation"
},
{
"name": "isDuplicate"
},
{
"name": "New"
},
{
"name": "total"
}
],
"root": "data"
}
}
我希望我的元数据的字段用作图表系列,所以我有一个像这样的商店:
Ext.define('Proj.store.ChartData', {
extend: 'Ext.data.Store',
autoload: true,
proxy: {
type: 'ajax',
url : 'data/getParams.py',
reader: new Ext.data.JsonReader({
fields:[]
}),
root: 'data'
}
为了将系列添加到图表中,我这样做了:
var chart = Ext.widget('drawchart');
var fields = [];
chartStore.each(function (field) {
fields.push(Ext.create('Ext.data.Field', {
name: field.get('name')
}));
});
chartModel.prototype.fields.removeAll();
chartModel.prototype.fields.addAll(fields);
var series = [];
for (var i = 1; i < fields.length; i++) {
var newSeries = new Ext.chart.BarSeries({
type: 'column',
displayName: fields[i].name,
xField: ['Month'],
yField: fields[i].name,
style: {
mode: 'stretch',
color: this.chartColors[i + 1]
}
});
series.push(newSeries);
chart.series = series;
};
chart.bindStore(chartStore);
chart.redraw();
chart.refresh();
但是它不起作用,我认为 fields 数组始终为空...... 任何帮助将不胜感激:
最佳答案
交换或重新加载商店很容易,但是重新配置轴和后验系列会非常困难... Ext 的图表不支持这一点。可以替换 myChart.axes 集合中的轴,对于系列也是如此,然后仔细研究代码,替换删除现有的 Sprite 等。然而,这是一条愚蠢的道路因为,这一次,您的代码对于 Ext 图表代码的 future 演变(这种情况会发生)来说将非常脆弱,其次,还有一个更简单、更可靠的解决方案。这就是创建一个新图表,删除旧图表,将新图表放在原来的位置,然后噗!用户不会看到差异。
您没有提供有关代码的大量信息,因此我将从 Bar chart example 中找到一个解决方案.
首先,您需要修复您的商店:
Ext.define('Proj.store.ChartData', {
extend: 'Ext.data.Store',
//autoload: true,
autoLoad: true, // there was a type in there
fields: [], // was missing
proxy: {
type: 'ajax',
url : 'data/getParams.py',
// better to inline the proxy (lazy init)
reader: {
type: 'json'
,root: 'data' // and root is an option of the reader, not the proxy
}
// reader: new Ext.data.JsonReader({
// fields:[]
// }),
// root: 'data'
}
});
然后,让我们稍微丰富一下您的回答,以便将客户端对模型的先验知识降至零。我已将 totalField
和 categoryField
添加到 metaData
节点,我们将用于轴和系列:
{
"data": [
{
"inAnalysis": 3,
"inQuest": 2,
"inDevelopment": 6,
"total": 12,
"inValidation": 1,
"Month": 1303
},
{
"inAnalysis": 1,
"total": 5,
"Month": 1304,
"inDevelopment": 4
}
],
"success": true,
"metaData": {
"totalField": "total",
"categoryField": "Month",
"fields": [
{
"name": "Month"
},
{
"name": "inAnalysis"
},
{
"name": "inQuest"
},
{
"name": "inDevelopment"
},
{
"name": "inValidation"
},
{
"name": "isDuplicate"
},
{
"name": "New"
},
{
"name": "total"
}
],
"root": "data"
}
}
请注意,代理将捕获 metaData
自动在响应中并相应地重新配置其商店的(隐式)模型......所以你不需要你的 gloubiboulga 自己做。还值得注意的是,读者将在其 rawData
中保留原始响应数据的副本。属性(property);这对于获取我们添加的自定义信息很有用。
现在我们有了一个可以接收详细响应的适当商店,让我们使用它:
new Proj.store.ChartData({
listeners: {
load: replaceChart
}
});
这将触发 replaceChart
方法,该方法将根据服务器提供的元数据和数据创建一个全新的图表,并销毁并替换旧的图表。函数如下:
function replaceChart(chartStore) {
// Grab the name of the total & category fields as instructed by the server
var meta = chartStore.getProxy().getReader().rawData.metaData,
totalField = meta.totalField,
categoryField = meta.categoryField;
// Build a list of all field names, excluding the total & category ones
var fields = Ext.Array.filter(
Ext.pluck(chartStore.model.getFields(), 'name'),
function(field) {
return field !== categoryField && field !== totalField;
}
);
// Create a pimping new chat like you like
var chart = Ext.create('Ext.chart.Chart', {
store: chartStore,
legend: true,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: [totalField]
}, {
type: 'Category',
position: 'left',
fields: [categoryField]
}],
series: [{
type: 'bar',
axis: 'bottom',
label: {
display: 'insideEnd',
field: fields
},
xField: categoryField,
yField: fields,
stacked: true // or not... like you want!
}]
});
// Put it in the exact same place as the old one, that will trigger
// a refresh of the layout and a render of the chart
var oldChart = win.down('chart'),
oldIndex = win.items.indexOf(oldChart);
win.remove(oldChart);
win.insert(oldIndex, chart);
// Mission complete.
}
关于javascript - 动态变化图表系列extjs 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19053884/