Laravel Backpack中Fusioncharts组件无法加载及点击跳转问题求助

一、修复Fusioncharts无法渲染的问题 #

1. 确保前端资源正确引入 #

ConsoleTVs/Charts的Fusioncharts驱动依赖前端核心库，两种引入方式任选其一：

• CDN快速引入：在Backpack布局文件（如resources/views/vendor/backpack/base/layout.blade.php）或自定义Widget视图中添加：

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

• npm本地编译：
  先安装依赖：

  npm install fusioncharts --save
  

  再在resources/js/app.js中引入：

  import FusionCharts from 'fusioncharts';
  import Charts from 'fusioncharts/fusioncharts.charts';
  import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
  
  Charts(FusionCharts);
  FusionTheme(FusionCharts);
  

  最后编译资源：npm run dev

2. 修正控制器代码 #

Fusioncharts的数据集格式有特殊要求，同时要确保路由路径正确：

<?php

declare(strict_types=1);

namespace App\Http\Controllers\Charts;

use Backpack\CRUD\app\Http\Controllers\ChartController;
use ConsoleTVs\Charts\Classes\Fusioncharts\Chart;

class ExampleChartController extends ChartController
{
    public function setup(): void
    {
        $this->chart = new Chart();
        $this->chart->type('bar'); // 明确指定柱状图类型
        $this->chart->labels(['Label 1', 'Label 2', 'Label 3']);
        // 绑定数据接口路由
        $this->chart->load(route('backpack.charts.example.data'));
    }

    public function data(): void
    {
        // 直接在数据中加入跳转链接
        $this->chart->dataset('Group 1', 'bar', [
            ['value' => 1, 'link' => backpack_url('crud/your-model/1')],
            ['value' => 2, 'link' => backpack_url('crud/your-model/2')],
            ['value' => 3, 'link' => backpack_url('crud/your-model/3')]
        ]);
    }
}

3. 确认路由配置 #

在routes/backpack/custom.php中注册图表路由：

Route::get('charts/example', [App\Http\Controllers\Charts\ExampleChartController::class, 'show'])->name('backpack.charts.example');
Route::get('charts/example/data', [App\Http\Controllers\Charts\ExampleChartController::class, 'data'])->name('backpack.charts.example.data');

二、替代方案：用Chart.js实现点击跳转 #

如果你更倾向于用已经能正常渲染的Chart.js，可通过添加点击事件实现跳转：

1. 控制器代码 #

<?php

declare(strict_types=1);

namespace App\Http\Controllers\Charts;

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

class ExampleChartController extends ChartController
{
    public function setup(): void
    {
        $this->chart = new Chart();
        $this->chart->type('bar');
        $this->chart->labels(['Label 1', 'Label 2', 'Label 3']);
        // 将跳转链接存入数据集的extra属性中
        $this->chart->dataset('Group 1', 'bar', [1, 2, 3])
            ->extra([
                'links' => [
                    backpack_url('crud/your-model/1'),
                    backpack_url('crud/your-model/2'),
                    backpack_url('crud/your-model/3')
                ]
            ]);
        $this->chart->load(backpack_url('charts/example'));
    }

    public function data(): void
    {
        $this->chart->dataset('Group 1', 'bar', [1, 2, 3])
            ->extra([
                'links' => [
                    backpack_url('crud/your-model/1'),
                    backpack_url('crud/your-model/2'),
                    backpack_url('crud/your-model/3')
                ]
            ]);
    }
}

2. 添加点击事件监听 #

在渲染图表的Blade视图中加入事件逻辑：

<div class="card">
    <div class="card-body">
        {!! $chart->container() !!}
    </div>
</div>

<script>
    const chart = {!! $chart->id() !!};
    // 监听图表点击事件
    chart.options.onClick = (e, elements) => {
        if (elements.length > 0) {
            const index = elements[0].index;
            const link = chart.data.datasets[0].extra.links[index];
            if (link) window.location.href = link;
        }
    };
    chart.update();
</script>

三、集成到Backpack Widget #

不管用哪种图表库，都可以通过Backpack的Widget系统将图表添加到仪表盘或CRUD页面：
在app/Providers/BackpackServiceProvider.php的boot方法中添加：

use Backpack\CRUD\app\Library\Widget;

Widget::add([
    'type' => 'chart',
    'controller' => \App\Http\Controllers\Charts\ExampleChartController::class,
    'class' => 'card mb-3',
    'wrapper' => ['class' => 'col-md-6'],
])->to('dashboard');

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