Morris.js Uncaught TypeError：無法讀取未定義的屬性「匹配」

我對此失去了主意，無法找出問題。我正在使用下面的代碼來使用morris.js呈現圖表，並且我不斷收到「Uncaught TypeError：無法讀取未定義的」錯誤的屬性「匹配」。 javascript和php代碼如下，是我輸出php json到控制檯並粘貼到此 - >enter link description here它的工作原理！但它沒有在我的代碼Morris.js Uncaught TypeError：無法讀取未定義的屬性「匹配」

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（傳感器data.php（我已經很好的使用例子，jsbin複製））

<?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輸出（來自傳感器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（見下文）。

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 我嘗試這樣做，以及併發生同樣的錯誤。

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

來源

2014-07-07 devfunkd

看起來即使你設置異步爲假，你的函數仍然在努力完成Ajax請求之前返回數據，所以它的返回空數據。請嘗試異步執行它，並查看它是否可用 – chiliNUT

明顯地，您正嘗試訪問您認爲是對象但未定義的「匹配」屬性。但是您提供的代碼不完整，因爲它不包含任何「匹配」。 – Oriol

同步請求是一個壞主意。 – epascarello

我有完全相同的問題，終於找到了，問題是出在解析JSON對象。就你而言，它可能是關於發送空對象值的事情，「匹配」無法識別「日期」值。

總的來說，錯誤是說一個「未定義」的值傳遞給了Morris.js的一個子方法，所以圍繞這個問題做一個很好的解決方法（就像我一樣）可以跟蹤你的對象值，空值傳遞給「匹配」方法。

希望它有幫助。

來源

2014-08-15 16:29:05

使用JSON.parse

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

來源

2016-12-11 11:36:26 user3451853

Morris.js Uncaught TypeError：無法讀取未定義的屬性「匹配」

回答

相關問題