Laravel使用charts.erik.cat图表报错：Undefined variable $chart

问题本质 #

该错误说明admin.dashboard视图未接收到$chart变量，核心原因集中在控制器逻辑错误、路由配置不当、前后端依赖不匹配这几个方面，以下是针对性的修复步骤：

修复步骤 #

1. 修复控制器中未定义的变量与错误用法 #

你的ChartController里调用load($api)时，$api变量完全未定义，这会触发PHP致命错误，导致控制器无法正常返回视图，自然视图拿不到$chart。

如果是展示静态数据，无需使用load()方法（该方法用于从外部API拉取数据），直接设置图表数据集即可，修改chartLine方法：

public function chartLine()
{
    $chart = new SummaryChart;
    // 设置横轴标签
    $chart->labels(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
    // 添加折线图数据集（示例数据，可替换为业务数据）
    $chart->dataset('月度销售额', 'line', [120, 200, 150, 300, 250, 400, 320, 380, 270, 450, 360, 500]);
    
    return view('admin.dashboard', compact('chart'));
}

2. 确保路由指向正确的控制器方法 #

检查routes/web.php，必须配置路由让访问仪表盘的请求走到ChartController的chartLine方法，不能直接返回视图：

// 正确的路由配置
Route::get('/admin/dashboard', [App\Http\Controllers\ChartController::class, 'chartLine'])->name('admin.dashboard');

错误示例：不要使用Route::view('/admin/dashboard', 'admin.dashboard')，这种方式不会通过控制器传递$chart变量。

3. 匹配图表类型与前端依赖 #

你创建的是Chartjs类型的图表，但前端引入的是ECharts的JS，这会导致图表无法渲染。替换为Chartjs的依赖，并添加图表所需的脚本：
修改Dashboard.blade.php的内容，确保继承母版视图并正确加载脚本：

@extends('app')

@section('content')
<div class="row">
    <div class="col-md-9">
        <div style="height: 400px;"> 
            {!! $chart->container() !!}
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{!! $chart->script() !!}
@endsection

注：Vue实例如果没有业务需求可以直接移除，避免不必要的资源加载

4. 验证视图继承关系 #

确保Dashboard.blade.php开头包含@extends('app')，否则@section('js')的内容不会被渲染到母版的@yield('js')位置，导致图表脚本无法加载。

最终验证 #

1. 清除Laravel缓存：运行php artisan cache:clear和php artisan view:clear
2. 访问配置好的/admin/dashboard路由，检查图表是否正常显示

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