Morris.js报错：Uncaught TypeError: Cannot read properties of undefined (reading 'length')

我是PHP和JavaScript新手，开发网页图表项目时遇到错误：morris.min.js:6 Uncaught TypeError: Cannot read properties of undefined (reading 'length')，找不到解决办法。

相关代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../Css/AdminDashboard.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
</head>
<body>
    <div class="bookingsGraph">
        <div id="chart"></div>
    </div>
</body>
</html>

JavaScript代码 #

<script>
    Morris.Line({
        element: 'chart',
        data: [<?php echo $chart_data; ?>],
        xkey: 'date',
        ykey: ['bookings'],
        labels: ['Bookings'],
        // hideHover: 'auto',
        // stacked: true
    });
</script>

PHP代码 #

<?php
$connect = mysqli_connect("localhost", "root", "", "movietime");
$query = "SELECT COUNT(BookingId),BookingDate
FROM bookings
WHERE BookingDate='2019/12/13'";
$result = mysqli_query($connect, $query);
$chart_data = '';
while($row = mysqli_fetch_array($result))
{
  $chart_data .= "{ date:'".$row["BookingDate"]."', bookings:".$row["COUNT(BookingId)"].", }";
}
$chart_data = substr($chart_data, 0, -2);
?>

完整错误信息 #

morris.min.js:6 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at c.<anonymous> (morris.min.js:6:4567)
    at c.<anonymous> (morris.min.js:6:4834)
    at d.setData (morris.min.js:6:4865)
    at c.d [as constructor] (morris.min.js:6:1739)
    at new c (morris.min.js:6:13513)
    at Object.c [as Line] (morris.min.js:6:13534)
    at AdminDashboard.php:114:12

已尝试的代码 #

Morris.Line({
    element: 'chart',
    data: [{date:'2019/12/13',bookings:'6'}],
    xkey: 'date',
    ykey: ['bookings'],
    labels: ['Bookings'],
    // hideHover: 'auto',
    // stacked: true
});

问题原因及解决办法 #

这个错误核心是Morris.js接收的data参数格式异常或为空，以下是针对性修复方案：

1. 替换手动拼接JSON为PHP原生JSON生成 #

手动拼接字符串容易出现语法错误（比如多余逗号），改用json_encode更可靠：

<?php
$connect = mysqli_connect("localhost", "root", "", "movietime");
$query = "SELECT COUNT(BookingId) as total_bookings, BookingDate
FROM bookings
WHERE BookingDate='2019/12/13'";
$result = mysqli_query($connect, $query);

$data_array = [];
while($row = mysqli_fetch_array($result)){
    $data_array[] = [
        'date' => $row["BookingDate"],
        'bookings' => $row["total_bookings"]
    ];
}
// 直接生成标准JSON
$chart_data = json_encode($data_array);
?>

对应的JavaScript代码修改为：

data: <?php echo $chart_data; ?>,

2. 处理空数据场景 #

如果数据库查询无结果，data会变成空数组，Morris.js可能无法正常渲染，可添加默认数据：

if(empty($data_array)){
    $data_array[] = ['date' => '2019/12/13', 'bookings' => 0];
}
$chart_data = json_encode($data_array);

3. 修正日期查询匹配问题 #

确认数据库中BookingDate的格式，若为YYYY-MM-DD，需调整查询语句避免无结果：

$query = "SELECT COUNT(BookingId) as total_bookings, BookingDate
FROM bookings
WHERE DATE_FORMAT(BookingDate, '%Y/%m/%d') = '2019/12/13'";

4. 确保数据类型正确 #

bookings字段需为数字类型，避免字符串格式，原尝试代码中bookings:'6'应改为bookings:6。

内容的提问来源于stack exchange，提问作者Shade_06