Question

我对此已经失去了理智，无法弄清楚这个问题。我使用以下代码使用morris.js渲染图表，并且我一直得到一个＆＃34; Uncaught TypeError：无法读取属性＆＃39;匹配＆＃39;未定义＆＃34;错误。 javascript和php代码如下，是我将php json输出到控制台并将其粘贴到此 - ＆gt; 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（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）

[{"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).' },';
    }

Answer 1

我有完全相同的问题，最后发现问题在于解析Json对象。在您的情况下，它可能是发送空对象值，“匹配”无法识别“日期”值。

总的来说，错误是说“未定义”值正在传递给Morris.js的子方法，所以围绕这个问题（对我有用）的好工作可以跟踪你的对象值来理解空的位置值正在传递给“匹配”方法。

希望它有所帮助。

Answer 2

使用JSON.parse

Morris.Line({
    element: 'tempMonitor',
    data: JSON.parse(data),
    xkey: 'datetime',
    ykeys: ['temp_c'],
    labels: ['Series A', 'Series B']
});

Morris.js Uncaught TypeError：无法读取属性＆＃39;匹配＆＃39;未定义的

2 个答案: