Question

我有一个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"
                            }
                        }
                    });
                }
            }

正如您所看到的，我循环遍历数据变量中返回的每条记录，并使用'hr（heart-rate）'和'time（datestamp）'字段填充名为'dataarray'的数组， jqPlot。

这是从AJAX调用返回的json数组：

$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);

不幸的是，这似乎没有用，我不知道为什么。这就是我得到的：

enter image description here

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

Answer 1

好的，由于检查dataarray数组输出的一些建议，我已设法将其排序。基本上，UNIX时间戳以秒为单位，Javascript时间戳以毫秒为单位，我需要将时间戳从UNIX时间戳转换为Javascript，以便正确读取日期。希望这有助于其他人！

AJAX调用jqPlot没有正确显示轴

1 个答案: