Morris.js未捕获TypeError：无法读取未定义的属性“匹配”
[英]Morris.js Uncaught TypeError: Cannot read property 'match' of undefined
问题描述
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. 我正在使用以下代码使用morris.js呈现图表，并且我不断收到“未捕获的TypeError：无法读取未定义的属性'匹配'错误”。 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! javascript和php代码如下，是我将php json输出到控制台并将其粘贴到此 - > 输入链接描述在这里它的工作原理！ But it doesn't in my code (which I've pretty well copied from the usage example and jsbin) 但它不在我的代码中（我很好地从使用示例和jsbin中复制了）
HTML 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 (from sensor-data.php) JSON OUTPUT（来自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 I did some more debugging and found the error is happening on morris.js:598 (see below). 更新我做了一些调试，发现错误发生在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+)$/);
UPDATE 2 I tried this as well and same error occurs. 更新2我也试过这个并且发生了同样的错误。
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
<?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).' },';
}
2 个解决方案
解决方案1
5 已采纳 2014-08-15 16:29:05
I had exactly the same problem, finally figured out that the problem is in parsing Json object. 我有完全相同的问题，最终发现问题在于解析Json对象。 In your case, it can be something about sending empty object values, and "match" cannot identify "date" value. 在您的情况下，它可能是发送空对象值，“匹配”无法识别“日期”值。
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的子方法，因此围绕这个问题（对我来说工作）的一个很好的工作可以跟踪你的对象值，以了解空值传递的位置“匹配”的方法。
Hope it helps. 希望能帮助到你。
解决方案2
3 2016-12-11 11:36:26
Use JSON.parse 使用JSON.parse
Morris.Line({
element: 'tempMonitor',
data: JSON.parse(data),
xkey: 'datetime',
ykeys: ['temp_c'],
labels: ['Series A', 'Series B']
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.