Javascript 动态更改图表系列extjs 4

我在MVC架构中使用ExtJS4

我有一个输出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();

var chart=Ext.widget（'drawchart'）；
var字段=[]；
chartStore.each（函数（字段）{
fields.push（Ext.create（'Ext.data.Field'）{
name:field.get（'name'）
}));
});
chartModel.prototype.fields.removeAll（）；
chartModel.prototype.fields.addAll（fields）；
var系列=[]；
对于（变量i=1；i

但它不工作，我认为字段数组总是空的。。。

---

任何帮助都将不胜感激：

交换或重新加载存储将很容易，但是您将很难重新配置axes和a系列的后期。。。Ext的图表并不支持这一点。可以在

myChart.axes

集合中替换轴，对于系列也是如此，然后仔细研究代码，替换移除现有的精灵，等等。但是这是一条愚蠢的道路，因为一旦你的代码对Ext的图表代码的未来演变（发生的情况）非常脆弱，第二，还有一个更简单、更可靠的解决方案。这就是创建一个新图表，删除旧图表，将新图表放在它的位置，然后pouf！用户不会看到差异

您没有提供有关代码的大量信息，因此我将从中找到解决方案

首先，您需要修复您的店铺：

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"
    }
}

请注意，代理将自动捕获响应中的，并相应地重新配置其存储的（隐式）模型。。。所以你不需要你的gloubiboulga自己来做。还值得注意的是，读取器将在其属性中保留原始响应数据的副本；这将有助于获取我们添加的自定义信息

现在，我们有了一个适当的存储，将收到详细的响应，让我们使用它：

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;
            }
        });

---

你能找到你的问题的解决方案吗？请把你的代码贴在fiddle with dummy JSONA上。这篇文章的答案几年前就已经收到了赏金——请提供一些额外的信息，说明为什么这是一个在文章上下文和可用答案中有用的答案。