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

Carser 2016-04-20

遇到一个问题,在用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中时间刻度跟图表中定义的时间刻度不一定一致

 

Global site tag (gtag.js) - Google Analytics