Question

我试图并排绘制两个图表，它们将通过传递不同的参数来使用相同的商店，但两个图表都使用第二个商店的值。我可以在Chrome控制台中看到响应，有两个请求和不同的响应是正确的;下面是我的代码。

new FormData($('#buildingBlockForm')[0]);

app.js

Ext.define('testUtility.view.BarChart', {
  extend: 'Ext.chart.Chart',
  alias: 'widget.barChart',
  renderTo: Ext.getBody(),
  store: Ext.create('Ext.data.Store', {
    fields: ['name', 'data'],
    autoLoad: false,
    proxy: {
      type: 'ajax',
      url: 'data/store1',
      reader: {
        type: 'json',
        root: 'Data'
      },
      filterParam: undefined,
      groupParam: undefined,
      pageParam: undefined,
      startParam: undefined,
      sortParam: undefined,
      limitParam: undefined
    }
  }),
  axes: [{
    type: 'Numeric',
    position: 'left',
    fields: ['data'],
    label: {
      renderer: Ext.util.Format.numberRenderer('0,0')
    },
    title: 'Values',
    grid: true,
    minimum: 0
  }, {
    type: 'Category',
    position: 'bottom',
    fields: ['name'],
    title: 'Master'
  }],
  series: [{
    type: 'column',
    axis: 'left',
    highlight: true,
    tips: {
      trackMouse: true,
      width: 100,
      height: 28,
      renderer: function(storeItem, item) {
        this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
      }
    },
    label: {
      display: 'insideEnd',
      'text-anchor': 'middle',
      field: 'data',
      renderer: Ext.util.Format.numberRenderer('0'),
      orientation: 'vertical',
      color: '#333'
    },
    xField: 'name',
    yField: 'data'
  }]
});

两个图表都显示了商店中的数据，无论哪个稍后加载。

Answer 1

当您在定义中调用它们时，两个商店都是同一个商店。你应该在创建类的实例时调用商店，如下所示：

var chart1 = Ext.create( 'testUtility.view.BarChart', {
    id: 'chart1',
    height: 300,
    width: '50%',
    store: store1
} );

最好定义自己的商店：

Ext.define( 'testUtility.store.BarChart', {
    extend: 'Ext.data.Store',
    ...
} );

然后在代码的第一部分之前使用它：

var store1 = Ext.create( 'testUtility.store.BarChart', { options } );

您的options包括对于2家商店不同的额外服务。

Extjs图表挑选错误的商店？

1 个答案: