Заполнение графа Extjs с помощью json не работает - PullRequest
Новая
       10

Заполнение графа Extjs с помощью json не работает

1 голос
/ 06 июля 2010

Итак, я пытаюсь заполнить линейный график Extjs. Я создал магазин JSON, который извлекает JSON с удаленной страницы, и по какой-то причине мой график не заполняется.

Вот мой код Ext: 

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

Не могу понять, почему это не сработает. Появляется ось графика, но линия не отображается.

Ответы [ 2 ]

2 голосов
/ 21 декабря 2011

У меня была такая же проблема, даже если store.autoLoad установлено на true

На самом деле все работало замечательно, когда я жестко запрограммировал результаты json на страницу. Но когда я попытался использовать ajax, чтобы извлечь его из базы данных, строка никогда не отображалась! Это не было проблемой при чтении из базы данных. Я проверил, что это определенно тянет из базы данных.

Я решил эту проблему, установив autoLoad в false и добавил store.load() после фактического отображения графика, и он работал совершенно нормально.

1 голос
/ 27 июля 2011

Вы можете захотеть установить для свойства 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 работает, поэтомупочти наверняка параметр автозагрузки, но посмотрите другие параметры в примере ниже.

Спасибо,

Aldo 

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