动态更改图表系列extjs 4

Question

我使用Extjs 4与MVC体系结构。

我有一个Python脚本，输出该JSON数据：

{ 
"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(); 

，但它不工作，我觉得领域数组总是空... 任何帮助，将不胜感激：

Answer 1

交换或重装店很容易，但是你有一个非常艰难的时间重新配置轴并且后验系列...... Ext的图表并不支持这一点。这将有可能取代myChart.axes集合中的轴，以及系列中的轴，然后仔细研究代码，替换删除现有的精灵等。然而，这是愚蠢的路径，因为一旦你的代码将非常对Ext图表代码的未来演变（发生这种情况）很脆弱，其次是更简单可靠的解决方案。这是创建一个新的图表，删除旧的图表，把新的图表，并pouf！用户将看不到差异。

您没有提供有关您的代码的大量信息，因此我将在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财产中保留原始回复数据的副本;这对于获取我们添加的自定义信息非常有用。

现在我们已经将收到一份详细的响应适当的店，让我们使用它：

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

Answer 2

尝试清除未使用的一系列线缓存：

Ext.Array.each(chart.series.items, function(item){ 
      if(!item.items.length){ 
       item.line = null; 
      } 
     });