我有一个 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,所以似乎无法调试这个。有谁知道我哪里出错了?谢谢