Я теряю рассудок и не могу понять эту проблему. Я использую следующий код для рендеринга диаграммы с использованием morris.js, и я продолжаю получать сообщение об ошибке «Uncaught TypeError: Can not read property» undefined ». Ниже приведен код javascript и php, я выводю php json на консоль и вставляю его в это -> введите описание ссылки здесь ! Но это не в моем коде (который я довольно хорошо скопировал из примера использования и 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).' },'; }
У меня была точно такая же проблема, в конце концов выяснилось, что проблема заключается в разборе объекта Json. В вашем случае это может быть что-то вроде отправки пустых значений объекта, а «match» не может идентифицировать значение «date».
В целом, ошибка говорит о том, что «неопределенное» значение переходит к под-методу Morris.js, поэтому хорошая работа вокруг этой проблемы (как работала для меня) может отслеживать ваши значения объектов, чтобы понять, где проходит пустое значение для «совпадения».
Надеюсь, поможет.
Использовать JSON.parse
Morris.Line({ element: 'tempMonitor', data: JSON.parse(data), xkey: 'datetime', ykeys: ['temp_c'], labels: ['Series A', 'Series B'] });