Laravel 10.4集成ChartJS遇X轴文本格式错误求助

我正在学习如何在Laravel中实现图表功能。按照网上基础教程操作后已成功连接数据库，但希望X轴显示星期缩写（Mo、Tue、Wed、Thu、Fri、Sat、Sun），实际却显示格式错误的带括号完整星期名（如[ Wednesday ]）。请问问题出在哪里？

代码片段 #

ChartJSController #

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;
use App\Models\Picking;
use DB;
use Carbon\Carbon;

class ChartJSController extends Controller
{
        /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {
     
      $data=Picking::select('id', 'created_at')
      ->get()
      ->groupBy(function($data)
    
    {
        return Carbon::parse($data->created_at)->format('D');
    });
        $months=[];
        $monthCount=[];

            foreach($data as $month => $values){
                $months[]=$month;
                $monthCount[]=count($values);
        }
              
        return view('chart', ['data' => $data, 'months'=>$months, 'monthCount'=>$monthCount]);
    }
}

chart.blade.php #

<x-app-layout>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-2 text-gray-900">
                    {{ is_array($months) }}
                    {{ is_array($monthCount) }}             

                    <div>
                        <canvas id="myChart"></canvas>
                    </div>

                    <div>
                        <canvas id="myChart"></canvas>
                    </div>

                    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

                    <script>
                        const ctx = document.getElementById('myChart');

                        var _ydata='{!! json_encode($months) !!}';
                        var _xdata='{!! json_encode($monthCount) !!}';

                        new Chart(ctx, {
                            type: 'bar',
                            data: {
                                labels: _ydata,
                                datasets: [{
                                    label: '# of Votes',
                                    data: _xdata,
                                    borderWidth: 1
                                }]
                            },
                            options: {
                                scales: {
                                    y: {
                                        beginAtZero: true
                                    }
                                }
                            }
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

问题原因及解决办法 #

核心问题 #

前端代码把JSON字符串直接赋值给了labels和data，Chart.js无法正确解析这种字符串格式：

• var _ydata='{!! json_encode($months) !!}'; 会将PHP数组转成带引号的JSON字符串（比如"[\"Mon\",\"Tue\"]"）
• 直接把这个字符串传给labels，Chart.js会把整个字符串当作单个标签，导致显示异常。

此外还有两个小问题：

1. 视图里重复定义了两个id="myChart"的canvas，Chart.js只会渲染第一个，第二个失效。
2. 后端变量命名不合理，$months实际存储的是星期缩写，命名易混淆。

修复步骤 #

1. 修正前端变量赋值：去掉JSON字符串的引号，让它直接作为JavaScript数组使用：

var _ydata = {!! json_encode($months) !!};
var _xdata = {!! json_encode($monthCount) !!};

2. 移除重复canvas：删掉第二个<div><canvas id="myChart"></canvas></div>，避免ID冲突。

3. （可选）优化后端变量命名：把$months改成$weekDays，$monthCount改成$dayCount，代码更易读：

$weekDays = [];
$dayCount = [];

foreach($data as $day => $values){
    $weekDays[] = $day;
    $dayCount[] = count($values);
}

return view('chart', ['data' => $data, 'weekDays'=>$weekDays, 'dayCount'=>$dayCount]);

对应前端变量同步修改：

var _ydata = {!! json_encode($weekDays) !!};
var _xdata = {!! json_encode($dayCount) !!};

修复后前端关键代码 #

const ctx = document.getElementById('myChart');

var _ydata = {!! json_encode($months) !!};
var _xdata = {!! json_encode($monthCount) !!};

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: _ydata,
        datasets: [{
            label: '每日拣选数量',
            data: _xdata,
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

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