Laravel 8数据库数据生成柱状图无显示问题排查

首次尝试在Laravel 8中用数据库用户数据生成柱状图，按教程操作后页面完全空白，不确定无数据时柱状图元素是否会显示。以下是问题排查与修复方案：

数据库表（users表） #

路由代码（无问题） #

Route::get("/bar-chart",[HomeController::class,"barChart"]);

控制器代码问题与修正 #

原控制器存在3个关键错误：

1. 模型名user需大写为User（Laravel模型类遵循大驼峰命名规范）
2. 查询$months时错误用COUNT(*) as month，应获取月份数字而非计数，导致循环赋值逻辑错误
3. 月份是1-12，数组$datas索引为0-11，直接赋值会导致索引越界

修正后的控制器代码：

public function barChart(){
    // 一次性查询月份与对应用户数，避免重复查询数据库
    $userData = User::select(
            User::raw("MONTH(created_at) as month"),
            User::raw("COUNT(*) as count")
        )
        ->whereYear('created_at', date('Y'))
        ->groupBy(User::raw("MONTH(created_at)"))
        ->get();

    $datas = array_fill(0, 12, 0); 
    foreach($userData as $item){
        // 月份转数组索引（1→0，12→11）
        $datas[$item->month - 1] = $item->count;
    }       

    return view('bar-chart', compact('datas'));
}

Blade视图代码问题与修正 #

原视图JavaScript存在语法错误，导致代码阻塞页面空白：

1. $(function()){ 多了一个右括号，应为$(function(){
2. type:'bar' 后缺少逗号，违反JSON格式要求
3. var datas = <?php echo json_encode($datas); ?> 末尾缺少分号

修正后的Blade代码：

<!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>Sample Chart</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb60SsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" integrity="sha512-vBmx0N/uQOXznm/Nbkp7h0P1RfLSj0HQrFSzV8m7rOGyj30fYAOKHYvCNez+yM8IrfnW0TCodDEjRqf6fodf/Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
    <div style="height:400px; width:900px; margin:auto;">
        <canvas id="barChart"></canvas>
    </div>

    <script>
        $(function(){
            var datas = <?php echo json_encode($datas); ?>;
            var barCanvas = $("#barChart");
            var barChart = new Chart(barCanvas,{
                type:'bar',
                data:{
                    labels:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                    datasets:[{
                        label:'Users, 2022',
                        data:datas,
                        backgroundColor:['red','orange','yellow','green','blue','indigo','violet','purple','pink','silver','gold','brown']
                    }]
                },
                options:{
                    scales:{
                        yAxes:[{
                            ticks:{
                                beginAtZero:true
                            }
                        }]
                    }
                }
            });
        });
    </script>
</body>
</html>

无数据时的显示说明 #

即使数据库中没有符合条件的数据，页面也会显示空的柱状图框架（包含坐标轴、标签），因为<canvas>元素本身会被渲染。你之前页面完全空白是JavaScript语法错误导致代码阻塞，而非数据问题。

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