Невозможно создать простую линейную диаграмму в Ext-JS - PullRequest
Новая
       27

Невозможно создать простую линейную диаграмму в Ext-JS

4 голосов
/ 02 августа 2011

При попытке создать простой график я получаю следующую ошибку. У меня возникают похожие проблемы в приложении, и я пытаюсь сузить проблему, поэтому я создал небольшое сокращение, и я не могу на всю жизнь понять, что я делаю неправильно. Может ли кто-нибудь взглянуть на то, что у меня есть, и посмотреть, сможете ли вы заметить какие-либо проблемы?

Когда я запускаю код ниже, я получаю следующую ошибку

Неожиданный синтаксический анализ матрицы (NaN, NaN, NaN, NaN, NaN, -Infinity) атрибут преобразования. (Функция () {вар e = this, a = Object.protot ... ate ("Ext.XTemplate", j, g)} return j}}); ext-all.js (строка 15)

Вот код, который я запускаю: 

Ext.require('Ext.chart.*'); 
Ext.require(['Ext.Window', 'Ext.layout.container.Fit']); 
Ext.onReady(function () { 
    var store = new Ext.data.ArrayStore({ 
        fields: [ 
            //timestamp means UNIX timestamp 
            {name: 'datetime', type: 'date', dateFormat: 'timestamp'}, 
            {name: 'data', type: 'float'} 
        ], 
        data: [ 
            [1311844196,47], 
            [1311846214,68], 
            [1311848214,90] 
        ] 
    }); 

    Ext.create('Ext.Window', { 
        width: 800, 
        height: 600, 
        title: 'Test Chart', 
        renderTo: Ext.getBody(), 
        layout: 'fit', 
        items: { 
            xtype: 'chart', 
            store: store, 
            axes: [{ 
                type: 'Numeric', 
                position: 'left', 
                fields: ['data'] 
            },{ 
                type: 'Time', 
                position: 'bottom', 
                fields: ['datetime'], 
                dateFormat: 'Md,H:i' 
            }], 
            series: [{ 
                type: 'line', 
                axis: 'left', 
                xField: 'datetime', 
                yField: 'data', 
                tips: { 
                    width: "6em", 
                    renderer: function(storeItem, item) { 
                        this.setTitle(storeItem.get('data') + '@' + Ext.Date.format(storeItem.get('datetime'), 'H:i')); 
                    } 
                } 
            }] 
        } 
    }).show(); 
});

Простой способ воспроизвести проблему - перейти на http://dev.sencha.com/deploy/ext-4.0.2a/examples/charts/Line.html (я использую Firefox, но Chrome тоже не работает). После загрузки страницы закройте окно примера и скопируйте приведенный выше код в консоль Firebug. Вы должны увидеть, что ничего не отображается и возникает ошибка.

1 Ответ

6 голосов
/ 05 августа 2011

Оказывается, что временная ось ExtJS действительно глючит и всегда пытается агрегировать ваши данные (чего я не хочу), и имеет несколько других ошибок (например, имя поля даты в магазине должно быть 'date'.) Я создал тикет, чтобы посмотреть на эту проблему, и они определили, что им нужно поработать над ней.

В итоге я использовал числовую ось, передал метки времени и использовалсредство визуализации меток для отображения их в виде дат. 

Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.layout.container.Fit']);
Ext.onReady(function () {
    var store = new Ext.data.ArrayStore({
        fields: ['tstamp', 'data'],
        data: [
            [1311800196, 95], // Jul 28 2011 02:09:56 GMT-0700 (Pacific Daylight Time)
            [1311844196, 47], // Jul 28 2011 02:09:56 GMT-0700 (Pacific Daylight Time)
            [1311846214, 68], // Jul 28 2011 02:43:34 GMT-0700 (Pacific Daylight Time)
            [1311848214, 90]  // Jul 28 2011 03:16:54 GMT-0700 (Pacific Daylight Time)
        ]
    });

    Ext.create('Ext.Window', {
        width: 800,
        height: 600,
        title: 'Test Chart - Dates along the x axis',
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: {
            xtype: 'chart',
            store: store,
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['data']
            },{
                type: 'Numeric',
                position: 'bottom',
                fields: ['tstamp'],
                minimum: 1311800196, // Same as the first point
                maximum: 1311848214, //Same as the last point
                roundToDecimal: false, // required so it won't mess with my renderer
                label: {
                    renderer: function(value) {
                        var date = new Date(value * 1000);
                        return Ext.Date.format(date, "H:i") + "\n" + Ext.Date.format(date, "M j") ;
                    }
                }
            }],
            series: [{
                type: 'line',
                axis: 'left',
                xField: 'tstamp',
                yField: 'data',
                tips: {
                    width: "6em",
                    renderer: function(storeItem, item) {
                        this.setTitle(storeItem.get('data') + '@' + Ext.Date.format(new Date(storeItem.get('tstamp')*1000), 'H:i'));
                    }
                }
            }]
        }
    }).show();
})
...