Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/478.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript jqPlot未正确显示轴的AJAX调用_Javascript_Jquery_Jqplot - Fatal编程技术网

Javascript jqPlot未正确显示轴的AJAX调用

Javascript jqPlot未正确显示轴的AJAX调用,javascript,jquery,jqplot,Javascript,Jquery,Jqplot,我有一个AJAX函数,它调用数据库中的记录列表。然后,我尝试使用jqPlot来显示表上的某些行,x轴是记录的时间戳,y轴是心率(hr) 对jqPlot函数的调用在AJAX调用成功时进行,如下所示: success: function(data) { if(data.moves) { $('#records').html(''); var html = "";

我有一个AJAX函数,它调用数据库中的记录列表。然后,我尝试使用jqPlot来显示表上的某些行,x轴是记录的时间戳,y轴是心率(hr)

对jqPlot函数的调用在AJAX调用成功时进行,如下所示:

success: function(data) {
                if(data.moves) {
                    $('#records').html('');
                    var html = "";
                    var dataarray = [];
                    html += "<table>";
                    $.each(data.moves, function(k, v) { 
                        dataarray.push([v.timestamp, v.hr]);
                        html += "<tr>";
                        html += "<td>" + v.hr + "</td>";
                        html += "<td>" + v.time + "</td>";
                        html += "<td>" + v.title + "</td>";
                        html += "<td>" + v.zone + "</td>";
                        html += "</tr>";
                    });
                    html += "</table>";
                    $('.records').html(html);   
                    var plot1 = $.jqplot('records',  [dataarray], {
                        title: 'Heart Rate for this move',
                        axesDefaults: {
                            min: 0,
                            max: 200
                        },
                        axes: {
                            xaxis: {
                                label: "Time",
                                pad: 0,
                                renderer: $.jqplot.DateAxisRenderer,
                                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                                tickOptions: {
                                    formatString: '%H:%M',
                                    angle: -45
                                }
                            },
                            yaxis: {
                                label: "Heart Rate"
                            }
                        }
                    });
                }
            }
不幸的是,这似乎不起作用,我不知道为什么。这就是我得到的:

如您所见,绘图未显示,x轴未显示正确的时间范围。 我以前没有真正使用过jqPlot,所以似乎无法调试这个。有人知道我哪里出错了吗?
谢谢

好的,多亏了一些检查dataarray输出的建议,我已经成功地将其排序了。 基本上,UNIX时间戳以秒为单位,Javascript时间戳以毫秒为单位,因此我需要将时间戳从UNIX时间戳转换为Javascript,以便正确读取日期。
希望这对其他人有帮助

有几个问题:1-您是否使用示例数据对此进行了测试,2-您是否从您的查询中获得了一些真实的JSON数据,即
[dataarray]
中的内容?您好,我已经尝试使用示例数据,我遇到了一个问题,即时间在每个刻度上都会重复。下面是dataarray=[[1353438096,“64”],[1353438106,“66”],[1353438116,“71”],[1353438492,“60”],[1353438502,“66”]中的数据示例在JFIDLE上进行实验后,我注意到这是一个时间戳末尾缺少三个尾随零的问题。为什么会发生这种情况?
$moves = $this->myzone_model->getUsersMoves($options);
            $moves_arr = array();
            foreach($moves as $move) {
                $timestamp = strtotime($move['time']);
                $moves_arr[] = array(
                    'myzone_user_hr_records_id' => $move['myzone_user_hr_records_id'],
                    'GUID'                      => $move['GUID'],
                    'hr'                        => $move['hr'],
                    'time'                      => $move['time'],
                    'timestamp'                 => $timestamp,
                    'title'                     => $move['title'],
                    'maxHR'                     => $move['maxHR'],
                    'zone'                      => $move['zone']
                );
            }
            $json = array('moves' => $moves_arr);