Charts Can';t在Ext JS中创建简单的折线图

Charts Can';t在Ext JS中创建简单的折线图,charts,extjs4,linechart,Charts,Extjs4,Linechart,我在尝试创建简单图表时遇到以下错误。我在我的应用程序中遇到了类似的问题,我一直试图缩小问题的范围,所以我创建了一个小的减少,我一辈子都无法找出我做错了什么。有人能看看我有什么问题吗 当我运行下面的代码时,我得到以下错误 意外值矩阵(NaN,NaN,NaN,NaN,NaN,-无穷大)解析 变换属性。(函数(){var e=this,a=Object.protot…ate(“Ext.XTemplate”,j,g)}返回j}); ext-all.js(第15行) 以下是我正在运行的代码: Ext.re

我在尝试创建简单图表时遇到以下错误。我在我的应用程序中遇到了类似的问题,我一直试图缩小问题的范围,所以我创建了一个小的减少,我一辈子都无法找出我做错了什么。有人能看看我有什么问题吗

当我运行下面的代码时,我得到以下错误

意外值矩阵(NaN,NaN,NaN,NaN,NaN,-无穷大)解析 变换属性。(函数(){var e=this,a=Object.protot…ate(“Ext.XTemplate”,j,g)}返回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(); 
});

重现问题的一个简单方法是转到(我正在使用Firefox,但Chrome也不起作用)。加载页面后,关闭示例窗口,可以将上述代码复制粘贴到firebug的控制台中。您应该看到没有任何内容被绘制成图表,并且出现了错误。

事实证明,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();
})