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