我对此失去了理智，无法弄清楚问题所在。我正在使用以下代码使用 morris.js 呈现图表，但我不断收到“未捕获的类型错误:无法读取未定义的属性‘匹配’”错误。 javascript 和 php 代码在下面，是我将 php json 输出到控制台并将其粘贴到这里 -> enter link description here有用!但它不在我的代码中(我已经很好地从用法示例和 jsbin 中复制了它)
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.0/morris.js"></script>
<meta charset=utf-8 />
<title>Temperature Monitor</title>
</head>
<body>
<h3 style="text-align: center">Temperature Monitor</h3>
<div id="tempMonitor"></div>
<script src="aquaponics.charts.js"></script>
</body>
</html>
JavaScript
function getSensorData() {
var dataSet;
$.ajax({
type: "POST",
url: "sensor-data.php",
data: { waterTemperature: true },
async: false,
success: function(data) {
dataSet = data;
}
});
return dataSet;
}
var dataSet = getSensorData();
var chart = Morris.Line({
element: 'tempMonitor',
data: [0, 0],
xkey: 'datetime',
ykeys: ['temp_c'],
labels: ['Series A', 'Series B']
});
chart.setData(dataSet);
PHP(传感器数据.php)
<?php
require('app-config.php');
$limit = query_limit;
$stmt = $dbh->prepare('SELECT * FROM sensor_waterTemperature ORDER BY id DESC');
$stmt->execute();
echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
JSON 输出(来自 sensor-data.php)
[{"id":"590","datetime":"2014-07-06 19:05:24","temp_c":"26.25","temp_f":"79.25"},{"id":"589","datetime":"2014-07-06 19:00:14","temp_c":"26.31","temp_f":"79.36"},{"id":"588","datetime":"2014-07-06 18:55:13","temp_c":"26.31","temp_f":"79.36"},{"id":"587","datetime":"2014-07-06 18:50:12","temp_c":"26.31","temp_f":"79.36"},{"id":"586","datetime":"2014-07-06 18:45:11","temp_c":"26.31","temp_f":"79.36"},{"id":"585","datetime":"2014-07-06 18:40:10","temp_c":"26.38","temp_f":"79.48"},{"id":"584","datetime":"2014-07-06 18:35:09","temp_c":"26.38","temp_f":"79.48"},{"id":"583","datetime":"2014-07-06 18:30:08","temp_c":"26.38","temp_f":"79.48"},{"id":"582","datetime":"2014-07-06 18:25:07","temp_c":"26.38","temp_f":"79.48"},{"id":"581","datetime":"2014-07-06 18:20:06","temp_c":"26.38","temp_f":"79.48"},{"id":"580","datetime":"2014-07-06 18:15:05","temp_c":"26.38","temp_f":"79.48"},{"id":"579","datetime":"2014-07-06 17:17:44","temp_c":"26.38","temp_f":"79.48"},{"id":"578","datetime":"2014-07-06 18:07:48","temp_c":"26.38","temp_f":"79.48"}]
更新 我做了更多调试，发现错误发生在 morris.js:598(见下文)。
Morris.parseDate = function(date) {
var isecs, m, msecs, n, o, offsetmins, p, q, r, ret, secs;
if (typeof date === 'number') {
return date;
}
m = date.match(/^(\d+) Q(\d)$/); **<<< RIGHT HERE**
n = date.match(/^(\d+)-(\d+)$/);
o = date.match(/^(\d+)-(\d+)-(\d+)$/);
更新 2 我也试过了，但发生了同样的错误。
JavaScript
function getSensorData() {
$.ajax({
type: "POST",
url: "sensor-data.php",
data: { waterTemperature: true },
async: false,
success: function(data) {
Morris.Line({
element: 'tempMonitor',
data: data,
xkey: 'datetime',
ykeys: ['temp_c'],
labels: ['Series A', 'Series B']
});
}
});
}
getSensorData();
PHP
<?php
require('app-config.php');
$limit = query_limit;
$stmt = $dbh->prepare('SELECT * FROM sensor_waterTemperature ORDER BY id DESC');
$stmt->execute();
//echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo '{ datetime: \''.$row['datetime'].'\', temp_c: '.round($row['temp_c'], 2).' },';
}
最佳答案
我遇到了完全相同的问题，最后发现问题出在解析 Json 对象上。 在您的情况下，它可能与发送空对象值有关，并且“匹配”无法识别“日期”值。
总的来说，错误是说一个“未定义”的值正在传递给 Morris.js 的子方法，所以解决这个问题的一个很好的方法(对我有用)可以跟踪你的对象值以了解空的位置值正在传递给“匹配”方法。
希望对您有所帮助。
关于javascript - Morris.js 未捕获类型错误 : Cannot read property 'match' of undefined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24601985/