Backpack 6（theme-tabler+权限管理器）创建Chart组件失败

操作步骤 #

• 安装图表库：composer require consoletvs/charts:"6.*"
• 生成图表控制器：php artisan backpack:chart WeeklyPermohonans
• 在自定义仪表盘blade文件中添加组件配置：

[
    'type'       => 'chart',
    'controller' => \App\Http\Controllers\Admin\Charts\WeeklyPermohonansChartController::class,
],

控制器代码 #

<?php

namespace App\Http\Controllers\Admin\Charts;

use App\Models\Permohonan;
use Backpack\CRUD\app\Http\Controllers\ChartController;
use ConsoleTVs\Charts\Classes\Chartjs\Chart;

/**
 * Class WeeklyPermohonansChartController
 * @package App\Http\Controllers\Admin\Charts
 * @property-read \Backpack\CRUD\app\Library\CrudPanel\CrudPanel $crud
 */
class WeeklyPermohonansChartController extends ChartController
{
    public function setup()
    {
        $this->chart = new Chart();

        // MANDATORY. Set the labels for the dataset points
        $labels = [];
        for ($days_backwards = 3; $days_backwards >= 0; $days_backwards--) {
            if ($days_backwards == 1) {
            }
            $labels[] = $days_backwards . ' days ago';
        }
        $this->chart->labels($labels);

        // RECOMMENDED.
        // Set URL that the ChartJS library should call, to get its data using AJAX.
        $this->chart->load(backpack_url('charts/new-entries'));

        // OPTIONAL.
        $this->chart->minimalist(false);
        $this->chart->displayLegend(true);
    }

    /**
     * Respond to AJAX calls with all the chart data points.
     *
     * @return json
     */
    public function data()
    {
        for ($days_backwards = 3; $days_backwards >= 0; $days_backwards--) {
            // Could also be an array_push if using an array rather than a collection.
            $permohonan[] = Permohonan::whereDate('created_at', today()
                ->subDays($days_backwards))
                ->count();
        }

        $this->chart->dataset('Permohonan', 'line', $permohonan)
            ->color('rgb(77, 189, 116)')
            ->backgroundColor('rgba(77, 189, 116, 0.4)');
    }
}

环境依赖 #

• composer.json："backpack/permissionmanager": "^7.0"
• composer.lock：spatie/laravel-permission 版本5.11.0

报错信息 #

控制台抛出：

Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

图表无法正常加载。

解决方法 #

1. 修正AJAX路由
   控制器中硬编码的路由charts/new-entries不匹配生成的控制器路由，应该改为对应控制器的蛇形命名路由，或者用路由生成器确保正确性：

   // 替换原load方法的参数
   $this->chart->load(route('charts.weekly-permohonans.data'));
   

2. 确保data方法返回JSON响应
   当前data()方法仅构建了数据集但未返回任何内容，必须添加返回语句：

   public function data()
   {
       for ($days_backwards = 3; $days_backwards >= 0; $days_backwards--) {
           $permohonan[] = Permohonan::whereDate('created_at', today()->subDays($days_backwards))->count();
       }
   
       $this->chart->dataset('Permohonan', 'line', $permohonan)
           ->color('rgb(77, 189, 116)')
           ->backgroundColor('rgba(77, 189, 116, 0.4)');
       
       // 添加这行返回ChartJS所需的JSON数据
       return $this->chart->api();
   }
   

3. 清理冗余代码
   删除setup方法中无意义的空判断if ($days_backwards == 1) {}。

4. 验证路由注册
   执行php artisan route:list检查是否存在charts/weekly-permohonans/data的GET路由。如果缺失，手动在routes/backpack/custom.php中添加：

   Route::get('charts/weekly-permohonans/data', [\App\Http\Controllers\Admin\Charts\WeeklyPermohonansChartController::class, 'data'])->name('charts.weekly-permohonans.data');
   

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