[英]dynamically changing chart series extjs 4
我正在将Extjs 4与MVC体系结构一起使用。
我有一个输出此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"
}
}
我希望将MetaData的字段用作图表系列,因此我有一家像这样的商店:
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,等等。但这是愚蠢的myChart.axes
,因为一旦您的代码将对于Ext的图表代码的未来发展(发生这种情况)非常脆弱,其次,还有一个更简单,更可靠的解决方案。 那就是创建一个新的图表,删除旧的图表,将新的图表放在它的位置,然后倾倒! 用户看不到差异。
您没有提供有关代码的大量信息,因此我将根据“ 条形图”示例给出一个解决方案。
首先,您需要修复商店:
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'
}
});
然后,让我们丰富您的响应,以使对模型的先前客户端知识降至最低。 我已经向metaData
节点添加了totalField
和categoryField
,它们将用于轴和系列:
{
"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
属性中保留原始响应数据的副本。 这对于获取我们添加的自定义信息很有用。
现在我们已经有了一个可以收到详细回复的适当商店,让我们使用它:
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.
}
尝试清除未使用系列的行缓存:
Ext.Array.each(chart.series.items, function(item){
if(!item.items.length){
item.line = null;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.