Laravel新手求助：如何用Chart.js展示项目名称与工时数据

嘿，我来帮你搞定这个Chart.js的问题！咱们先拆解下问题根源，再一步步修复。

问题核心原因 #

你的代码现在有两个关键问题：

1. 控制器返回的数据格式不适用：你返回的$hour_logs是拼接好的字符串数组（比如"Joylinkhk: 13,"），这种格式没法直接被Chart.js拆分出项目名和工时数值。
2. Chart.js脚本结构错误：你用@foreach循环生成了多个data对象，但Chart.js只需要一个包含完整labels和datasets的data结构，重复生成会直接导致语法和逻辑错误。

第一步：修复控制器的数据处理逻辑 #

先把控制器里的数据拆分成项目名数组和工时数组，让Chart.js能直接使用。

如果你的$hour_logs是当前这种拼接好的字符串数组，用下面的代码处理：

// 你当前的$hour_logs数组
$hour_logs = [
    "Joylinkhk: 13,",
    "HorizonTechnologies: 2,",
    "Alahazrat: 9,",
    "j2w: 0,",
];

// 拆分出项目名和工时
$projectLabels = [];
$projectHours = [];

foreach ($hour_logs as $item) {
    // 去掉末尾的逗号，再拆分项目名和工时
    $cleanItem = rtrim($item, ',');
    list($name, $hour) = explode(': ', $cleanItem);
    
    $projectLabels[] = $name;
    $projectHours[] = (int)$hour; // 转成数字类型，确保Chart.js能识别
}

// 把两个数组传给视图
return view('你的视图名称', compact('projectLabels', 'projectHours'));

如果你的原始数据来自数据库（比如有project_name和hours字段），可以直接在查询时整理数据，效率更高：

// 示例：从数据库查询并直接整理数据
$logs = \App\Models\HourLog::select('project_name', 'hours')->get();
$projectLabels = $logs->pluck('project_name')->toArray();
$projectHours = $logs->pluck('hours')->toArray();

return view('你的视图名称', compact('projectLabels', 'projectHours'));

第二步：修复视图中的Chart.js脚本 #

现在视图里不需要循环，直接用处理好的两个数组，注意用{!! json_encode() !!}把PHP数组转成合法的JS数组：

<canvas id="myChart" width="400" height="200"></canvas>

<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        // 项目名数组作为X轴标签
        labels: {!! json_encode($projectLabels) !!},
        datasets: [{
            label: '项目工时', // 给数据集加标签，图表上会显示
            data: {!! json_encode($projectHours) !!}, // 工时数组作为Y轴数据
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

关键细节说明 #

• 为什么用{!! json_encode() !!}？因为{{ }}会自动转义HTML字符，导致生成的JS数组格式错误，而{!! !!}会直接输出原始JSON字符串，正好符合JS数组的格式。
• 一定要把工时转成数字类型，如果是字符串，Chart.js可能无法正确识别为数值数据。

这样修改后，你的柱状图就能正常显示左侧的项目名和对应的工时啦！

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