遇到一个问题,在用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: '/url' } }); 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数据格式如下:
[{"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中时间刻度跟图表中定义的时间刻度不一定一致