Morris.js未捕获TypeError：无法读取未定义的属性“匹配” [英] Morris.js Uncaught TypeError: Cannot read property 'match' of undefined
问题描述
我对此已经失去了理智，无法弄清楚这个问题。我正在使用以下代码使用morris.js呈现图表，并且我不断收到未捕获的TypeError：无法读取未定义的属性'匹配'错误。 javascript和php代码如下，是我将php json输出到控制台并将其粘贴到此 - > 在这里输入链接描述它的工作原理！但它不在我的代码中（我很好地从使用示例和jsbin中复制了）
I am losing my mind on this and can't figure out the issue. I am using the following code to render a chart using morris.js and I keep getting a "Uncaught TypeError: Cannot read property 'match' of undefined" error. The javascript and php code is below, is I output the php json to the console and paste it into this -> enter link description here it works! But it doesn't in my code (which I've pretty well copied from the usage example and 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
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（sensor-data.php）
PHP (sensor-data.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 OUTPUT（来自sensor-data.php）
JSON OUTPUT (from 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"}]
UPDATE
我做了一些调试，发现错误发生在morris.js：598（见下文）。
UPDATE I did some more debugging and found the error is happening on morris.js:598 (see below).
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
我试过这个也是同样的错误发生。
UPDATE 2 I tried this as well and same error occurs.
JAVASCRIPT
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对象。
在你的情况下，它可能是关于发送空对象值，匹配无法识别日期值。
I had exactly the same problem, finally figured out that the problem is in parsing Json object. In your case, it can be something about sending empty object values, and "match" cannot identify "date" value.
总的来说，错误是说一个未定义的值传递给Morris.js的一个子方法，所以围绕这个问题（对我来说工作）的一个很好的工作可以跟踪你的对象值，以了解空值传递给匹配方法的位置。
Overall, error is saying that an "undefined" value is passing to a sub-method of Morris.js , so a good work around this problem (as worked for me) can be tracing your object values to understand where an empty value is passing to "match" method.
希望有所帮助。
这篇关于Morris.js未捕获TypeError：无法读取未定义的属性“匹配”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
