Laravel 10中Chart.js柱状图不显示条形与标签问题求助

问题根源 #

1. X轴标签数据源错误：你在前端代码中尝试通过stat.period获取X轴标签，但返回的统计数据里根本不存在period字段，只有start和end字段，导致labels数组全为undefined，X轴无标签显示。
2. 早期数据值为0：前7条数据的value均为0，对应条形高度为0自然不可见；后续非0值的条目也因为标签缺失无法正常渲染。

修复方案 #

方案一：前端直接修正标签逻辑 #

修改前端脚本中的标签生成逻辑，改用start/end字段生成可读的周范围标签：

<script>
        // Retrieve the statistical data from laravel-stats
        var statsData = {!! json_encode($stats) !!};

        // Process the data and create the chart
        var labels = statsData.map(stat => {
            // 格式化日期为友好的周范围格式
            const start = new Date(stat.start).toLocaleDateString('zh-CN', {year: 'numeric', month: '2-digit', day: '2-digit'});
            const end = new Date(stat.end).toLocaleDateString('zh-CN', {year: 'numeric', month: '2-digit', day: '2-digit'});
            return `${start} - ${end}`;
        });
        var values = statsData.map(stat => stat.value);

        // Create the Chart.js bar chart
        var ctx = document.getElementById('userCountChart').getContext('2d');
        var userCountChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'User Count',
                    data: values,
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    x: {
                        grid: {
                            display: true
                        },
                        // 可选：旋转标签避免重叠
                        ticks: {
                            maxRotation: 45,
                            minRotation: 45
                        }
                    },
                    y: {
                        beginAtZero: true
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return 'User Count: ' + context.parsed.y;
                            }
                        }
                    }
                }
            }
        });
    </script>

方案二：后端预先处理标签字段 #

在Laravel查询时添加period字段，前端可直接复用原有逻辑：

$stats = UserCountStats::query()
            ->start(now()->subMonths(2))
            ->end(now()->subSecond())
            ->groupByWeek()
            ->get()
            ->map(function($stat) {
                // 拼接start和end生成周范围标签
                $stat->period = \Carbon\Carbon::parse($stat->start)->format('Y-m-d') . ' - ' . \Carbon\Carbon::parse($stat->end)->format('Y-m-d');
                return $stat;
            });

额外检查 #

确认引入的Chart.js版本为v3+，你的配置语法（如scales.x）是v3的写法，若使用v2版本会导致配置不生效。

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