Laravel Livewire+Chart.js图表标签显示[object Object]问题求助

核心问题 #

图表显示[object Object]是因为你把完整的数据库查询对象直接传给了Chart.js的labels和data数组，而非提取其中的字符串/数值字段；同时代码存在数组层级错误、数据逻辑不匹配的问题。

修复步骤 #

1. 修正getLabels方法：提取课程名称字段 #

原方法将整个查询对象存入labels数组，需改为提取course字段：

private function getLabels()
{
    $labels = [];

    // 先修正SQL语法错误：select参数拆分、引号位置调整
    $alumni = DB::table('enrollments')         
        ->join('academic_programs', 'academic_programs.id', '=', 'enrollments.degree_id')
        ->select('academic_programs.program_abbv as course', DB::raw('count(enrollments.id) as total')) 
        ->groupBy('academic_programs.program_abbv')
        ->orderBy('course')
        ->get();
        
    foreach ($alumni as $alu)
    {
        // 提取课程名称字段，而非整个对象
        $labels[] = $alu->course;
    }
    return $labels;
}

2. 替换getRandomData：提取对应统计数值 #

原方法逻辑错误，取出的是所有Enrollment对象，与标签不匹配。需从同一查询中提取统计的total值：

// 新增方法获取与标签一一对应的统计数据
private function getEnrollmentData()
{
    $data = [];

    $alumni = DB::table('enrollments')         
        ->join('academic_programs', 'academic_programs.id', '=', 'enrollments.degree_id')
        ->select('academic_programs.program_abbv as course', DB::raw('count(enrollments.id) as total')) 
        ->groupBy('academic_programs.program_abbv')
        ->orderBy('course')
        ->get();
        
    foreach ($alumni as $alu)
    {
        // 提取统计的数值
        $data[] = $alu->total;
    }
    return $data;
}

3. 修正mount方法的数组层级与数据赋值 #

原方法中$this->labels[] = $this->getLabels();会导致labels变成二维数组，同时dataset的data需替换为正确的统计数据：

public function mount()
{
    // 直接赋值，避免添加[]造成二维数组
    $this->labels = $this->getLabels();

    $this->dataset = [
        [
            'label' => 'Enrollees',
            'backgroundColor' => '#1d7e43',
            'data' => $this->getEnrollmentData(), // 使用正确的统计数据
        ],
    ];
    
    // 发送更新事件时使用正确的数据
    $this->emit('updateChart', [
        'datasets' => $this->dataset,
        'labels' => $this->labels,
    ]);
}

4. 视图层确认（无需修改，仅验证） #

确保初始渲染的$labels是字符串数组、$dataset的data是数值数组，Chart.js即可正常解析：

<script>
    const chart = new Chart(
        document.getElementById('myChart'), {
            type: 'bar',
            data: {
                labels: @json($labels),
                datasets: @json($dataset)
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
        Livewire.on('updateChart', data => {
            chart.data = data;
            chart.update();
        });
</script>

关键注意点 #

• 传给Chart.js的labels必须是字符串数组，data必须是数值数组，不能直接传对象
• 标签和数据需严格一一对应，否则图表会出现错位
• 修正SQL查询的语法错误：原select语句将两个字段写在同一引号内，需拆分为独立参数

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