Extjs4 line chart 图表不显示数据问题

小人物扫雷 2016-04-20 09:41:57
遇到一个问题,在用extjs4 中chart做图表的时候,能从后台获取json数据,就是无法显示到chart图表上,请大家帮助分析一下问题出在什么地方。
先看js源码,如下:

Ext.onReady(function () {

var store = Ext.create('Ext.data.JsonStore', {
fields: [{ name: 'date', type: 'date', dateFormat: 'Y-m-d H:i:s' }, 'temperature'],
proxy: {
type: 'ajax',
url: '/app/report/Handler.ashx?action=getAllTmpList'
}
});

var win = Ext.create('Ext.window.Window', {
width: '90%',
height: '90%',
minHeight: 400,
minWidth: 550,
maximized: true,
maximizable: true,
title: '温度实时监控',
layout: 'fit',
items: [{
xtype: 'chart',
style: 'background:#fff',
store: store,
//itemId: 'chartCmp',
axes: [{
type: 'Numeric',
minimum: -100,
maximum: 100,
position: 'left',
fields: ['temperature'],
title: '温度指数',
minorTickSteps: 5,//刻度线
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Time',
//minorTickSteps: 6,//刻度线
position: 'bottom',
fields: 'date',
step: [Ext.Date.MINUTE, 30], //时间轴,坐标点,步进距离
dateFormat: 'H:i', //坐标轴刻度格式化
title: '24小时',
groupBy: 'year,month,day,hour,minute,second',
aggregateOp: 'sum',
constrain: true,
label: {
rotate: {
degrees: -90//让x轴坐标旋转90度
}
},
fromDate: new Date(2016, 4, 19), //JavaScript Date对象,起始日期
toDate: new Date(2016, 4, 20)//JavaScript Date对象,截止日期
}],
series: [{
type: 'line',
axis: ['left', 'bottom'],
highlight: {//鼠标选中时高亮显示
size: 7,
radius: 7
},
smooth: true,
xField: 'date',
yField: 'temperature',
label: {
display: 'none',
field: 'temperature',
renderer: function (v) { return v >> 0; },
'text-anchor': 'middle'
},
markerConfig: {
radius: 4,//在监视图上显示点的半径和圆角大小
size: 4
}
}]
}]
}).show();
//chart = win.child('#chartCmp');
//timeAxis = chart.axes.get(1);

});


其中json中时间刻度跟图表中定义的时间刻度不一定一致。
后台返回的json数据格式如下:
[{"date":"2016-04-19 16:25:42","temperature":21.8},{"date":"2016-04-19 16:26:02","temperature":21.8} ,{"date":"2016-04-19 16:26:22","temperature":21.7},{"date":"2016-04-19 16:26:42","temperature":21.6} ,{"date":"2016-04-19 16:27:02","temperature":21.6},{"date":"2016-04-19 16:27:22","temperature":21.5} ,{"date":"2016-04-19 16:27:42","temperature":21.5},{"date":"2016-04-19 16:28:02","temperature":21.5} ,{"date":"2016-04-19 16:28:22","temperature":21.4},{"date":"2016-04-19 16:28:42","temperature":21.4}]  


我生成的图表如下截图:


返回的json数据无法显示到chart图表中,请问为什么,到底是哪里配置错误,还是数据格式问题,还是extjs不支持这种数据?
...全文
268 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
小人物扫雷 2016-05-10
  • 打赏
  • 举报
回复
最后找到问题在哪里的,把这两行代码去掉,不能限定起始时间和结束时间 fromDate: new Date(2016, 4, 19), //JavaScript Date对象,起始日期 toDate: new Date(2016, 4, 20)//JavaScript Date对象,截止日期 如果需要显示整天数据的话,可以在后台json数据里面添加一个最早和最晚时间来限定。
小人物扫雷 2016-04-21
  • 打赏
  • 举报
回复
顶一下,有知道的朋友,帮忙看看,谢谢!!

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧