无法在Ext-JS中创建简单的折线图

时间:2011-08-01 20:10:01

标签: charts extjs4 linechart

尝试创建简单图表时出现以下错误。我在我的应用程序中遇到了类似的问题,我一直试图缩小问题,所以我创建了一个小的减少,我不能为我的生活弄清楚我做错了什么。有人可以看看我有什么,看看你是否能发现任何问题?

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

  

意外值矩阵(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 个答案:

答案 0 :(得分:6)

事实证明,ExtJS的时间轴确实是错误的并且总是试图聚合你的数据(我不想要),还有一些其他错误(比如商店中日期字段的名称必须是'日期' '。)我创建了一张票来查看这个问题,他们已经确定他们需要处理它。

我最终做的是使用数字轴,传递时间戳,并使用标签渲染器将它们显示为日期。

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();
})