1

所以我想要做的是填充一个 Extjs 折线图。我创建了一个从远程页面提取 json 的 JSON 存储，由于某种原因，我的图表没有被填充。

这是我的分机代码：

Ext.onReady(function(){

var store = new Ext.data.JsonStore({
    autoDestroy: true,
    url: 'http://myURL.com',
    storeId: 'graphStore',
    root: 'rows',
    idProperty: 'date',
    fields: ['date', 'posts']
});

new Ext.Panel({
    title: 'Posts',
    renderTo: 'test_graph',
    width:500,
    height:300,
    layout:'fit',

    items: {
        xtype: 'linechart',
        store: store,
        xField: 'date',
        yField: 'posts',
        listeners: {
            itemclick: function(o){
                var rec = store.getAt(o.index);
                Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('date'));
            }
        }
    }
});

});

这是应该填充它的 JSON：

{"rows":[
    {"date":"2010-06-11","posts":4},
    {"date":"2010-06-12","posts":3},
    {"date":"2010-06-13","posts":1}, 
    {"date":"2010-06-14","posts":2}
]}

我一生都无法弄清楚为什么这行不通。图形轴显示，但线不呈现。

4

2 回答 2

2

我遇到了同样的问题，即使store.autoLoad设置为true

实际上，当我将 json 结果硬编码到页面中时，一切都很好。但是当我尝试使用 ajax 从数据库中提取它时，该行从未呈现！这也不是从数据库读取的问题。我确认它肯定是从数据库中提取的。

我通过设置autoLoad为false解决了这个问题，并store.load()在实际图表渲染后添加，它工作得很好。

于 2011-12-21T03:19:36.133 回答
1

您可能希望在商店中将 autoLoad 属性设置为 true，例如：

var logsRemoteJsonStore = new Ext.data.JsonStore
({
    proxy: logsRemoteProxy
  , storeId: 'ourRemoteStore'
  , autoLoad: true
  , fields: logsRecordFields

});

事实上，验证了来自http://joefreeman.co.uk/projects/extstock/part-2.html的以下代码确实有效，因此几乎可以肯定是 autoload 参数，但请查看以下示例中的其他参数。

Ext.onReady(function () {
    var store = new Ext.data.JsonStore({
        baseParams: {
            symbol: 'GOOG'
        },
        autoLoad: true,
        url: '/CMSAdmin/ReadSiteStatisticsEightMonthSummary/',
        root: 'data',
        fields: ['date', 'close']
    });

    new Ext.Window({
        title: 'GOOG',
        width: 400,
        height: 300,
        items: new Ext.chart.LineChart({
            store: store,
            xField: 'date',
            yField: 'close'
        })
    }).show();

});

json:

{
  "symbol": "GOOG",
  "start": 1279627043,
  "span": 32140800,
  "data": [{
    "close": 462,
    "date": "2010-08-20"
  }, {
    "close": 476,
    "date": "2010-09-09"
  }, {
    "close": 527,
    "date": "2010-09-28"
  }, {
    "close": 601,
    "date": "2010-10-15"
  }, {
    "close": 620,
    "date": "2010-11-03"
  }, {
    "close": 591,
    "date": "2010-11-22"
  }, {
    "close": 592,
    "date": "2010-12-10"
  }, {
    "close": 598,
    "date": "2010-12-30"
  }, {
    "close": 631,
    "date": "2011-01-19"
  }]
}
于 2011-07-27T07:24:19.113 回答