0

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

如您所见,我正在遍历数据变量中返回的每条记录,并使用 jqPlot 使用的“hr(心率)”和“时间(日期戳)”字段填充一个名为“dataarray”的数组。

这是从 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);

不幸的是,这似乎不起作用,我不确定为什么。这就是我得到的:

在此处输入图像描述

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

4

1 回答 1

0

好的,由于一些检查数据数组数组的输出的建议,我已经设法得到这个排序。基本上,由于 UNIX 时间戳以秒为单位工作,而 Javascript 时间戳以毫秒为单位,我需要将我的时间戳从 UNIX 时间戳转换为 Javascript,以便正确读取日期。希望这对其他人有帮助!

于 2013-02-20T16:08:37.070 回答